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

안녕하세요 황지호님 이정환입니다.

우선 useEffect의 실행 순서에 대해 말씀드리자면, 정확히 State 변경 -> 리렌더링 -> useEffect 순으로 실행됩니다. State가 변경되면 리렌더링이 트리거되고 그렇게 컴포넌트의 리렌더링이 완료되면 useEffect가 조건에 따라 실행되는거죠 (참고로 useEffect의 deps(의존성 배열)을 빈배열([])로 전달하셨다면 컴포넌트의 첫번째 렌더링인 마운트 이후에 실행됩니다)

"만약 컴포넌트를 렌더링할때 바뀐 state값을 같이 렌더링해줘야 하는 경우에는 useEffect는 컴포넌트가 렌더링 된 이후에 사용하니깐 useEffect를 못쓰는건가요??"

위와 같이 질문 주셨는데요

"못쓴다"라고 표현하신 이유가 무엇인지 궁금하네요, 구체적으로 어떤 문제를 해결하는데에 useEffect를 사용하기 어렵다고 생각하시는지 모르겠습니다. 답글로 알려주세요

컴포넌트 렌더링 이후에 수행해야 하는 동작이 있다면 useEffect를 이용하면 됩니다. 예를 들어 버튼을 눌러 값을 1씩 늘리거나 줄일수 있는 카운터 앱을 만든다고 가정할 때, count State의 값이 변경될 때 마다 변경된 count State의 값을 출력시키거나 혹은 현재 count State의 값을 기반으로 또 다른 값을 계산할 때 활용하시면 됩니다. 이를테면 다음과 같이 말이죠

function App() {
  const [count, setCount] = useState(0);

  const handleSetCount = (value) => {
    setCount(count + value);
  };

  useEffect(() => {
    console.log("count 업데이트: ", count);
  }, [count]);

  return (
    <div className="App">
      (...)
    </div>
  );
}
export default App;

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

useEffect의 개념과 사용 시점에 대해 이해가 필요한 것 같습니다. useEffect는 기본적으로 컴포넌트가 렌더링된 후에 실행되는 효과를 관리하기 위한 훅입니다. 간단하게 요약하면 다음과 같습니다:

• useEffect는 컴포넌트가 렌더링된 이후에 실행됩니다.
  
• 즉, useEffect의 콜백 함수 내에서 진행되는 작업은 컴포넌트가 화면에 그려진 다음에 이루어집니다.
  

특정 조건에 따라 useEffect가 실행되게 하고 싶다면, 디펜던시 배열 (두 번째 인자)를 활용하실 수 있습니다. 예를 들어, 특정 state가 변경될 때만 실행되도록 할 수 있습니다.

유사한 주제에 대해 논의된 기존 질문과 답변 링크를 제공하여 더 깊이 있는 이해를 도와드리겠습니다.

1. 리렌더링 동작에 따른 상태의 변화
   
2. useEffect 사용하신 이유가 궁금합니다.
   

이 링크들의 답변을 통해 황지호님께서 궁금해하시는 상태 변화와 렌더링 타이밍에 관한 상세한 설명을 참고하실 수 있습니다.

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