[React] State와 Props

이승혜·2021년 8월 18일

REACT

목록 보기

2/4

setState

setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행한다
state가 변경되면, 컴포넌트는 리렌더링 된다

state와 props의 차이점

props와 state는 일반 JavaScript 객체이다
두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다

Changing props and state

	props	state
상위 구성 요소에서 초깃값을 가져올 수 있는가?	YES	YES
상위 컴포넌트로부터 변경할 수 있는가?	YES	NO
Component 내에서 기본값을 설정할 수 있는가?	YES	YES
Component 내부에서 변경할 수 있는가?	NO	YES
자식 컴포넌트의 초기값을 설정할 수 있는가?	YES	YES
자식 컴포넌트 내에서 변경할 수 있는가?	YES	NO

props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다
자식 컴포넌트에서는 props를 받아오기만 하고, 받아온 props를 직접 수정할 수는 없다
반면 state는 컴포넌트 내부에서 선언하며, 내부에서 값을 변경할 수 있다

setState가 잘못된 값을 주는 이유

React에서 this.props와 this.state 는 모두 렌더링 된 값을 나타낸다
다시 말해 현재 화면에 보이는 것을 말한다

incrementCount() {
  // 주의: 이 코드는 예상대로 동작하지 *않을 것*입니다.
  this.setState({count: this.state.count + 1});
}

handleSomething() {
  // `this.state.count`가 0에서 시작한다고 해봅시다.
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();
  // React가 컴포넌트를 리렌더링할 때 `this.state.count`는 3이 될 것 같은 예상과 달리 1이 됩니다.

  // 이것은 `incrementCount()` 함수가 `this.state.count`에서 값을 읽어 오는데
  // React는 컴포넌트가 리렌더링될 때까지 `this.state.count`를 갱신하지 않기 때문입니다.
  // 그러므로 `incrementCount()`는 매번 `this.state.count`의 값을 0으로 읽은 뒤에 이 값을 1로 설정합니다.
}

setState호출은 비동기적으로 이뤄진다 따라서 setState호출 직후 새로운 값이 this.state에 반영될 거라고 믿어서는 안 된다
만약 이전 state값을 기준으로 값을 계산해야 한다면 객체 대신 updater 함수를 전달하자

incrementCount() {
  this.setState((state) => {
    // 중요: 값을 업데이트할 때 `this.state` 대신 `state` 값을 읽어옵니다.
    return {count: state.count + 1}
  });
}

handleSomething() {
  // `this.state.count`가 0에서 시작한다고 해봅시다.
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();

  // 지금 `this.state.count` 값을 읽어 보면 이 값은 여전히 0일 것입니다.
  // 하지만 React가 컴포넌트를 리렌더링하게 되면 이 값은 3이 됩니다.
}

💁‍♀️출처

이승혜

더 높이

이전 포스트

[React] 가볍게 살펴보기

다음 포스트