useEffect의 의존성 배열과 콜백함수

Q1.

짧게 물어볼게.

useEffect에서 2번째 파라미터에 들어가는 배열에 상태변수 3개가 있다고 하자. 그 중 하나라도 바뀌면, useEffect에 걸린 함수가 전부 다 실행되는거지? 상태 변수 3개 다 바뀌어야 할 필요 없이, 그 중 하나라도 바뀌면 작동하는거지?

 

 

 

A1.

ChatGPT의 말:

 

맞아! useEffect에서 두 번째 파라미터인 의존성 배열에 상태 변수 3개가 있다고 하면, 그 중 하나라도 값이 바뀌면 useEffect에 정의된 함수가 실행돼.

즉, 배열에 들어 있는 상태 변수 중 하나라도 값이 변경되면 리액트는 "이 의존성 배열 안에 있는 값이 변했구나!"라고 감지하고, useEffect의 콜백 함수를 다시 실행시켜.

예를 들면:

useEffect(() => {
  console.log("의존성 배열 중 하나가 변경되었습니다!");
}, [state1, state2, state3]);

 

위 상황에서 state1, state2, state3 중 어느 하나라도 값이 바뀌면 console.log가 실행돼.

정리하자면:

• 3개 다 바뀔 필요 X.
• 하나만 바뀌어도 실행 O. 😊

혹시 더 궁금한 점 있으면 물어봐!