TIL 12 useEffect

주특기과정동안 리액트의 컴포넌트의 특성을 배우기위해 클래스형 컴포넌트와 함수형 컴포넌트 를 배웠다. 부랴부랴 배우면서 어느정도 큰틀을 알게되었지만 useEffect의 정확한 구조와 왜 쓰는지에 대해서는 어렴풋이 알기만했다. 요번주차에서 이 useEffect 이 무엇이고 어떤 구조고 어떻게해서 쓰게되는지 정리하고 싶었다.

 

 

useEffect함수의 기본 구조는 아래와 같다.

React.useEffect(()=> {
   Didmount 부분과 DidUpdate 부분
return () ⇒ willunmount 할부분 }, [두번째인자부분])

useEffect을 설명하기전에 기본 라이프사이클 구조를 보자면  위와 같이 이루워지는데 useEffect을 사용하는 함수형 컴포넌트는 클래스컴포넌트와 다르게 하나하나 componentDidmount, componentDidUpdate, componentWillUnmount 함수를 쓰지않고 없다.

그래서 그런 기능을 하는 React에서 useEffect을 사용하는데, 이 안에는 componentDidmount, componentDidUpdate, componentWillUnmount 도 들어있는것이다.

첫번째 인자에 콜백함수를 넣어주고 그 블록안에 내용이 componentDidmount 와 componentDidUpdate 기능을 가지고 있다. componentDidUpdate 기능을 할려면 두번째 인자 [] 안의 값이 변할때 실행하게된다.

그리고 return 부분이 componentWIllUnmount 부분에 해당해서 이벤트를 삭제해주기위해 이부분을 사용하면된다.