tl; dr
- React에서의 re-render는 state와 prop이 변화되었을 때 일어난다.
- useEffect는 sideEffect를 다루기 위해 사용되는 hook이다.
- useEffect는 매 렌더가 마무리된 후 실행된다. → 렌더가 없으면 실행되지 않는다!
불필요한 렌더를 유발하는 useEffect/useState
- useEffect + setState ⇒ useMemo
- async한 로직이 아니고 단순히 다른 state를 deps array로 받아 새로운 state를 setState하는 것은 useMemo로 충분하다. useEffect를 사용할 경우 불필요하게 rerender를 1회 더 발생시킴
- 예시
// 👎🏻
const [data, setData] = useState<dataInstance>();
useEffect(() => {
if(!rawData) return;
setData(createDataInstance(rawData));
},[rawData]);
// 👍🏻
const data = useMemo(() => {
if (!rawData) return undefined;
return createDataInstance(rawData);
}, [rawData]);- 렌더에 관여하지 않는 useState ⇒ useRef
- 대개 내부 로직에 대한 flag 형태로 사용되었을 때
Render
모든 렌더링은 모두 고유의 prop, state, event handler, effect....를 가진다.
// 원본
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
// 처음 랜더링 시
function Counter() {
const count = 0; // useState() 로부터 리턴
// ...
<p>You clicked {count} times</p>
// ...
}
// 클릭하면 함수가 다시 호출된다
function Counter() {
const count = 1; // useState() 로부터 리턴
// ...
<p>You clicked {count} times</p>
// ...
}
// 또 한번 클릭하면, 다시 함수가 호출된다
function Counter() {
const count = 2; // useState() 로부터 리턴
// ...
<p>You clicked {count} times</p>
// ...
}state를 업데이트할 때마다, 리액트는 컴포넌트를 호출한다.
매 랜더 결과물은 고유의 counter 상태 값을 “살펴본다”. 그리고 이 값은 함수 안에 상수로 존재하는 값이다.
즉 react의 렌더링은 pure하다 (state, prop, context) => JSX : pure function
- 다시 말해 렌더링에 관여하지 않는 것은
- side effect이거나
- useRef을 이용하거나
- 그도 아니면 useMemo 등으로 처리
- setState는 async하게 작동 → concurrent feature의 기반이 됨
Side Effect는 무엇인가?
- 위의 render는 pure하다고 하였으므로 render에 관계하지 않으며 function(al component) 외부와 관계하는 것은 side effect라고 보면 됨. 주로
- 외부 시스템과의 sync (network, navigation, file system, global store)
- async 한 로직
- 이 경우에 한해서만 effect이므로 useEffect를 사용한다!
참고 자료
( • .̮ •)◞⸒⸒