[React] Props 와 State

본 포스팅은 Veloprt님의 'React & Express 를 이용한 웹 어플리케이션 개발하기' 강좌를 수강하고 학습한 내용을 정리한 글입니다.

링크 : https://www.inflearn.com/course/react-%EA%B0%95%EC%A2%8C-velopert/

[무료] React & Express 를 이용한 웹 어플리케이션 개발하기 - 인프런 | 강의

---

1. Props

- 컴포넌트 내부의 Immutable Data

- JSX 내부에 {this.props.propsName}  

- 컴포넌트를 사용할때, < > 괄호 안에 propsName = "value"

- this.props.children 은 기본적으로 가지고 있는 props로 , <Cpnt> 여기에 있는 값이 들어간다. </Cpnt>

 

2. props 의 기본값 설정

- Component.defaultProps = { ... }

- 컴포넌트 선언이 끝난 후 설정한다.

class App extends React.Component {
	render() {
		return (
        	<div>{this.props.value}</div>
        );    
    };
};	

App.defaultProps = {
	value: 0
};

 

3. props 의 Type 검증

- Component.propTypes = { ... }

- 특정 type 이 아니거나, 필수 props인데 입력하지 않은 경우 개발자콘솔에서 경고를 띄우게 할 수 있다.

- 컴포넌트 선언이 끝난 후 설정한다.

class App extends React.Component {
	render() {
		return (
        	<div>
            	{this.props.value}
            	{this.props.secondValue}
                {this.props.thirdValue}
			</div>
        );    
    };
};	

App.propTypes = {
	value: React.PropType.string,
    secondValue: React.PropType.number,
    thirdValue: React.PropType.any.isRequired
};

 

 

 

1. State

-  컴포넌트에서 유동적인 데이터를 보여줄 때 사용한다.

- JSX 내부에서 { this.state.stateName }

- 초기값 설정이 필수다. 생성자(constructor) 에서 this.state = {} 으로 설정한다.

- 값을 수정할 때에는 this.setState({...}) 로 수정해야한다. 렌더링된 다음엔 this.state = 절대 사용하지 말아야 한다.