[ReactJS] state / props

this.state를 사용하면 Component의 render()에 데이터를 전달할 수 있습니다. 

 

this.props :

- 부모에서 전달되는 읽기 전용 데이터 (상수처럼 사용)

- 자식에서 변경 불가! 데이터 값을 변경할 수 없다

 

this.state : 

- Component의 private데이터를 저장하고(클래스 내에서만 접근 가능한) Component에 의해 변경 가능.

- state가 업데이트(변경)되면 Componenet는 스스로 렌더링 작업을 한다.

---

주의!!

state는 업데이트 되지 않는 데이터를 가지면 안된다. 

state = { 
   isHeaderHidden : false  
   title : 'welcome this stateful component'  
} 

... 

return(
    <h1>this.state.title</h1>
) 

// state변경이 없는 데이터는 state 객체에 두지 x
state = { 
   isHeaderHidden : false  
} 

... 

return(
    <h1>'welcome this stateful component'</h1>
) 

이렇게 title프로퍼티는 변하지 않는 데이터가 상태(state)를 가지면 안된다.

그냥 JSX에 작성해주면 되는데 state에 넣을 필요가 없습니다 ㅜㅜ
state는 항상 최소한의 데이터가 남았다는 확신이 들 때까지 생각하며 데이터를 지워 UI 최신화에 힘써야 합니다.

---

 

아래 코드는 빈 state 객체다.

 

당연히 아래 코드는 UI변경이 없다.

Componenet의 state는 변경이 있을 시, UI를 렌더링해 항상 최신화 해야하는데 변경할 데이터가 없다.

이벤트 핸들러에 의해 변경할 데이터는 반드시! 저장해야 합니다.

// stateful한 컴포넌트 생성
class ReactClass extends React.Component {
  // state는 컴포넌트에서 변경 가능.
  state = {
    // isHeaderHidden : false
  }
  isHeaderHidden = false

  handleClick = () => {
    // this.setState(preState => ({
    //   isHeaderHidden: !preState.isHeaderHidden
    // }))
    this.isHeaderHidden = !this.isHeaderHidden
  }

  render() {
    // const { isHeaderHidden } = this.state
 
 // if(isHeaderHidden){ 가 아니라 아래 코드로 변경
    if (this.isHeaderHidden) {
      return (
        <button className="btn btn-primary" onClick={this.handleClick}>
          create
        </button>
      )
    } else {
      return (
        <Fragment>
          <h1 style={style} className="header">
            stateful react component
          </h1>
          <button className="btn btn-primary" onClick={this.handleClick}>
            delete
          </button>
        </Fragment>
      )
    }
  }
}

const reactComponent = ReactDOM.render(
  <ReactClass />, //ReactElement : 생성된 ReactNode의 root element!
  document.getElementById('react-application') //DOMElement : 해당 트리의 DOM 노드 컨테이너
)

export default ReactClass

 정리 
state 객체( state = { ... } )에 들어 있는 Component의 state 표현은 최소한으로!
state/props의 데이터에 대해서만 render() 에서 계산합니다.

Componenet의 state가 변경되면 리액트는 그 Componenet를 다시 렌더링하는 것을 항상 기억!