Props/State

Props & state

• React에서 다루는 데이터의 개념.
• 동일한 데이터라고 하더라도 데이터를 생성한 컴포넌트는 그 데이터를 state라고 하지만 그 데이터를 전달 받은 컴포넌트는 props로 본다?

class Square extends React.Component {
  constructor(props) {
    super(props); // 서브클래스의 생성자를 정의 시 super() 명시적으로 호출 필요
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button className="square" onClick={() => this.setState({value: this.props.value})}>
        {this.state.value}
      </button>
    );
  }
}

props

• 부모 컴포넌트로부터 전달받은 데이터.
• state 뿐만 아니라 메서드도 전달 가능하다고 한다.

state

• 현재 컴포넌트에서 생성, 변할 수 있는 데이터.
• state는 오직 state가 생성된 컴포넌트 내에서만 변경이 가능하다.
• class 내부에 state라는 프로퍼티를 하나 생성하여 사용할 수 있다.
• 여러 하위 컴포넌트로부터 데이터를 모으거나, 여러 하위 컴포넌트들이 통신하기를 원한다면 데이터를 상위 컴포넌트의 state로 이동시킨다. 그러면 props를 통해 하위 컴포넌트로 state를 전달해주므로, 동기될 수 있다.

props, state 관련 출처: https://ljh86029926.gitbook.io/coding-apple-react/1/props-and-state

React Hook

useState

function Example() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}></button>
  );
}

• 함수 컴포넌트 안에서 React State를 사용할 수 있게 해준다.
• 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같다.
• useState()의 parameter 값은 state 값의 초기 값이다.
• useState()는 state 변수와 해당 변수를 갱신할 수 있는 함수(set) 쌍을 반환한다.

출처 https://ko.reactjs.org/docs/hooks-intro.html

---

불변성

state의 데이터를 직접 변경하지 않는 이유

• 변수의 값을 직접 변경하지 않고, 해당 변수의 값을 복사한 후 변경하여 데이터를 대체한다.
• 실제 데이터를 직접 변경하여도 결과적으로는 다를 게 없다.
• 하지만 컴포넌트, 전체 애플리케이션의 성능을 향상시킬 수 있다.

React에서 언제 다시 렌더링할지 결정하기

• 불변성의 가장 큰 장점 중 하나로, 간단한 순수 컴포넌트들이 다시 렌더링될 때를 결정하기가 쉬워진다?
• shouldComponentUpdate()에 대해 더 알아볼 것.

읽어보기 shouldcomponentupdate-in-action

---