웹 사이트를 만들다 보면 화면에 보일 수 있는 데이터를 서버에서 받아오기도 해야 하고, state가 바뀔 때마다 함수를 실행시키거나, 이벤트 리스너를 달았다가 해제하는 등의 동작이 필요할 수 있다. useEffect hook은 바로 이럴 때 유용하게 쓸 수 있다.
- Hooks가 나오기 이전에는 함수 컴포넌트는 props 폼의 데이터를 받아오거나 렌더되는 JSX를 리턴하는 역할에 그치지 않았다. 그러나, State Hook은 함수 컴포넌트의 컴포넌트 state 폼 안에서 dynamic data를 처리할 수 있게 해주었다.
- Effect Hook은 다음과 같이 자바스크립트 코드가 실행된 후 작동한다.
- 백엔드 서버에서 데이터를 fetching 할 때- 데이터의 스트림을 subscribing 할 때
- 타이머, 인터벌을 매니징할 때
- DOM에서 변화하는 요소를 읽어낼 때
- 위와 같은 요소에서 각각의 렌더링 후 일어나는 이유는 'side effects(부수 효과)' 때문이다.
- Effect Hook이 사용되는 세가지 key moments
- 컴포넌트가 DOM에 처음으로 추가/마운트 되서 렌더링 될 때
- state/props가 바뀌어서 컴포넌트가 재렌더링될 때
- 컴포넌트가 DOM에서 지워지거나/언마운트될 때
//Class.js
import React, {Component} from 'react';
export default class PageTitle extends Component {
constructor(props) {
super(props);
this.state = {
name: ''
};
}
componentDidMount() {
document.title = this.state.name;
}
componentDidUpdate() {
document.title == `Hi, ${this.state.name}`;
}
render() {
return (
<div>
<p>Use the input field below to rename this page!</p>
<input
onChange={({target}) => this.setState({ name: target.value })}
value={this.state.name}
type='text' />
</div>
);
}
}
//Function.js
import React, {Component} from 'react';
export default class PageTitle extends Component {
constructor(props) {
super(props);
this.state = {
name: ''
};
}
componentDidMount() {
document.title = this.state.name;
}
componentDidUpdate() {
document.title == `Hi, ${this.state.name}`;
}
render() {
return (
<div>
<p>Use the input field below to rename this page!</p>
<input
onChange={({target}) => this.setState({ name: target.value })}
value={this.state.name}
type='text' />
</div>
);
}
}
- class형에서
componentDidMount()``componentDidUpdate()로 구분해서 세팅된 것이 함수형에서는useEffect()로 한번에 처리할 수 있어 효율적이다.
The Effect Hook - useEffect()
- useEffect를 react 라이브러리에서 import 한다.
import React, {useEffect} from 'react'; - Effect Hook은 우리가 안에 있는 다른 함수를 호출하기 위해 사용하기 때문에 useEffect() 함수를 호출할 때는 아무것도 리턴하지 않는다.
- useEffect() 함수에 첫번째 인자는 우리가 리액트 컴포넌트가 리턴될 때 부르고 싶은 콜백 함수다.
import React, { useState, useEffect } from 'react';
function PageTitle() {
const [name, setName] = useState('');
useEffect(() => {
document.title = `Hi, ${name}`;
});
return (
<div>
<p>Use the input field below to rename this page!</p>
<input onChange={({target}) => setName(target.value)} value={name} type='text' />
</div>
);
}- 위의 예시에서 effect는
() => { document.title = name; }가 된다.
effect안에서 현재 state는 어떻게 사용될까?
- effect가 컴포넌트가 렌더링 된 후 에 일어난다고 하더라도 함수 컴포넌트 스코프에 접근이 가능하다.
- 리액트가 컴포넌트를 렌더링하면 DOM이 업데이트 되고, 그 후 effect가 일어난다. => 처음부터 끝까지 모든 렌더링에서 발생한다.
Clean up Effects
- 이벤트 리스너를 여러개 붙일 때는 Effect를 제거해주는 것이 필요하다.
이벤트를 제거해줌으로써 불필요한 메모리가 낭비되는 것을 막을 수 있다. - clean up fuction을 설정해주지 않으면 새로운 이벤트 리스너가 컴포넌트가 재렌더링 될 때마다 DOM의 document object에 붙는다.
=> 버그를 유발하거나 퍼포먼스가 감소할 수 있다. - effect는 모든 렌더링 후에 발생하기 때문에 cleanup 함수 또한 각각의 재렌더링 때마다, 언마운팅 전에 일어난다.
- 모든 effect가 함수를 리턴하기 때문에 useEffect() Hook은 항상 cleanup function으로 인식한다. cleanup function은 선택사항이지만, 메모리 손실이 큰 코드의 경우 써주는 것이 좋다.
useEffect(()=>{
document.addEventListener('keydown', handleKeyPress);
return () => {
document.removeEventListener('keydown', handleKeyPress);
};
})Control When Effects are Called - dependency array([])
- useEffect()에서 첫번째 인자 함수가 호출될 때 컴포넌트가 렌더링 될 때마다 실행된다.
- effect가 첫번째 렌더링 이후에만 호출되기를 원한다면 두번째 인자에 빈 배열을 넣어준다. 이를 dependency array(의존성 배열)이라고 부른다.
- 빈 의존성 배열은 1) 컴포넌트가 처음 마운트될 때 effect를 불러오고, 2) 컴포넌트가 언마운트 될 떄 cleanup function이 effect에 의해 리턴될 때 호출한다.
useEffect(() => {
alert("component rendered for the first time");
return () => {
alert("component is being removed from the DOM");
};
}, []); - 위의 예시에서 빈 배열이 없다면, alerts은 컴포넌트가 렌더링 될 때마다 실행된다.
Fetch Data
- 컴포넌트에서 데이터를 받을 때도 빈 배열을 넣어주면, 첫 렌더링 이후 데이터를 fetch 할 수 있다.
- 서버로부터 응답을 불러올 때, state Hook에서 state setter를 설정해 로컬 컴포넌트에 있는 서버의 response의 데이터를 저장할 수 있다.
=> State Hook과 Effect Hook을 함께 사용하면 매 렌더링마다 불필요한 새로운 데이터를 fetching해 오는 것을 막을 수 있다.
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
// Only re-run the effect if the value stored by count changes- 빈 배열의 의존성 배열은 의존할 요소가 없기 때문에 다시 실행될 필요가 없다. 즉, effect가 바뀌지 않고 한번만 호출되면 된다는 것이다.
- 빈 배열이 아닌 의존성 배열은 의존성 배열의 변수 값이 변화하면 재실행되고, 그렇지 않으면 실행되지 않는다. 즉 변화가 일어나면 effect는 다시 호출된다.
Rules of Hooks
Hooks을 쓸 때는 두 가지의 규칙이 있다.
1) top level에 쓴다.
- React에서 Virtual DOM을 빌드할 떄, 라이브러리는 유저 인터렉션에 따라 우리가 정의한 컴포넌트를 계속해서 정의한다. React는 정의된 컴포넌트의 함수에서 Hook으로 불러온 데이터를 계속 추적한다. 이러한 이유로, Hook을 가장 위에서 호출해야 한다.
- loops, conditions, nested functions 안에 쓸 수 없다.
if (userName !== '') {
useEffect(() => {
localStorage.setItem('savedUserName', userName);
});
}
useEffect(() => {
if (userName !== '') {
localStorage.setItem('savedUserName', userName);
}
});2) React 함수형으로 쓴다.
- Hooks는 클래스형에서 쓸 수 없고, 함수형 컴포넌트에서 쓸 수 있다.
- 다른 곳에서 쓸 수 있는 유일한 경우는 custom hooks로 쓸 때다.
