리액트 useEffect

useState 만큼 중요하고 자주 쓰이는 useEffect 훅에 대해 정리해보려고 한다.

useEffcet 함수는 리액트 컴포넌트가 랜더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.
useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정 작업을 처리할 수 있다.

사용법으로는 useEffect(function, deps) 이다.
여기서 deps는 의존성 배열이라고 칭하며, 배열 형태이며, 배열 안에는 검사하고자 하는 특정값을 말한다.

useEffect(()=>{
 console.log(입력하세요.)
}, []);

여기서 배열(deps)을 생략한다면 리렌더링 될 때 마다 실행된다.

 useEffect(() => {
    console.log('effect');
    console.log(name);
    return () => {
      console.log('cleanup');
      console.log(name);
    };
  }, []);

위 코드를 보면 return 뒤에 나오는 함수를 cleanup 함수 반환이라고 한다.(useEffect에 대한 뒷정리 함수라고 함.)
앞에서 실행한 함수를 초기화시키고, 다음 새로운 이펙트를 실행한다.

일반적으로 api 요청을 통한 데이터 가져오기, 수동으로 React 컴포넌트 DOM조작, 로깅 시에는 클린 업 기능은 필요하지 않다.

useEffect는 단순히 api를 받아올때 주로 사용하는 줄 알았는데, 어떤 상태값이 변할때마다, 또는 사라지는 이벤트가 있을때마다 사용할수 있다는걸 알았다. 현재 슬라이드기능을 vw,px을 사용하여 원시적으로 기능을 만들었는데 useEffect로도 만들 수 있을 것 같다.