웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > react

react 함수형 컴포넌트 useEffect 훅 사용방법 및 예제

Last Modified : 2020-11-30 / Created : 2020-11-30
5,227
View Count

react 앱의 함수형 컴포넌트에서 useEffect()를 사용하는 방법에 대하여 알아봅니다.




# 함수형 컴포넌트 useEffect hook


리액트 컴포넌트 타입 중 함수형 컴포넌트는 클래스 컴포넌트와 달리 componentDidMount 등의 라이프사이클 함수가 존재하지 않습니다. 그 대신 다양한 useState, useEffect와 같이 다양한 이벤트 훅이 존재하는데 이 중 componentDidMount, componentDidUpdate와 비슷하게 동작하는 useEffect 훅에 대하여 알아봅니다. 

"useEffect 훅은 클래스 컴퍼넌트의 생명주기 함수인 componentDidMount, componentDidUpdate와 비슷하게 동작함"



먼저 useEffect()의 간단한 사용 문법은 아래와 같습니다.

useEffect(콜백함수, [변수])

첫 번째 인자는 컴포넌트에서 실행할 콜백을 입력합니다. 그리고 선택사항인 두 번째 인자의 경우 언제 해당 콜백을 실행해야 할 지 선택할 수 있는 값을 입력 가능합니다. 다시 말해 전체가 아닌 특정 변수의 값이 바뀌는 경우에만 해당  콜백을 실행할 수 있도록 원하는 변수 값을 선언할 수 있습니다. 예를들어 컴포넌트가 새롭게 업데이트 된다고 모든 상황에 콜백을 업데이트 할 필요는 없을 것입니다.

이 두 번째 인자의 경우 나가 아닌 여러 개 선언이 가능합니다. 그런 이유로 배열로 값을 전달하도록 합니다.


@ 여러 개 사용가능한 useEffect 훅
참고로 useEffect 훅은 하나가 아닌 여러 개를 사용할 수도 있습니다. 즉 하나의 컴포넌트에서 여러 개의 useEffect 훅을 사용할 수 있다는 뜻입니다. 예를들어 전체 컴포넌트에 실행하는 콜백함수와 특정 값 변경시에만 실행할 콜백함수를 따로 나누어 선언할 수 있죠.


! useEffect 훅 예제보기


아래에 간단한 예제를 만들어 봅니다. 아래 예제는 클릭할 때 마다 현재 클릭 한 횟수의 값을 alert창에 띄워 보여주는 예제useEffect()를 사용합니다. 먼저 작성된 코드를 살펴보겠습니다.
const myButton = () => {
  const [countClick, setCount] = useState(0);

  useEffect(() => {
    alert(countClick);
  });

  const showClickNo = () => {
    setCount(countClick + 1);
  };

  return (
    <button onClick={ showClickNo }>
      Click Me
    </button>
  )
};

export default myButton;

위 코드를 살펴보면 클릭시 showClickNo() 함수를 호출하고 이 함수는 변수 countClick의 값에 1을 더하게 됩니다. 즉 이 경우 상태값이 업데이트되므로 alert을 출력하는 useEffect()를 호출하게 되는 것입니다.
useEffect(() => { alert(countClick); });

이처럼 원하는 콜백함수를 컴포넌트 업데이트 시점에 실행할 수 있게해주므로 클래스형 컴포넌트의 componentDidMount 또는 componentDidUpdate와 동일한 라이프사이클 함수처럼 동작할 수 있게 할 수 있습니다.


! useEffect() 특정 변수 값에만 동작하기


앞서 얘기한 것처럼 특정 값이 업데이트 된 경우에만 useEffect()를 실행하도록 할 수 있다고 했습니다. 만약 아래와 같이 두 개의 useEffect()가 선언된 경우를 생각해보죠.
useEffect(() => {
  alert('Updated !!');
});

useEffect(() => {
  alert(countClick);
}, [countClick]);

위 코드는 하나의 컴포넌트에 두 개의 useEffect()를 사용한 코드입니다. 첫 번째 코드는 컴포넌트가 변경, 업데이트 될 경우 동작하겠지만 아래 useEffect()의 경우 항상 동작하는 것이 아니라 countClick를 두 번째 인자로 사용하였기 때문에 countClick 값이 업데이트 된 경우에만 해당 콜백을 실행하게 될 것입니다.


! useEffect()를 props에도 사용하자

참고로 useEffect의 두 번째 인자 값은 [] 내부에 state 뿐만 아니라 부모로부터 전달받은 props 값 역시 사용이 가능하다는 점 알아두세요. 그렇기 때문에 부모로부터 전달받은 props의 값이 변경된 경우 컴포넌트를 업데이트 하는 코드 역시 작성이 가능합니다.


간단한 예를 들어봅니다. 만약 부모로부터 전달받은 props.siteName 값이 변하는 경우라면 아래와 같이 작성할 수 있죠.
useEffect(() => {
  alert('Props Updated!');
}, [props.siteName]);

항상 모든 useEffect()를 동작하도록 이벤트훅을 등록할 수도 있지만 불필요한 자원 및 성능 문제가 발생할 수도 있으므로 가급적 필요한 경우의 이벤트훅만 사용하는 것이 좋을 것입니다. 즉 불필요한 이벤트를 제거하여 성능을 올리는 방안 역시 강구할 필요가 있습니다.

여기까지 useEffect()를 사용하는 다양한 방법에 대하여 알아보았습니다.

Previous

React에서 string, 텍스트, 문자열로 html 코드를 추가하는 방법

Previous

antd table 컴포넌트 페이지네이션 삭제하기