[SSAFYCial] React의 useEffect에 대해 알아보자! (2)

안녕하세요!

바로 돌아왔습니다! ㅋㅎ

 

지난 기사에서는 리액트의 라이프 사이클 및 클래스형 컴포넌트에서의 생명 주기 메소드들을 살펴봤는데요,

이번엔 useEffect로 이 메소드들을 편리하게 사용하는 방법을 소개해볼게요 !

 

 

useEffect의 등장

그만 씁시다,,

 

useEffect는 React 16.8 버전에 새롭게 추가된 Hook입니다.

처음에도 말했듯이 useEffect를 사용하면 클래스형 컴포넌트를 작성하지 않아도 함수형 컴포넌트에서 side effect를 수행할 수 있습니다.

 

어떤 개발자분은

'useEffect를 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋다.'

 

라고 합니다.

 

 

useEffect는 다음과 같이 두 가지 형태가 있습니다.

첫번째 파라미터에는 콜백 함수가 들어가고, 두 번째 파라미터에는 배열이 들어갑니다.

유튜브 별코딩 님의 영상 중

 

 

인자가 하나 뿐인 경우

유튜브 별코딩 님의 영상 중

 

인자가 하나뿐인 경우에는 경우에는 컴포넌트가 랜더링 될 때마다 콜백함수를 실행합니다.

여기서 콜백 함수란 다른 함수의 인자로 전달된 함수를 말합니다.

 

인자가 두 개인 경우

 

두 번째 인자에는 배열을 적어주면 되는데요, 

이것을 의존성 배열(dependency array)이라고 합니다.

 

초기 마운트 시에 실행되고, 의존성 배열 안에 들어있는 값이 변할 때 콜백함수가 실행됩니다.

 

만약 의존성 배열에 [] 와 같이 빈 배열을 넣는다면?

컴포넌트가 맨 처음 렌더링 될 때만 콜백함수가 실행됩니다.

 

useEffect 안에 return을 쓰면?!

 

useEffect의 return 값으로 함수를 넣어주면 해당 컴포넌트가 unmount될 때, 혹은 다음 렌더링 시 불릴 useEffect가 실행되기 이전에 실행됩니다.

 

 

뭔가 'useEffect를 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋다.'라는 말이 이해가 가네요 ㅋㅎㅋ

 

전 이런 식으로 한번 써봤습니다,, ㅎ

 

---

 

 

 

 

 

여기까지 useEffect에 대해서 알아보았습니다!

개인적으로 저도 내용들을 찾아보면서 많이 공부하게 되었던 것 같아요.

 

도움이 되셨다면 좋댓구알 부탁드립니다 감사합니다! ㅎㅎㅋ

다음 기획기사에서 만나요!!