Note1. React Rendering mechanism
React의 Component는 Rendering 상태가 변경될 때마다 함수를 다시 렌더링한다.
상태(State) : React가 감시하는 데이터이다. 상태가 변하면 리액트는 UI를 다시 렌더링한다.
변수(let, const) : 렌더링될 때마다 초기화되며 값이 변하더라도 UI는 렌더링되지 않는다.
즉, 상태가 변경되면 리액트는 변경된 컴포넌트를 추적해 업데이트된 상태를 반영하여 UI를 자동으로 리랜더링 하지만 변수가 변경된다고 하더라도 UI를 자동으로 랜더링하지는 않는다.
Note2. useState
useState는 컴포넌트 내부에서 동적 데이터를 관리할 때 사용하는 일종의 기억 장치이다.
state : 현재 상태 값
setState : 상태 업데이트 함수. 해당 함수가 호출되면 리액트는 리랜더링 작업을 수행한다.
const [state, setState] = useState(initialValue);
Note3. useEffect
컴포넌트 랜더링과 관련 없는 별개의 side effect를 수행할 때 사용한다.
컴포넌트가 화면에 나타난 직후 (Mount), 사라지기 직전 (Unmmount), 특정 값의 변경 (Update)시 실행할 로직을 정의한다.
주로 외부 데이터에 접근하거나 API를 호출하는 등의 작업에 빈번하게 사용되고는 한다.
- 첫 번째 인자에는 실행할 함수를 두 번째 인자에는 의존성 배열을 대입한다.
의존성 배열이 변경될 때마다 첫 번째 인자에 대입한 함수가 실행된다.
- Dependency Array
... [] : 컴포넌트가 나타난 직후 딱 한 번만 실행되며 API 초기 호출에 사용된다.
... [value] : value가 바뀔 때마다 실행된다.
... 생략 : 리랜더링이 일어날 때마다 실행되며, 생략이 가능하긴 하지만 성능에 무리가 갈 수 있기에 추천하지 않는다.
useEffect(() => {
// api 호출 로직
}, [method, dependency Array]);
Summary.
useState는 데이터를 보관하는 저장소 역할을 수행하고, useEffect는 특정 시점에 행동하는 명령을 수행한다.
useEffect를 사용해서 상태의 변화를 추적하는것이 불가능하지는 않지만 이는 불필요한 리렌더링 Double Rendering을 발생시켜 성능 저하의 원인이된다. 또한, 앱의 규모가 작을때는 상관없지만 규모가 커지만 성능 저하 및 버그의 원인이된다.