[TIL] React 초급: 복습

9. 복습

props와 state의 차이점

• props
  • 읽기 전용(read-only)
  • 컴포넌트 외부에서 컴포넌트의 속성을 조작할 수 있는 정보
• state
  • 컴포넌트 내부에서 사용되는 정보
  • 값을 바꿀 수 있다

상위 컴포넌트의 속성을 조작할 때와 하위 컴포넌트의 속성을 조작할 때 차이점

• 상위 컴포넌트에서 하위 컴포넌트의 속성을 조작할 때

  • props로 속성값을 전달하여 조작 가능

• 하위 컴포넌트에서 상위 컴포넌트의 속성을 조작할 때

  • 리액트는 하향식(top-down) 단방향 데이터 흐름을 갖고 있으므로 하위 컴포넌트에서 상위 컴포넌트로 props 전달을 통한 속성 조작 불가

  • 이벤트 동작을 통해 상위 컴포넌트의 state를 조작하는 것은 가능

    <TOC
        onChangePage={function(id) {
            this.setState({
                mode: 'read',
                selected_content_id: Number(id)
            })
        }.bind(this)} data={this.state.contents}>
    </TOC>
    // App 컴포넌트 안에 TOC 컴포넌트에서 이벤트 동작을 통해 setState로 App 컴포넌트의 속성(state)을 변경할 수 있다.