React란?
사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리다.
상태 관리
상태란?
React에서 상태(State)는 컴포넌트의 데이터를 의미하며, 이 데이터는 변할 수 있다.
상태 관리의 목적
사용자 상호작용 등으로 데이터 변경됨에 따라 UI를 업데이트하기 위해 상태를 관리한다.
상태 관리 방법
- 지역 상태 혹은 크로스 컴포넌트 상태는 React Hook을 사용하여 관리할 수 있다.
- 전역 상태는 Redux 같은 라이브러리로 관리할 수 있다.
Redux
Redux란?
전역 상태 관리를 위한 라이브러리다.
Redux 사용 목적
Props Drilling 이슈를 해결하기 위해 사용한다.
Redux vs Recoil
Redux는 전역 상태 관리로만 사용되는 반면, Recoil은 지역 상태 관리를 위한 편리한 방법도 제공한다.
버츄얼 DOM과 리얼 DOM
리얼 DOM
- 실제 브라우저의 DOM
- 직접 접근하여 변화를 주다 보면 성능 이슈가 조금씩 발생한다.
조작할 때마다 웹 페이지를 다시 그리기 때문이다.
버츄얼 DOM
- 리얼 DOM을 추상화한 자바스크립트 객체
- 리얼 DOM에 접근하여 조작하는 대신, 가상 DOM과 실제 DOM을 비교하여 변경 사항을 실제 DOM에 적용한다.
useRef
useRef는 값이 변해도 렌더링을 발생시키지 않기 때문에, 렌더링에 영향을 미치지 않고 상태값을 저장하고 싶을 때 사용한다.
JSX
- JavaScript의 확장 문법
- JavaScript 파일 내에 HTML과 유사한 마크업을 작성할 수 있게 해준다.
- Babel을 사용하여 JavaScript로 변환된다.
- 기본적으로 React가 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로, XSS 공격을 방지할 수 있습니다.
VanillaJS vs 리액트
DOM 조작
상태 변경 시 자동으로 UI를 업데이트할 수 있기 때문에, DOM 변경 로직을 작성하지 않아도 된다.
JSX
요소를 동적으로 생성할 때 VanillaJS의 creatElement 함수를 사용하는 것에 비해 가독성이 높고 작성하기 편리하다.
Virtual DOM
SPA는 하나의 페이지에서 계속해서 요소의 위치를 재계산하기 때문에, 그만큼 DOM을 관리하는 과정에서 부담해야 할 비용이 커진다. 이를 리액트는 Virtual DOM을 통해 해결했다.
상태의 불변성
불변성을 지킨다
메모리 영역에서 값이 변하지 않도록 한다는 의미이다. 즉, 상태 객체를 직접 수정하지 않고, 상태가 변경될 때마다 새로운 객체를 생성한다.
불변성을 지켜야 하는 이유
- 리액트에서 상태가 변경되면, 렌더링이 발생한다.
이때 이전 상태와 현재 상태를 얕은 비교로 판단하기 때문에 불변성을 지켜야 한다. - 예상 가능하고 신뢰할 수 있는 코드를 작성하기 위해 불변성을 지켜야 한다.
리액트에서의 얕은 비교란?
엄격한 동등성 비교(Object.is). 그 결과, 두 값이 같지 않고 객체인 경우 첫 번째 값까지 비교
클래스형 컴포넌트 vs 함수형 컴포넌트
클래스형 컴포넌트
라이프사이클 메서드를 사용해서 컴포넌트의 생명 주기를 관리할 수 있다.
함수형 컴포넌트
hook을 통해 라이프사이클 기능과 상태 관리를 구현할 수 있다.
함수형 컴포넌트 사용 이유
- 클래스형에 비해 코드가 간결하다.
- 새로운 기능과 최적화는 함수형 컴포넌트와 훅을 중심으로 이루어지고 있다.
- 클래스형은 생명주기 메서드의 순서와 상관없이 코드가 작성돼 있을 수 있다. 따라서 state 흐름을 추적하기 어렵다.
Context API
- 전역 상태를 하위 컴포넌트에 주입할 수 있도록 도와주는 기능
- props로 상태를 넘겨주지 않더라도 Context API를 사용하면 원하는 곳에서 Context Provider가 주입하는 상태를 사용할 수 있다.
- props drilling 이슈를 해결할 수 있다.
props vs state
props
- 부모 컴포넌트로부터 전달받는 데이터
- 읽기 전용
state
- 컴포넌트 내부에서 관리되는 데이터
- 변경이 가능하다.
Memoization
- 렌더링을 최소한으로 줄이기 위해서 사용한다.
- useMemo, useCallback 훅과 고차 컴포넌트인 memo가 사용된다.
두 가지 비용
- 값을 비교하고 렌더링 또는 재계산이 필요한지 확인하는 작업
- 이전에 결과물을 저장해 두었다가 다시 꺼내와야 한다.
