[React] 리액트 스터디 4일차

11.3

# 컴포넌트가 리렌더링되는 상황

1. 자신이 전달받은 props가 변경될 때

2. 자신의 state가 바뀔 때

3. 부모 컴포넌트가 리렌더링될 때

4. forceUpdate 함수가 실행될 때

 

forceUpdate(): props, state와 다른 data를 통해서 리렌더링 되는 상황에서 변경된 부분만 찾아서 update해줌.(최대한 사용하지 않는 쪽으로..)

 

11.4 React.memo()

컴포넌트의 props가 변경되지 않으면 리렌더링하지 않도록 설정함.

 

11.5

 - useState의 함수형 업데이트 기능 사용

함수형 업데이트: 새로운 상태를 파라미터로 넣는 대신, 상태 업데이트를 어떻게 할지 정의하는 함수를 파라미터로 넣음.

 

 - useReducer 사용

useReducer 사용법: 두 번째 파라미터에 초기 상태를 넣어야 함. 하지만, 두 번째 파라미터에 undefined를 넣고 세 번째 파라미터에 초기 상태를 만들어주는 함수를 넣으면 컴포넌트가 맨 처음 렌더링될 때 한번만 세번째 파라미터의 함수가 호출됨.

 

11.6

# 리액트에서는 기존 데이터를 수정하는 법

기존 데이터를 직접 수정하지 않고, 새로운 배열이나 객체를 만들어 필요한 부분을 교체함.

이를 '불변성을 지킨다'고 한다.

 

그래서 const nextTodos = [...todos]를 쓰면 불변성이 유지된다.

 

 - 객체 내부의 값이 객체 혹은 배열인 경우

내부의 값을 한번 더 복사해주어야 함.

아주 복잡한 상황인 경우엔 immer라는 라이브러리를 사용하자.

 

11.7

 - 리스트 관련 컴포넌트를 작성하는 경우

리스트 아이템, 리스트를 최적화하자!

 

11.8

react-virtualized를 사용하여 화면에 보이지 않는 내용은 렌더링하지 않고 크기만 차지하도록 하여 성능을 높인다.

 

12. immer 라이브러리

꼭 필요하지는 않지만 사용한다면 생산성을 크게 높일 수 있다.

만약 immer를 사용하는 것이 오히려 불편하게 느껴진다면 사용하지 않아도 좋다.