TIL no.34 - How to fetch api in React Hooks?

useEffect 는 setState 에서 state를 업데이트 해왔듯이 useEffect로 특정한 변화에서만 업데이트 시키도록 하는 것입니다.

useEffect(() => {
    fetch("/data/BookDetails/data.json")
      .then((res) => res.json())
      .then((res) => setData(res.MESSAGE));
  }, []);

이와 같은 코드로 class 형 component와 같은 결과를 보일 수 있습니다.

 

 

useEffect 는 여러가지 라이프 사이클이 합쳐진 형태로 설명할 수 있습니다.

• componentDIdMount (의존형 배열 : [])
• shouldComponentUpdate (의존성 배열 내에 해당 사항 없을 경우)
• componentDidUpdate (의존성 배열 자체가 없거나, 해당 사항이 있을 경우)
• componentWillUnmount

그렇다는 것은 Hooks에서도 아주 중요한 부분이라고 할 수 있겠죠.

 

useEffect(() => {
    setTimeout(() => {
      setModal(false);
    }, 2500);
  }, [modal]);

위의 코드는 제가 setTimeout으로 모달 창을 일정시간 띄운 뒤 없애는 함수를 실행한 코드입니다.

의존성 배열 부분에 modal 이 들어있기 때문에 modal의 값이 변할 때마다 실행한다는 의미로 componentDidUpdate의 형태라고 할 수 있습니다.