03. React

1. 오늘의 강의 요약

state as a snapshot useState는 비동기인줄 알았지? 엄밀히 말하자면 동기! 함수 컴포넌트 안에서 선언된 함수 중 외부 변수에 대한 접근이 필요한 함수들은 모두 클로져!

루트노드부터 변화된 거 뭔지 파악 - diffing 재조정 reconciliation

동일한 위치에서 동일한 노드 (이 기준은 타입, props, 상태)가 렌더링 요청이 오면, 새로 그리는 게 아니라 원래 있던걸 "유지" 함 부모노드가 리렌더링 되면 같이 안되게 하려면 react.memo key = props가 안바뀌었는데 리렌더링 되는 것 방지

리렌더링 횟수를 줄이기 = 안해도 되는 애들은 적절히 건너 뛰기

React.memo: props가 변경되었는지 확인하고, 아니라면 건너뜀
- 이 때, 변경되었다의 기준은 === (얕은 비교)
- 서로 다른 두 객체의 개별 필드를 모두 확인하고, 객체의 내용이 서로 다른 값인지 확인
props로 children이 전달되었을 때
- 이전과 정확히 동일한 요소의 참조를 반환하면 내용이 바뀌어도 주소값이 같기 때문에 props의 변화를 인식할 수 없습니다.
useMemo 사용하기: 의존배열에 들어간 변수들이 바뀌지 않으면 useMemo에러 반환된 요소는 리렌더링 되지 않음
```
const memoizedElement = useMemo(() => {
  return < ExpensiveChildComponent/>
}, [counter1]) 
```
useLayoutEffect: state가 여러번 변해도 최종값만 적용시켜서 렌더링함
React.Component.shouldComponentUpdate(): 콜백함수로써 리렌더링 여부를 커스텀 하는 함수
React.PureComponent:

Last updated 11 months ago

2. 오늘 배운 것

2-1. 상태란

2-2. 렌더링?

루트노드부터 변화된 거 뭔지 파악 - diffing 재조정 reconciliation

2-3. 리렌더링은 언제?

2-4. 리액트 성능 최적화

리렌더링 횟수를 줄이기 = 안해도 되는 애들은 적절히 건너 뛰기

React.memo: props가 변경되었는지 확인하고, 아니라면 건너뜀

props로 children이 전달되었을 때

useMemo 사용하기: 의존배열에 들어간 변수들이 바뀌지 않으면 useMemo에러 반환된 요소는 리렌더링 되지 않음

const memoizedElement = useMemo(() => {
  return < ExpensiveChildComponent/>
}, [counter1])

useLayoutEffect: state가 여러번 변해도 최종값만 적용시켜서 렌더링함

React.Component.shouldComponentUpdate(): 콜백함수로써 리렌더링 여부를 커스텀 하는 함수

React.PureComponent: