React에서 render한 직후 다음 단계에서 외부 API 호출을 하기 위해 componentDidUpdate()를 사용하는 과정에서 주의할 점이 있다. setState()를 사용한 뒤 브레이크를 걸지 않으면 무한루프에 빠져 계속해서 데이터를 불러와야한다.
문제는 나처럼 작은 프로젝트를 진행하는 입장에서 백엔드와 통신 등의 과정 중 이런 현상이 생기면 백엔드 서버에 아주 큰 무리를 준다는 점이다. 그래서 특정 값이 달라졌을 경우에만 렌더가 실행되는 조건을 붙여줘야한다.
보통은 prevprops를 통해서 이를 브레이크를 건다. 다음은 componentDidUpdate의 전형적인 사용 사례.
componentDidUpdate(prevProps) {
if (this.props.userID !== prevProps.userID) {
this.fetchData(this.props.userID);
}
}
허나 이번 프로젝트에서 난 prevprops 대신 prevState를 사용해서 브레이크를 구현해봤다. 특정 버튼을 눌렀을 시 state 값이 바뀌는 것이 내용이였고, 생각외로 작동이 잘 되었다.
componentDidUpdate(_, prevState) {
fetch(`SERVER/albums/main-page`)
.then((res) => res.json())
.then((res) => {
if (prevState.albumData === this.state.albumData) {
this.setState({
albumData: res[this.state.resValue],
});
}
});
}