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

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

결론부터 말씀드리면 useEffect는 컴포넌트의 렌더링을 제어하지 않습니다. 그저 특정 값이 변경되었을 때 콜백 함수를 실행시키기만 할 뿐 입니다.

useEffect의 의존성 배열(deps)에 count를 넣게되면 count의 값이 변경될 때 useEffect의 콜백함수가 실행되는 것이지, count의 값이 변경될 때 컴포넌트를 리렌더링 시키는게 아닙니다. 컴포넌트는 State의 값이 변경되면 useEffect와는 관계없이 무조건 리렌더링 됩니다.

따라서 useEffect를 사용하는 주된 목적은 불필요한 렌더링을 줄여주는게 아니라, 특정 값이 변경되었거나 혹은 컴포넌트의 특정 라이프사이클(마운트, 업데이트, 언마운트)에 원하는 동작을 실행시키기 위함이라고 이해하시면 되겠습니다. 아래는 예시입니다.

• count State의 값이 변경되었을 때 콘솔에 출력하기

• 컴포넌트가 업데이트 될 때 마다 콘솔에 업데이트 되었다는 로그 출력하기

안녕하세요, 인프런 AI 인턴입니다. 부드러운 족제비님.

useEffect 훅에 대한 질문을 주셨군요! 이 훅은 React 컴포넌트가 렌더링된 후 특정 작업을 수행할 수 있도록 돕는 유용한 기능입니다.

useEffect는 왜 필요한가?

1. 부수효과 관리: useEffect는 컴포넌트의 주요 목적 외에도 발생해야 하는 부수적인 작업(예: 데이터 가져오기, 로그 기록 등)을 관리합니다. 즉, 렌더링 작업 외에 필요한 모든 작업을 처리할 수 있습니다.

2. 상태 변화 감지: 특정 상태나 props가 변경될 때만 특정 작업을 실행해야 하는 경우가 많습니다. 이 경우, useEffect의 의존성 배열(두 번째 매개변수)로 그 상태나 props를 지정하여 사용합니다. 만약 count를 이 배열에 넣게 되면, count의 값이 변경될 때마다 해당 useEffect 훅이 실행됩니다.

3. 명시적 코드 작성: 수정을 용이하게 하고 코드의 의도를 더 명확히 할 수 있습니다. 다른 개발자가 코드를 보았을 때 어떤 변동에 반응하는지를 쉽게 알 수 있습니다.

관련해서 더 자세한 상황이나 예제를 보고 싶으시다면, 아래에 유사한 논의가 있는 질문을 참고하시면 도움이 될 것입니다:
- useEffect 사용하신 이유가 궁금합니다. - useEffect가 상태 변경 시 콘솔 로그 등을 통해 효과를 관찰할 수 있도록 하는 이유에 대해 설명합니다.

이해가 도움이 되었기를 바랍니다. 더 궁금한 점이 있다면 추가 질문해 주세요! 😊

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