React 컴포넌트 - State, Props

상태(State)

상태(State)는 컴포넌트의 상태를 나타내며, 변화할 수 있는 데이터의 집합

• 상태는 직접 변경할 수 있다.
• 상태가 변경되면 컴포넌트를 다시 렌더링한다.
• 상태는 외부에 비공개하며, 컴포넌트가 스스로 관리해야 한다.

상태는 this.state.xxx를 직접 변경하지 않고 this.setState()를 통해 값을 변경하며,

값이 변경되는 아래 메서드가 자동으로 호출된다.

• shouldComponentUpdate(nextProps, nextState)
• componentWillUpdate()
• render()
• componentDidUpdate()

 

프로퍼티 (props)

프로퍼티는 외부에서 컴포넌트와 소통하는 창구 역할

• 프로퍼티는 읽기 전용이다.
• 프로퍼티는 부모 요소에서 설정하는 것이다.
• 소기값과 자료형의 유효형 검사가 가능하다.

프로퍼티는 외부(부모 요소)에서 변경하며, 아래 메소드가 자동으로 호출된다.

• componentWillReceiveProps(nextProps)
• 상태(state) 변경 시 발생하는 메서드 자동 호출

 

내용 정리

• 컴포넌트를 만들때는 상태, 프로퍼티, 이벤트를 구분해서 사용해야 한다.
• 컴포넌트 상태(State) 변경 코드 작성 시, 화면 출력을 위한 render() 메서드를 정의한다.
• 컴포넌트 프로퍼티(props)는 읽기 전용으로 사용한다. 컴포넌트 내부에서 변경하지 않아야 한다.