[React] State와 Props

 

리액트의 컴포넌트가 가질 수 있는 데이터로는 State와  Props가 있다. State는 컴포넌트 내부에서 값이 지정되고, Props는 자식 컴포넌트가 외부의 부모 컴포넌트에게 전달받는 값이다. 

 

State 작성 방법 (생성자 작성 방법), State 변경 방법

constructor(props) {
	super(props);
    this.state = {
    	value:0
    };
}

State는 컴포넌트 안의 생성자 부분에서 초기값을 지정하는 방식으로 작성한다. props는 굳이 생성자에 작성해주지 않아도 this.props.propsName으로 부모가 전달해준 값을 받을 수 있기 때문에 생성자에서 props 정의 부분은 생략하고 랜더 함수 위에 간단히 this.state = { } 혹은 state = { }로 작성하여 state를 지정한다. 

 

  handleIncrement = () => {
        this.setState({count: this.state.count+1}); 
        //  반드시 this.setState 함수로 수정
        // ("this.state ~ ="로 선언할 수 있는 곳은 오직 생성자 함수 내부)
    }

 

랜더 이후 값을 수정할 때는 this.setState 함수를 이용하여 값을 변경한다. this.state...로 수정한 후 강제로 리랜더링을 하는 방법도 있으나 이런 방법을 사용할 경우 리액트의 장점인 '바뀐 부분만 업데이트'를 사용하지 않는 것이 되고, 성능에도 좋지 않다. setState 함수를 사용하여 state를 변경하면 리액트가 지정한 안정적인 프로세스를 통하여 값을 변경할 수 있다.

 

Props 작성 방법 

// 부모 컴포넌트에서 Props 지정
render() {
	return (
		<Component 
            	value="1", 
                secondValue=2, 
                thirdValue=3 />
	       );
	}

// 자식 컴포넌트에서 조회 (Read Only)
render() {
	return (
			<div>{this.props.value}</div>	
			<div>{this.props.secondValue}</div>	
			<div>{this.props.thirdValue}</div>	
	       );
	}

 

Props는 부모 컴포넌트의 랜더 함수 안에서 HTML태그에 속성값을 부여하는 형식으로 작성한다. Props는 자식 컴포넌트에서 수정할 수 없고, 객체의 형태로 전달받아 조회만 가능하다. 

 

(...자식 컴포넌트의 랜더 함수 하단 영역)

// Props 타입 지정 및 검증 - 타입에 맞지 않을 경우 개발자 도구에서 에러 메세지 노출
Component.propTypes = {
	value:React.PropTypes.string //문자열
    secondValue:React.PropType.number.isRequired //숫자, 꼭 입력해야함
    thirdValue:React.PropTypes.any.isRequired //타입 지정 x, 꼭 입력해야함
};

// Props 기본값 설정
Component.defaultProps = {
	value:'UnKnown'
};

 

State와는 달리 기본값 설정이 필수는 아니지만, 컴포넌트를 만드는 개발자가 해당 컴포넌트를 사용할 때 동료 개발자에게 이 컴포넌트가 어떤 props를 필요로 하고, 어떤 타입이어야 하는지 알려주기 위해서 알려주기 위해서 작성한다.