리액트 숙련
useContext
react context의 필요성
props를 계속 넘겨주면 prop drilling 현상 발생
- =>prop의 깊이가 깊어지면 어떤 컴포넌트에서 prop이 왔는지 파악이 힘듦
- =>어디서 오류가 발생했는지 추적이 힘들어 문제해결이 늦어짐
중요개념
- createContext : context 생성
- Consumer : context 변화 감지
- Provider : context를 하위 컴포넌트로 전달
주의사항
- 렌더링문제
Provieder의 제공 value가 달라지면 useContext를 사용하는 모든 컴포넌트가 리렌더링됨 => memoization을 사용하여 해결
React Hooks 최적화
리렌더링조건
- 컴포넌트의 state 변화
- 컴포넌트가 내려받는 props 변경
- 부모 컴포넌트가 리렌더링시 자식 컴포넌트 모두 리렌더링
잦은 리렌더링의 문제점
=>비용이 발생 => 불필요한 렌더링을 방지하는 최적화가 필요
memo(React.memo)
컴포넌트를 메모리에 저장해두고 필요시 사용 => 캐싱
- 부모 컴포넌트 state 변경으로 인한 props 변경이 없으면 리렌더링방지
=>memoization
useCallBack
인자로 들어오는 함수 자체를 memoization
useMemo
value, 함수가 리턴 한 값 자체를 memoization
=> 특정 값이 변경될 때 리렌더링
리액트의 생명주기
Mount(생성될 때)
-
constructor()
컴포넌트가 최초 만들어질 때 호출
-
getDerivedStateFromProps(nextProps, prevState)
props를 받을 때 state 값을 일치시키는 메서드
-
render()
mount가 준비 완료되면 렌더링을 해주는 메서드 => 컴포넌트를 DOM에 mount
-
componentDidMount()
컴포넌트가 브라우저에 표시된 후 호출되는 메서드
Update
-
getDerivedStateFromProps(nextProps, prevState)
mount 과정과 동일
-
shouldComponentUpdate()
렌더링 여부를 결정
함수형 컴포넌트에서는 memo, useMemo, useCallBack이 대신 역할 -
render()
mount 과정과 동일
-
getSnapshotBeforeUpdate()
컴포넌트에 변화가 일어나기 직전 DOM의 상태를 저장
-
componentDidUpdate()
컴포넌트 업데이트 작업 완료 후 호출되는 메서드
unMount(사라질 때)
-
componentWillUnmount
컴포넌트가 사라지기 전 호출되는 메서드
useEffect의 return과 동일
