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

안녕하세요! 늘 강의 잘 듣고 있습니다 (__)

이번 section에서 소소한 의문점이 하나 남아서 질문 글 남깁니다.

먼저 강의에서 작성해주신 아래의 코드 블럭 말인데요,

  // mount가 됐는지 확인 하는 ref 변수
  const isMount = useRef(false);

  // 1. 마운트 : 탄생
  useEffect(() => {
    console.log("mount");
  }, []);

  // 2. 업데이트 : 변화, 리렌더링
  useEffect(() => {
    if (!isMount.current) {
      isMount.current = true;
      return;
    }
    console.log("update!");
  });

isMount ref 변수가 현재 컴포넌트의 마운트 여부를 체크하는 변수로 만들어졌는데, 그렇다면 마운트 시점에서 true로 갱신해줘야하는게 아닌가 싶어서요.

기본적으로 컴포넌트가 마운트 되면 컴포넌트가 만들어졌다, 즉 변화 했다라고도 할 수 있는거니, update 로직도 같이 실행 되어야 하는게 맞지 않나 라는 의문이 들었습니다.

위 예시는 제가 이해한대로 해석하면 "컴포넌트가 마운트가 되었지만 처음 시점의 update 로직은 패스한다" 라고 생각되는 느낌이라서 살짝 애매하게 느껴집니다.

그래서 아래와 같이

  // 1. 마운트 : 탄생
  useEffect(() => {
    console.log("mount");

    // mount 시점에서 실행 될 프로세스 start
    // mount 시점에서 실행 될 프로세스 end

    // 모두 마무리시
    if (!isMount.current) {
      isMount.current = true;
    }
  }, []);

  // 2. 업데이트 : 변화, 리렌더링
  useEffect(() => {
    // update 프로세스 진행
    console.log("update!");
  });

마운트 시점에서 동작하는 프로세스가 마무리 된 후 isMount를 갱신하고, 그 다음 update 시점은 이미 마운트가 되어야지만 동작하는거니 별도의 mount 체크 필요없이 update 프로세스를 작성하면 되지 않나 싶었습니다.

물론 이렇게 되면 isMount 자체를 현 시점에서 사용 할 이유가 없으니 애매해지긴 하겠지만요..

글 재주가 없어서 질문이 좀 난해해서 죄송합니다 ㅠㅠ 강사님께서는 이에 대해 어떻게 생각하시는지 질문 드립니다!