[React] 4장. props와 state

15 Jan 2021

reactjs

React.js 기초 다지기

4. props와 state

props란?

A React component should use props to store information that can be changed, but can only be changed by a different component.

A React component should use state to store information that the component itself can change.

props : 컴포넌트 내부에 전달하는 데이터!
- 컴포넌트에서 다른 컴포넌트로 데이터를 전달할 때 사용하나 봄…
- { this.props.propsName } : 이런 식으로 써주면 됨.
- propsName="value" : 나중에 컴포넌트에 값을 전달해 줄 때는 이렇게.
- Component.defaultProps = { 내부 아이템들 } : 기본 값은 이렇게 설정함.
- Component.propTypes = { 내부에 설정해 줌 } : props 타입을 설정할 땐 컴포넌트 클래스를 먼저 선언한 뒤에 이렇게 설정함.
- props에 이벤트 핸들러를 추가할 수도 있다!
  - 컴포넌트 클래스에 메소드로 이벤트 핸들러를 추가해 두고, return() 안에 onClick, onHover 등등을 붙인 담에 해당 메소드를 대입!
  - 이름 짓는 방법 (컨벤션)
    - 이벤트 핸들러의 경우 어떤 이벤트를 처리하는지 중점을 두고 만든다.
      
      (Ex. handleClick, handleKeyPress…)
    - props 이름의 경우에도 처리할 이벤트에 중점을 둔다!
      
      (Ex. onClick, onKeyPress…)
- { this.props.children }
  - 이런 컴포넌트의 사이에 들어가는 자식 엘리먼트들이 들어감.
  - 여러 개일 경우 배열로 리턴하고, 하나일 경우 배열이 아니라 하나의 오브젝트(?)만 리턴한다.
propTypes : props의 타입을 지정하는 ‘객체’. 함수가 아님!
- props 리스팅이나 유효성 검사 등등 좋은 점이 많아서 쓰는 걸 추천한다고 함…
- 사용하는 방법
```
  컴포넌트클래스이름.propTypes = {
  	React.PropTypes.expected-data-type-goes-here
  }; 
```
- string, object, bool, number, func, array 등등 …
- 마지막에 isRequired 이거 붙여주면 안쓰면 콘솔에 경고 뜸.
- stateless functional component에도 propTypes 붙일 수 있음! 똑같음!

state란?

state : 유동적인 데이터를 다룰 때 사용한다.
- props와 다르게 바깥에서 값을 전달 받는 게 아니라, 내부에서 정해진다.
- 초기값을 꼭 설정해줘야 한다. 생성자에서 this.state = {}이런 식으로 꼭 설정해줘야 함!
```
constructor(props){
  super(props);
  this.state = {title: 'Best App'}
}
```
  - 이벤트 핸들러를 this를 통해 선언할 경우,
    
    생성자에 this.methodName = this.methodName.bind(this) 이 구문을 추가해줘야 한다고 함.
    
    ~~이유는 좀 더 공부해봐야 할 듯…~~
- 내용을 읽어야 할 때는 this.state.name-of-property와 같이 써준다.
- 초기값을 설정한 이후, 렌더링이 된 후 값을 바꿀 때는 this.setState({ ... }) 이렇게 써주고,
  
  주의할 점으로, 렌더링이 된 후에는 this.state = 이런 식으로 state를 수정하면 안된다.
- setState를 통해 state 값을 바꿔주면 자동으로 render 해준다.

React.js 기초 다지기

목차

4. props와 state

props란?

state란?