setState() 이해하기

minkyung·2022년 5월 24일
0

react

목록 보기
2/5
post-thumbnail

📎 ko.reactjs.org (#setstate)

state를 변경하기 위한 함수,
사용자가 컴포넌트 내에서 직접 호출할 수 있는 2개 메서드 중 하나

setState(updater,[callback])

근데 비동기로 작동됨
setState()는 컴포넌트를 항상 즉각적으로 갱신하지는 않습니다. 오히려 여러 변경 사항과 함께 일괄적으로 갱신하거나, 나중으로 미룰 수도 있습니다. 이로 인하여 setState()를 호출하자마자 this.state에 접근하는 것이 잠재적인 문제가 될 수 있습니다. 그 대신에 componentDidUpdate 또는 setState의 콜백(setState(updater, callback))을 사용하세요.

생성자는 this.state를 직접 할당할 수 있는 유일한 곳입니다. 그 외의 메서드에서는 this.setState()를 사용해야 합니다.

❗️ state에 props를 복사하면 안 됩니다! 가장 흔히 범하는 실수 중 하나입니다.

constructor(props) {
 super(props);
 // 이렇게 하지 마세요!
 this.state = { color: props.color };
}

📎 setState가 연속적으로 쓰일 때 무슨 문제가 있는지, 어떻게 해결해야하는지

profile
프론트엔드 개발자

0개의 댓글