티스토리 뷰
쓰면서 이해하는 props와 state😀
Props
Immutable Data , 즉 변하지 않는 데이터이다.
상위 컴포넌트(부모)에서 하위 컴포넌트(자식)로 데이터를 넘겨줄 때 사용한다.
props는 상위 컴포넌트에서 <컴포넌트 이름 props이름="값">의 형태로 사용한다.
props를 사용하면 하위 컴포넌트에서 {this.props.props 이름}으로 작성하면 된다.
이해한 대로 적어보자면..
상위 컴포넌트가 넘겨주는 props를 자식 컴포넌트가 사용하니까 'this.props.props값'이 있는 컴포넌트가 자식 컴포넌트이다.
this.props.children❔
하위 컴포넌트로 감싸진 값이 props.children의 값으로 들어간다.
예) <하위 컴포넌트>여기 있는 값이 children이다. </하위 컴포넌트>
defaultProps를 지정할때는 컴포넌트 선언이 끝난 후 Component.defaultProps= {...}라고 선언한다.
props type을 검증할때에도 컴포넌트 선언이 끝난 후 Component.propsType= {...}라고 선언한다. props 값이 필수인지 아닌지, 지정한 타입고 맞는지 아닌지를 검증하여 지정한 type과 다르면 console에서 경고 메시지가 나오도록 할 수 있다.
// props type 검증
컴포넌트이름.propTypes = {
name: PropTypes.string, // string 타입
number: PropTypes.number.isRequired, // number 타입, 필수 값으로 지정
};
// default props 지정
컴포넌트이름.defaultProps = {
name: 'Unknown' // props를 정의하지 않았을 경우 name props의 기본 값
};State
유동적인 데이터를 사용할때 State을 사용한다.
state 는 자기 자신이 지니고 있는 데이터이다.
state는 초기값 설정이 필수이며 생성자에서 this.state = {}로 설정한다.
state 값을 수정할때는 state 값을 직접 수정하면 안 된다.(this.state = ...; ❌)
변경이 필요할때는 setState 메서드를 사용한다.
왜냐하면 state이 값이 변경될 때 변경된 부분을 감지하여 리렌더링 하는데 setState을 사용하지 않고
직접 state 값을 수정할 경우 변경된 값을 감지하지 못해 렌더링 하지 못하기 때문이다.
props와 state가 바뀌면 컴포넌트는 리렌더링 된다.
참고 사이트