항해99 39일차 : 리액트 훅 useEffect 사용법을 깨닫다.

useEffect는 함수형 컴포넌트의 훅으로, 이 useEffect 내부의 요소가 페이지가 렌더링될때 같이 실행되면서 마운트 된다. 클래스형 컴포넌트의 componentDidUpmount와 같은것이다. 그런데 수업중에는 내가 이해를 못한건지 튜터님이 설명한걸 편집의 실수로 잘린건지 아니면 튜터님이 학생들이 다 안다고 생각하고 넘어간건지 어쨌든 이해를 못하고 있었다. 그러다가 튜터님께 질문을 청해서 설명을 듣고도 뭔지도 잘 이해 못하고 있었는데, 항해99 클론코딩 주에 이해하게 되었다. 그 이해의 결과가 아래 코드다.

  React.useEffect(() => {
    if (is_edit && !_post) {
      console.log("포스트 정보가 없어요!");
      history.goBack();

      return;
    }

    if (is_edit){
      dispatch(imageActions.setPreview(_post.post_image_url)) // 페이지가 렌더링 되면서 기존 이미지 같이 렌더링
    } else{
      dispatch(imageActions.setPreview("http://via.placeholder.com/400x300"))
    }
  }, [])

코드를 설명하면, is_edit이란 것이 true일때 (수정모드라고 설정한 것), props로 받은 프리뷰 이미지를 리덕스로 디스패치하라는 것이고, 그러면 화면에 수정대상의 이미지가 나온다. 반면에 is_edit이 false라서 수정모드가 아니라 처음 작성 모드라면 이미지란에 저 url의 이미지를 가져와서 보여주라고 리덕스에 디스패치를 하는 것이다. is_edit이 true이든 false든 저 둘중의 하나가 페이지가 처음 렌더링 되면서 같이 렌더링 된다. 이렇게 처음 렌더링되게 할 수 있는 것이 useEffect의 역할이다(사실 이건 useEffect의 일부 기능으로, 렌더링 되는 대상의 업데이트트도 할 수 있다). 같은 조의 리액트 마스터 동료도 수정할 사진이 나오지 않는걸 두고 저건 어찌할 수 없더라면서 손 놓고 있던걸 내가 해결했는데, 돌이켜보면 짜릿한 일이었다. 그 뛰어난 사람도 놓친걸 내가 깨치다니!!!