🌁 useEffect
처음 마운트 될 때만 실행하고 이후에는 실행되지 않도록 하기 위해서 사용합니다.
컴포넌트가 화면에 렌더링된 후에 실행됩니다. 따라서 DOM이 업데이트된 후에 실행되기 때문에 화면에 반영된 내용을 바탕으로 작업할 수 있습니다.
예를 들면 input 태그처럼 안에 값을 입력할 때마다 검색 API를 호출하고 싶지 않기 때문에 useEffect를 사용해서 한 번만 호출하도록 하기 위함입니다.
useEffect(() => {
console.log("I run only once");
}, [])
useEffect(() => {
console.log("I run when 'keyword' changes", keyword);
}, [keyword]);keyword의 값이 변화될 때마다 코드를 실행하고 싶다면 [ ] 자리에 keyword를 넣어주면 됩니다. 하지만 keyword가 아닌 다른 변수라면 실행되지 않습니다.
🌁 useEffect() useLayoutEffect()
둘 다 컴포넌트의 생명주기 동안 특정 작업을 수행하기 위해 사용됩니다.
비슷한 목적을 가지고 있지만, 실행 시점과 방식에서 차이가 있습니다.
useEffect는 비동기적으로 실행되며 컴포넌트가 렌더링된 후에 실행됩니다. 이는 화면이 먼저 사용자에게 보여지고, 그 후에 이펙트가 실행되는 것을 의미합니다. 따라서 화면 깜빡임이 발생할 수 있습니다.
반면 useLayoutEffect는 동기적으로 실행됩니다. 이는 컴포넌트가 렌더링되기 전에 실행되며, 화면이 사용자에게 보여지기 전에 이펙트가 실행됩니다. 따라서 화면 깜빡임을 방지할 수 있습니다.
useLayoutEffect는 초기 렌더링과 같은 페인트 안에 있기 때문에, 초기 렌더링이 보이지 않고 바로 변경된 값이 반영되기 때문입니다.
적절한 상황에 맞게 두 Hook을 선택하여 사용해야 합니다.
👀 React Reconciliation (재조정)
React의 Reconciliation 과정은 컴포넌트의 상태가 변경될 때, 변경된 부분만을 효율적으로 업데이트하는 과정입니다. 컴포넌트의 상태가 변경되면, 새로운 가상 DOM을 생성하고 이전 가상 DOM과 비교하여 변경된 부분만 실제 DOM에 반영합니다. 이를 통해 불필요한 DOM 업데이트를 최소화할 수 있습니다.
과정은 두 단계로 첫 번째는 렌더 단계로, 새로운 가상 DOM을 생성합니다. 두 번째는 커밋 단계로, 변경된 부분을 실제 DOM에 반영하는 단계입니다.
React는 렌더링 트리를 이전 것과 비교하면서 새로 그리는 과정을 거치고, 커밋 단계에서 실제 DOM에 반영하기 때문입니다.
