-
React 컴포넌트 - State, Props카테고리 없음 2019. 6. 16. 10:10
상태(State)
상태(State)는 컴포넌트의 상태를 나타내며, 변화할 수 있는 데이터의 집합
- 상태는 직접 변경할 수 있다.
- 상태가 변경되면 컴포넌트를 다시 렌더링한다.
- 상태는 외부에 비공개하며, 컴포넌트가 스스로 관리해야 한다.
상태는 this.state.xxx를 직접 변경하지 않고 this.setState()를 통해 값을 변경하며,
값이 변경되는 아래 메서드가 자동으로 호출된다.
- shouldComponentUpdate(nextProps, nextState)
- componentWillUpdate()
- render()
- componentDidUpdate()
프로퍼티 (props)
프로퍼티는 외부에서 컴포넌트와 소통하는 창구 역할
- 프로퍼티는 읽기 전용이다.
- 프로퍼티는 부모 요소에서 설정하는 것이다.
- 소기값과 자료형의 유효형 검사가 가능하다.
프로퍼티는 외부(부모 요소)에서 변경하며, 아래 메소드가 자동으로 호출된다.
- componentWillReceiveProps(nextProps)
- 상태(state) 변경 시 발생하는 메서드 자동 호출
내용 정리
- 컴포넌트를 만들때는 상태, 프로퍼티, 이벤트를 구분해서 사용해야 한다.
- 컴포넌트 상태(State) 변경 코드 작성 시, 화면 출력을 위한 render() 메서드를 정의한다.
- 컴포넌트 프로퍼티(props)는 읽기 전용으로 사용한다. 컴포넌트 내부에서 변경하지 않아야 한다.