리액트 컴포넌트 라이프 사이클 중 update 관련 질문

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

7.3) useEffect로 라이프사이클 제어하기

해결된 질문

작성

178

안녕하세요 강사님! 항상 좋은 강의 감사합니다:)

강의를 보던 중 강사님 께서는 update 단계에서 useEffect의 두번째 인수 deps를 생략하라고 하셨는데 아래와 같이 deps에 state값들(count, input)을 주고 변화 시켜도 콘솔에 생략했을 때와 똑같이 update가 출력되는 것을 확인했는데 무슨 차이인지 궁금합니다!

  useEffect(() => {
    if (!isMount.current) {
      isMount.current = true;
      return;
    }
    console.log("update");
  });

useEffect(() => {
    if (!isMount.current) {
      isMount.current = true;
      return;
    }
    console.log("update");
  }, [count, input]);

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

다음과 같이 이해하시면 됩니다.

deps에 아무 값도 넣지 않는다 -> 컴포넌트 리렌더링시 useEffect의 콜백함수 실행
deps에 count, input 값을 넣는다 -> count, input 값 업데이트 시 useEffect의 콜백함수 실행

이때 실습중인 컴포넌트에는 count와 input외에 별다른 State가 없기 때문에, count나 input이 업데이트 되었을 때가 곧 컴포넌트가 리렌더링 되는 시점이라고 볼 수 있습니다. 그러나 count, input 외의 새로운 State가 추가되면 그렇지 않게 되니 유의해야 합니다.

kwkw

질문자

넵 확인이 늦었습니다ㅜ 감사합니다!!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. kwon님.

질문 주신 내용은 React의 useEffect 훅과 관련된 것으로, 특히 deps (dependency array)의 사용 여부에 따라 useEffect의 동작 방식이 어떻게 달라지는지를 이해하는 것이 중요합니다.

`deps`의 역할

deps 생략:
- useEffect 훅에서 deps 배열을 생략하면, 해당 useEffect는 컴포넌트가 렌더링될 때마다 실행됩니다.
- 즉, 상태나 props의 변화와 관계없이 매번 실행되어 “update”가 출력됩니다.
deps 추가:
- useEffect 훅의 두 번째 인자로 deps 배열을 추가하면, 배열에 포함된 변수(count, input)가 변경될 때만 useEffect가 실행됩니다.
- 따라서, 해당 상태가 변경되지 않는 한 “update”가 실행되지 않습니다.

두 코드의 차이는 실행 빈도와 시점입니다. deps가 생략된 경우 매 렌더링 시마다 실행되지만, deps에 특정 상태가 명시되면 그 상태가 변경될 때에만 실행됩니다.

질문에서 deps에 상태를 추가하고 생략했을 때 둘 다 “update”가 출력되는 이유는, 질문에서 주어진 예시의 사용 상황에서는 모든 렌더링이 자동으로 count와 input의 변화를 동반하였기 때문일 수 있습니다. 하지만 복잡한 컴포넌트에서는 두 방법의 차이가 명확해질 수 있습니다.

관련하여 리액트의 useEffect에 대한 자세한 정보를 보시려면 리액트 공식 문서를 참조할 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

리액트 컴포넌트 라이프 사이클 중 update 관련 질문

deps의 역할

`deps`의 역할