[Custom Hooks 2] useEffect 이용

 

1. useEffect

useEffect는 많은 사용성을 가지고 있다.

class component를 사용할 때는 component의 생명주기에따라 prop의 변경 사항을 모두 생각하고 구현해 주어야했다.

useEffect는 생명주기 메소드 중 componentDidMount, componentWillUpdate, componentWillUnmount와 비슷하다.

• componentWillMount: 컴포넌트가 생성된 후 DOM에 렌더링되기전 호출
• componentDidMount: 첫 렌더링이 끝나고 컴포넌트의 DOM 엘리먼트가 사용가능할 시 호출
• componentWillReceiveProps: props가 업데이트 될 때 호출
• shouldComponentUpdate: 새로운 props를 받았을 때 호출되며, 성능 최적화를 위해 재렌더링을 막을 수 있음
• componentWillUpdate: 새로운 props를 받았고 shouldComponentUpdate가 true를 리턴할 때 호출
• componentDidUpdate: 컴포넌트가 업데이트된 후에 호출
• componentWillUnmount: 컴포넌트가 DOM에서 제거되기 전 호출되어 이벤트 리스너 등을 정리할 수 있게 해줌

먼저 컴포넌트가 mount 되는 즉시 useEffect가 실행될 것이다.

const sayHello = () => console.log("Hello");

useEffect(sayHello);

const [number, setNumber] = useState(0);
const [anumber, setAnumber] = useState(0);

return (
  <div>
    <button onClick={() => setNumber(number + 1)}>{number}</button>
    <button onClick={() => setAnumber(anumber + 1)}>{anumber}</button>
  </div>
);

여기서 버튼을 클릭시 number 또는 anumber 라는 state가 변경될 것인데, 문제는 state가 변경될 때마다 해당 component가 리랜더링 되어, sayHello 함수가 재실행 된다는 점이다.

useEffect는 componentDidMount 역할을 해서 리랜더링 되면 안에 있는 sayHello를 실행시킨다.

 

useEffect의 두번째 인자는 dependency이다.

배열 값을 넣을 수 있는데, 해당 deps가 있다면 useEffect는 deps 리스트에 있는 값이 변화될 때만 실행될 것이다.

 

number state가 변화할 때만 useEffect를 실행시킬려고 한다면 두번째인자 배열에 number를 넣어주면 된다.

const sayHello = () => console.log("Hello");

useEffect(sayHello, [number]);

const [number, setNumber] = useState(0);
const [anumber, setAnumber] = useState(0);

return (
  <div>
    <button onClick={() => setNumber(number + 1)}>{number}</button>
    <button onClick={() => setAnumber(anumber + 1)}>{anumber}</button>
  </div>
);

useEffect에서 function이 return 된다면 그건 componentWillUnmount일 때 실행된다.

 

 

 

 

 

 

 

 

 

 

 

---

출처

노마드코더

https://nomadcoders.co/react-hooks-introduction/