[React] 컴포넌트의 변화에 따른 작업 처리 #useEffect()

💡 useEffect()

const [count, setCount] = useState(1);

const handleCountUpdate = () => {
  setCount(count + 1);
}

const handleInputChange = (e) => {
  setName(e.target.value);
}

/* 대충 다른 코드들 */
return (
  <button onClick={handleCountUpdate}>추가</button>
  <span>count: {count}</span>
  <input type="text" value={name} onChange={handleInputChange} />
  <span>name: {name}</span>
)

`count`와 `name` 값이 이벤트에 따라 handle 함수들에 의해 업데이트되는 저런 코드가 대충 존재함. 저렇게 업데이트 되거나, 마운트(최초 렌더링)되거나, 마운트가 해제되었을 때 실행되는 것이 `useEffect()` 임

 

 

사용 예시 (1) - 모든 state의 변경에 대해 실행

const handleCountUpdate = () => {
  setCount(count + 1);
}
const handleInputChange = (e) => {
  setName(e.target.value);
}
  
// useEffect 기본 문법
useEffect(() => {
  console.log('모든 state의 변경에 대해 실행')
})

`count`와 `name` 값이 변경되면 useEffect() 내부의 로직이 실행됨. 즉, 버튼을 눌러 `count` 값이 업데이트 되거나, onChange로 인해 `name`값이 업데이트 될 때마다 실행됨. 첫 번째 인자로 콜백함수를 전달

 

사용 예시 (2) - 특정 state의 변경에 대해 실행

const handleCountUpdate = () => {
  setCount(count + 1);
}
const handleInputChange = (e) => {
  setName(e.target.value);
}
  
useEffect(() => {
  console.log('count 가 변경될떄마다', count)
}, [count])

useEffect()의 두 번째 인자로는 배열을 넘겨줄 수 있다(선택). state를 배열에 넣어 전달하면 되고, 배열에 담긴 state가 업데이트  되는 경우에 한해서만 실행된다.

 

사용 예시 (3) - 컴포넌트가 마운트 될 때만 실행 (최초 1회)

useEffect(() => {
  console.log('마운팅 될 때만 (최초 1회)')
}, [])

컴포넌트가 최초 1회 렌더링 될 때만 실행됨 (초기 설정할 때 쓰면 될듯?)

---

💡 실제 동작 원리

그래서 배열에 state를 넣어주면 왜 해당 state에 대해서만 실행이 될까라는 의문이 들 수 있다. 사실 useEffect는 내부적으로 배열로 들어온 값이 이전과 같은지 비교한다. 그러니까 `count`라는 값을 배열로 전달하고 `setCount` 로 값을 변경하면 useEffect가 이전 `count`와 변경된 `count`를 비교해서 값이 달라졌으면 실행해준다. 

 

• 두 번째 인자로 아무 값도 넣어주지 않으면 비교할게 없기 때문에 어떤 state가 변하더라도 무조건 실행한다.
• 빈배열`[]`을 넣어주면 최초 1회만 실행
  • 배열이 비어있으면 무조건 한 번은 실행됨 
  • 그리고 이전과 항상 같은 상태 (`undefined`) 를 유지하기 때문에 업데이트가 발생하지 않음
• 특정 state값을 넣을 경우 그 값이 변경되면 이전과 비교해서 실행한다.