ENG
더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
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;
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]);
alert('Updated !!');
});
useEffect(() => {
alert(countClick);
}, [countClick]);
위 코드는 하나의 컴포넌트에 두 개의 useEffect()를 사용한 코드입니다. 첫 번째 코드는 컴포넌트가 변경, 업데이트 될 경우 동작하겠지만 아래 useEffect()의 경우 항상 동작하는 것이 아니라 countClick를 두 번째 인자로 사용하였기 때문에 countClick 값이 업데이트 된 경우에만 해당 콜백을 실행하게 될 것입니다.
! useEffect()를 props에도 사용하자
참고로 useEffect의 두 번째 인자 값은 [] 내부에 state 뿐만 아니라 부모로부터 전달받은 props 값 역시 사용이 가능하다는 점 알아두세요. 그렇기 때문에 부모로부터 전달받은 props의 값이 변경된 경우 컴포넌트를 업데이트 하는 코드 역시 작성이 가능합니다.
간단한 예를 들어봅니다. 만약 부모로부터 전달받은 props.siteName 값이 변하는 경우라면 아래와 같이 작성할 수 있죠.
useEffect(() => {
alert('Props Updated!');
}, [props.siteName]);
alert('Props Updated!');
}, [props.siteName]);
항상 모든 useEffect()를 동작하도록 이벤트훅을 등록할 수도 있지만 불필요한 자원 및 성능 문제가 발생할 수도 있으므로 가급적 필요한 경우의 이벤트훅만 사용하는 것이 좋을 것입니다. 즉 불필요한 이벤트를 제거하여 성능을 올리는 방안 역시 강구할 필요가 있습니다.
여기까지 useEffect()를 사용하는 다양한 방법에 대하여 알아보았습니다.
React에서 string, 텍스트, 문자열로 html 코드를 추가하는 방법
