Rendering 이란?
state, props 를 기반으로 UI 요소를 그려내는 행위입니다.
렌더링의 결과물은 UI 요소, 그러니까 화면에 JSX 문법으로 무엇이 나타날지를 적어둔 컴포넌트들이라고 할 수 있습니다.
렌더링 결과물에 영향을 주는 요소는 state와 props 입니다.
쉽게 말하여 state와 props 를 활용하여 그림을 그려내는 작업 이라고 생각하면 쉽다.
Mount : 화면에 첫 랜더링
Update : 다시렌더링
Unmount : 화면에서 사라질때
Side Effect 란?
함수가 어떤 동작을 할 때, input - output 이외의 다른 값을 조작한다면,
이 함수에는 Side Effect(부수 효과) 가 있다고 표현합니다.
이 함수는 단순히 input과 output만 존재하는 함수가 아니다.
실행하는 중간에 함수 외부 세계에 있는 count라는 변수를 조작합니다.
이는 함수의 결과값 이외의 다른 상태를 변경시키는 행위에 해당하므로 Side Effect 가 있다고 할 수 있습니다.
이러한 Side Effect는 React의 함수 컴포넌트에서도 일어날 수 있습니다.
앞서 함수 컴포넌트의 Input이 state, props이고, output이 UI라고 설명한 바 있습니다. 그렇다면 함수 컴포넌트의 Side Effect는 state와 props를 받아서 UI를 그려내는 것 이외의 행위라고 할 수 있습니다.
그렇다면 함수 컴포넌트에서의 Side Effect는, 렌더링이 아니고 외부 세계에 영향을 주는 어떠한 행위입니다.
대표적으로 Data Fetching, DOM에 직접 접근(ex. Event Listener 등록), 구독(ex. setInterval)과 같은 행위들이 있습니다. 이들은 모두 컴포넌트에서 꼭 필요한 대표적인 Side Effect 들입니다.
useEffect 란?
side Effect들을 함수의 body 자리(render)에서 실행시키면 안됩니다.
앞서 함수 컴포넌트의 리턴 값은 UI 요소라고 설명했고, state, props의 변화가 있을 때마다 함수가 실행된다고 말씀드렸습니다. 이 말은 매 렌더링 때마다 함수 body에 있는 로직이 실행된다는 뜻입니다.
또한 렌더링과 무관한 로직이 렌더링 과정에서 실행되기 때문에 렌더링 자체에 영향을 줘 성능 상 악영향을 끼칠 수도 있습니다.
그래서 React에서는 이런 Side Effect를 일으키기 적절한 장소로서 useEffect hook 을 제공합니다.
공식 문서에서도 useEffect를 "React의 순수한 함수적인 세계에서 명령적인 세계로의 탈출구로 생각하세요" 라고 설명하고 있습니다.
여기서 "순수한 세계"란 렌더링(Input → Output)을 뜻하고, 렌더링 이외에 일으켜야 하는 Side Effect를 일으킬 탈출구로 useEffect를 사용하라는 의미입니다.
useEffect는 Side Effect를 렌더링 이후에 발생시킵니다. (예외: useLayoutEffect). useEffect가 수행되는 시점에 이미 DOM이 업데이트되었음을 보장한다는 뜻이고, 바꿔 말하면 Side Effect가 렌더링에 영향을 주지 않도록 설계되었음을 의미합니다.
