React hooks: useState, useEffect

1차 프로젝트에서 class형 컴포넌트를 사용한 것과 달리, 2차 프로젝트에서는 functional component를 사용해 react code를 구성하고 있다.

Functional component는 함수를 하나의 컴포넌트로서 사용하는 것으로, class component의 lifecycle을 hooks로 보강해 사용하고 있다.
(보강이라고 했지만, 사실상 lifecycle보다 hooks를 사용하는 것이 더 간단하다.)

useState as state in constructor

useState는 아래와 같이 작성하며, functional component 내 최상단에 위치한다.

  const [cateList, setCateList] = useState("통합검색");
  const [books, setBooks] = useState([]);
  const [sort, setSort] = useState("keyword");

useEffect는 class lifecycle에서 componentDidMount(), componentDidUpdate()와 같은 역할을 한다.

따라서 mock data나 서버의 data를 fetch 해올 때, useEffect를 사용하여 아래와 같이 데이터를 받아올 수 있다.

useEffect(() => {
    fetch("/data/bookList.json")
      .then((res) => res.json())
      .then((res) => {
        console.log("res.books >>>", res.book_list);
        setBooks(res.book_list);
      });
  }, []);

위의 코드에서 useEffect의 두 번째 인자로 빈 배열을 준 것을 볼 수 있다.

useEffect as componentDidMount and componentDidUpdate

useEffect의 두 번째 자리는 의존성 배열을 인자로 받는다.

해당 배열 내의 값을 추적하며 업데이트 되기 때문에 빈 배열을 위치시키면 해당 useEffect는 componentDidMount처럼 최초 render 시에만 실행된다.

만약 두 번째 인자로 아무것도 주지 않으면 첫 번째 인자가 계속 update 되기 때문에 메모리 누수가 극히 심하며, 노트북이 달궈진 후라이팬이 되는 효과를 볼 수 있다.