[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에 대해서 알아보았습니다!
개인적으로 저도 내용들을 찾아보면서 많이 공부하게 되었던 것 같아요.
도움이 되셨다면 좋댓구알 부탁드립니다 감사합니다! ㅎㅎㅋ
다음 기획기사에서 만나요!!
