useEffect

side effect

useEffect에 대해서 제대로 알기 위해선 side effect도 같이 아는 것이 좋다.
React 컴포넌트가 화면에 렌더링이 되면 비동기로 처리되어야 하는 부수적인 효과를 side effect라고 한다.
일례로, 데이터를 호출하는 경우 먼저 렌더링을 하고 데이터를 비동기로 가져오는 것이 좋다. 일단 먼저 화면에 렌더링을 하고 호출한 API의 응답이 늦어지거나 없어지는 경우 그 영향을 줄일 수 있어서라고 한다!

useEffect

useEffect는 클래스형 컴포넌트의 라이프사이클 메서드를 대체하는 내장 훅이다. 컴포넌트가 렌더링 될 때 어떠한 작업(함수 호출과 같은)을 할 수 있도록 돕는다.

함수형 컴포넌트보다 먼저 사용되던 클래스형 컴포넌트에서는 라이프사이클이 컴포넌트에 맞추어져 있어서 마운트가 되었을 때 / 마운트가된 직후 / props나 state에 따라 렌더링이 업데이트 되었을 때 / 언마운트 되었을 때, componentWillMount / componentDidMount / componentDidUpdate / componentWillUnmount(라이플사이클 메서드) 를 사용할 수 있었다.

하지만 함수형 컴포넌트에서는 데이터에 맞추어져서 라이프사이클이 진행된다. 클래스형 컴포넌트가 컴포넌트를 기준으로 한 번씩만 사용 되었다면, 이제 useEffect 훅을 통해서 데이터에 따라서 여러번 사용할 수 있게 되었다.

왜 mount라고 하나? 궁금해 허니!
컴퓨터에서 mount의 의미는 어떠한 것이 이제 이용 가능하게 되었다는 말을 나타낸다. 그러니까, React는 가상DOM이 있다. 실제 DOM에 반영하기 전에 React는 가상 DOM을 먼저 구성하고 업데이트된 부분만 실제 DOM에 반영한다. 즉 mount는 실제DOM에 변경사항이 반영이 되었다는 의미이다.(렌더링이 되었다는 의미!) 그렇다며 라이프사이클 메서드의 의미가 이제 와닿을 것이다.

componentDidMount -> 컴포넌트가 마운트 되었다.(컴포넌트가 마운트 된 시점)

useEffect 사용해보기

1) 어떠한 데이터가 업데이트 될 때마다 실행하고 싶을 때

useEffect(() => {
  console.log('change');
}, [change]);

위의 useEffect를 통해서 컴포넌트가 렌더링될 때 처음 실행되고, change가 업데이트 될 때마다 useEffect안의 함수가 실행될 것이다.

2) 최초 렌더링 되었을 때만 실행하고 싶을 때

화면에 렌더링될 때 처음에만 함수가 실행되었으면 하는 경우는 []를 비워주면 된다. 보통 API를 통해 데이터를 받아올 때 사용하게 된다.

useEffect(() => {
	axios.get("api주소")
}, []);

3) 렌더링 될 때마다 실행하고 싶을 때

useEffect(() => {
	console.log("렌더링되면 반복하기!")
});

배열의 자리를 없애주면 된다!