[리액트] 공부하다가.. useEffect 관련 복습

리액트를 공부하면서 리액트 훅을 이용해서 특정 api를 통해서 데이터를 불러오는 컴포넌트를 작성해보았다. 하지만 리액트 훅이 아직 익숙치가 않아 동작하는 방식이 잘 이해가 안되었다.

api는 가상의 어떤 api, schoolApi 로 대체해서 작성하였다. schoolApi는 전국 초등학교 정보를 제공한다고 가정한다.

 query로 받은 id(학교 아이디)를 이용해서 schoolApi 에서 해당 학교의 선생님 정보를 불러오는 데이터를 기반으로 Teacher 컴포넌트가 있다.

import React, { useState, useEffect } from 'react';
 
import { schoolApi } from 'api';
 
const Teacher = ({ match }) => {
  const { params: { id, type }}= match;
 
  const [state, setState] = useState({
      loading: true,
      error: null,
      result: null,
  });
  
  useEffect(() => {
     try{
        (async() => {
            if( type === "teacher"){
              const {
                    data: { teachers : result }
                } = await schoolApi.staff(id);
            }
            setState( pre => {
              return {...pre, result};
            });
        })()
      } catch(error){
        console.log(error);
    }
  }, [id, type]);
 
  const { result } = state;
  
  return (
    <div>
      {
          result 
        &&
        result.map( teacher =>{
        <div>
            {teacher}
        </div>
        }))
      }
    </div>
  );
}
 
export default Teacher;
 

 

여기서 왜 result &&를 적어주지 않으면 안될까라는 의문이 들었다. (이건... 아직 내가 라이프사이클을 제대로 이해하지 못해서였다...)

return (
  <div>
  {
   result
   &&
   result.map( teacher =>{ <div> {teacher} </div> }))
  }
 </div>
);

useEffect 훅은 클래스 컴포넌트 라이프사이클에서 componentDidMount과 componentDidUpdate와 같은 방식으로 동작한다.

즉, useEffect는 마운트 이후에 동작하는 것이다. 

내 코드에서 result && 를 함께 써주어야하는 이유는 컴포넌트가 마운트가 완료될 시점에는 result는 null이기 때문이다. map함수는 null과 함께 쓰일 수 없다! 

그리고 useEffect는 id 또는 type의 값이 변하지 않으면 schoolApi에서 데이터로 실행되지 않는다. 따라서 id와 type이 변화될 때까지 schoolApi에서 데이터를 불러오지 않아 result는 계속 null인 상태인 것이다. 따라서 result가 있을 경우에 map함수를 실행시키도록 해주기 위해 '&& result'가 필요하다.

[참고자료]
https://ko.reactjs.org/docs/hooks-effect.html

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/