[React] React Hook - useEffect 내맘대로 정리

React Hook이란? 

 - 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다.

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다.
Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.

https://ko.legacy.reactjs.org/docs/hooks-intro.html

 

 

useEffect 란?

- Class Comonent의 Life Cycle을 사용하게 해줌

   * Life Cycle은 크게 3단계로 구성 (Mounting -> Updating -> Unmounting)

   * useEffect는 Class Component에서 사용하던

        componentDidMount(컴포넌트 마운트시 동작),

        componentDidUpdate(컴포넌트의 State 변경시 동작),

        componentWillUnmount(컴포넌트 마운트 해제 직전 동작)를 하나로 통합한 것

 

   * 형태 : useEffect( function(), deps )

        // function에는 실행시킬 함수를 입력, deps에는 의존성 배열을 담는다.

 

- 사용 예시 : 

   * 1)deps 없이 입력 = 페이지가 렌더링 될 때마다 함수를 불러온다.

useEffect(()=>{ // 컴포넌트가 페이지에서 랜더링될 때마다 동작
    console.log("Page Rander");
});

 

    * 2)  deps에 빈 배열을 입력 = 첫 렌더링 될 때만 함수를 불러온다.

useEffect(()=>{ // 컴포넌트가 페이지에서 최초 랜더링될 때 동작
    console.log("Page Rander");
}, []);

 

    * 3)  deps에 states, props 등 을 입력 = 해당 states, props(1개 혹은 복수)가 수정될 때만 함수를 불러온다.

const [name, setName] = useState("H-gomi");
useEffect(()=>{ // state가 변경될 때 함수를 불러온다.
    console.log(name);
}, [name]);

 

    * 4)  return 함수를 입력 = Component를 Unmount하기 전 return의 함수를 불러온다.

useEffect(()=>{
    console.log("Hello?");
    
    return () => { // Component가 unmount 되기 전 실행된다.
    	console.log("will Unmount");
    }
}, []);