React 기본 배우기

React란 무엇인가요?

React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다.

React는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용됩니다.

그러기에 이러한 웹 앱을 만드는 다른 Tool인 Vue나 Angualar와 많이 비교를 하게 됩니다.

Angualar와 Vue는 프레임워크이며 React는 라이브러리입니다.

 

Framework vs Library

Framework는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것입니다.

Library는 어떻나 특정 기능을 모듈화 해놓은 것입니다.

 

React를 사용하는 이유

- 상대적으로 배우기 쉬운 라이브러리

- 여러 기능들을 위해 이미 만들어져 있는 라이브러리 환경 

- 많은 기업들의 사용으로 검증이 된 라이브러리(대표적으로 페이스북)

 

React 컴포넌트란 무엇인가요?

React Component는 React로 만들어진 앱을 이루는 최소한의 단위입니다.

 

class App extends Component {
  render() {
    return <h1>안녕하세요</h1>
  }
}

위와 같은 형식은 클래스형 컴포넌트(Class Components)입니다.

function App() {
  return <h1>안녕하세요</h1>
}

위와 같은 형식은 함수형 컴포넌트(Functional Components)입니다.

 

예전에는 클래스형으로 많이 개발했지만 React Hooks라는 것을 발표한 후부터 함수형을 많이 사용하기 시작했습니다.

 

브라우저가 그려지는 원리 및 가상돔

React의 주요 특징 중 하나는 가상돔을 사용한다는 것입니다.

 

웹 페이지 빌드 과정(Critical Rendering Path CRP)

브라우저가 서버에서 페이지에 대한 HTML응답을 받고 화면에 표시하기 전에 여러 단계가 있습니다.

우선, 웹 브라우저가 HTML 문서를 읽고, 스타일 입히고 뷰포트에 표시하는 과정입니다.

1. 렌더 엔진이 문서를 읽어들여서 그것들을 파싱하고 어떤 내용을 페이지에 렌더링할지 결정합니다. => Dom tree 생성
2. 브라우저가 DOM과 CSSOM을 결합하는 곳이며, 이 프로세스는 화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리를 출력합니다. 즉 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 포함됩니다. => Render tree 생성
3. 브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 단계입니다. => Layout(reflow)
4. 실제 화면에 그리기. => Paint

이 과정 중 인터렉션에 이해 DOM에 변화가 발생하면 Render tree가 재생성 됩니다. 아주 비효율적입니다.

이러한 문제로 인해서 나오게 된 것이 가상돔(Virtual Dom)입니다.

가상돔이란 실제 DOM을 메모리에 복사해준 것으로 생각하면 됩니다.

 

데이터가 바뀌면 가상돔에서 렌더링하고 이전에 생긴 가상돔과 비교해 바뀐 부분만 실제 돔에 적용을 기켜줍니다.

바뀐 부분을 찾는 과정을 Diffing이며, 바뀐 부분만 실제 돔에 적용시켜주는 것을 재조정(reconcilication)입니다.

 

React 설치

npx create-react-app <프로젝트>

위 명령어를 통해 react를 설치할 수 있습니다.

 

구조 분해 할당(Destructuring)

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식입니다.

위에 코드는 길고 하단의 코드는 간결함이 있어서 많이 사용됩니다.

 

React 불변성

불변성이란 값이나 상태를 변경할 수 없는 것을 의미합니다.

원시 타입(boolean, string, number, null, undefined, symbol)은 불변성(immutable)을 가지고 있고,

참조 타입(object, array)는 가변성(mutable)을 가지고 있습니다.

 

JS에서 원시 타입을 대한 참조 및 값을 지정하기 위해 call stack 메모리 공간을 사용하지만, 참조 타입의 경우 Heap이란 별도의 메모리 공간을 사용합니다.

Call stack은 객체 및 배열 값이 아닌 메모리에만 Heap 메모리 참조 ID를 값으로 저장합니다.

 

불변성을 지켜야 하는 이유

1. 참조타입에서 객체나 배열의 값이 변할 때 원본 데이터가 변경되기에 이 원본 데이터를 참조하고 있는 다른 객체에서 예상치 못한 오류가 발생할 수 있어서 프로그래밍의 복잡도가 올라갑니다.
2. React에서 화면을 업데이트할 때 불변성을 지켜서 값을 이전 값과 비교해서 변경된 사항을 확인한 후 업데이트하기 때문에 불변성을 지켜줘야 합니다.

불변성을 지키는 방법

참조타입은 Call Stack 주소 값은 같으므로 비교적 쉽습니다.

Heap메모리 값만 바꿔주기에 불변성을 유지할 수 없었으므로 새로운 배열을 반환하는 메소드를 사용하면 됩니다.

spread, operator, map, filter, slice, reduce

원본 데이터를 변경하는 메소드 => splice, push

 

전개 연산자(Spread Operator)

ES6에서 새롭게 추가되었으며, 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용합니다.

연산자의 모양은 ... 이렇게 생겼습니다.