react - 5. 상태와 프로퍼티

책 "모던 자바스크립트 개발자를 위한 리액트 프로그래밍" 의 내용을 복습 차원 에서 정리한 내용입니다.

state(상태)

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

상태가 변화 하면 컴포넌트를 다시 랜더링 한다.

컴포넌트의 상태를 나타내는 값은 "리스트에서 선택한 값", "체크박스에서 값이 체크됬는지 여부", " 텍스트박스의 텍스트" 등이다.

상태는 직접 변경 할 수 있다.

상태는 외부에는 비공개 이며, 컴포넌트 스스로가 관리해야 하는 것

상태를 변경 할 때는 this.setState()를 통해 값을 변경 한다.

상태가 변화 하면 다음과 같은 메서드가 자동 호출 된다.

shouldComponentUpdate(nextProps, nextState)

componentWillUpdate()

render()

componentDidUpdate()

props(프로퍼티)

외부에서 컴포넌트와 소통하는 창구 역할.

프로퍼티는 읽기 전용

프로퍼티는 부모 요소에서 설정 하는 것

초기값과 자료형의 유효성 검사가 가능하다

프로퍼티는 외부(부모요소)에서 변경하며, 이때 다음과 같은 메서드가 자동적으로 호출 된다.

componentWillReceive(nextProps)

일반적으로 프로퍼티 변경은 컴포넌트 상태 변경을 함께  발생 시키게 된다.

따라서 위에 메서드 내부에서 setState() 메서드로 상태를 변경하면, 다음과 같은 메서드들이 함께 호출 된다.

shouldComponentUpdate(nextProps, nextState)

componentWillUpdate()

render()

componentDidUpdate()