01.props-in-initial-state.md

초기 상태의 Props[Props in Initial State]

내용:

props를 사용하여 getInitialState에서 상태를 생성하면 종종 "source of truth", 즉 실제 데이터가있는 위치가 중복됩니다. getInitialState는 컴포넌트가 처음 생성 될 때만 호출되기 때문입니다.

구성 요소가 '새로 고침'되지 않고 구성 요소의 소품이 변경되면 생성자 함수 (또는 getInitialState)가 구성 요소의 현재 상태를 업데이트하지 않기 때문에 새 prop 값이 표시되지 않아 위험합니다.

props의 상태 초기화는 컴포넌트가 처음 생성 될 때만 실행됩니다.

나쁜 예

class SampleComponent extends Component {
  // constructor function (or getInitialState)
  constructor(props) {
    super(props);
    this.state = {
      flag: false,
      inputVal: props.inputValue,
    };
  }

  render() {
    return <div>{this.state.inputVal && <AnotherComponent />}</div>;
  }
}

좋은 예

class SampleComponent extends Component {
  // constructor function (or getInitialState)
  constructor(props) {
    super(props);
    this.state = {
      flag: false,
    };
  }

  render() {
    return <div>{this.props.inputValue && <AnotherComponent />}</div>;
  }
}

Related links:

• React Anti-Patterns: Props in Initial State
• Why is passing the component initial state a prop an anti-pattern?