React Hook : useEffect

⭐ Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있습니다.

side effect란, 데이터 가져오기, 문서 업데이트, 이벤트 설정, 해지 및 정리 등을 말한다.

useEffect는 컴포넌트의 생명주기(Life Cycle)과 밀접한 연관이 있는데, 생명주기란, 컴포넌트의 생성(mount),업데이트(update),제거(unmount)를 이야기한다. 클래스 컴포넌트에서는 useEffect대신에 componentDidMount(생성), componentDidUpdate(업데이트), componentWillUnmount(제거)과 몇가지 추가적인 메소드를 사용한다는 것을 알고만 있자. 다만 useEffect는 위 3가지 메소드를 결합한것과 같은 역할을 수행함으로, 좀더 깊게 알아보자 하는 경우에는 위 3가지 메소드를 공부하면 도움이 될것이다.

//useEffect(function,deps)
const Component =()=>{
  useEffect(()=>{
    //수행할 메소드, Dom조작 코드를 작성한다.(컴포넌트 생성 시)
    //ex) ref.addEventListener(...);
    return ()=>{
      //clean-up : 제거해야할 이벤트 (컴포넌트 제거 시)
      //ref.removeEventListener(...);
    }
  },[]);//dependecy : []내부에 변수 등을 지정하면 해당 변수가 변경될시 useEffect 실행.(컴포넌트 업데이트 시)
}

deps의 차이를 통해 사용방식을 변경할 수 있다.

useEffect(()=>{
	//rendering 될때마다 실행
});

useEffect(()=>{
	//마운트 될때만 실행
},[]);

useEffect(()=>{
	//state가 업데이트 될때 (+ 마운드 될때)
},[state]);

deps를 넣는것을 통해 상황에 따른 ajax통신 등의 기능을 유용하게 사용할 수 있다.