props

// props (부모로부터 물려 받는 속성)
// 1. 함수 컴포넌트
function Component(**props**) {
    return (<h1>{**props.message**}</h1>)
  }
// 2. 클래스 컴포넌트
class Component extends React.Component {
	render() {
		return (
			<div>
				<h1>{**this.props.message**}
			</div>
		)
	}
}

**Component.defaultProps** = {
	message: "기본값"
}

• 자식 컴포넌트를 내 입맛대로 사용하기 위한 데이터(함수도 포함된다)
• class 컴포넌트에는 props 에 this가 앞에 붙지만 함수 컴포넌트에는 this가 붙지 않는다.
• Component.defaultProps 을 통해 props의 기본값을 설정할 수 있다.
• props 값을 자식 컴포넌트에서 바꾸면 안된다.

state

class Component extends React.Component {
    // state 정의 첫 번째 방식
		**state** = {
      count: 0
    }
		// state 정의 두 번째 방식 (생성자 내부에서)
		constructor(props) {
			super(props)
			**this.state** = { count: 0 }

    render() {
      return (
        <p>{**this.state.count**}</p>
      )
    }
		
		// setState 정의 첫 번째 방식 (객체를 인수로)
		**this.setState**({
      count: this.state.count + 1
    })
		// setState 정의 두 번째 방식 (콜백 함수)
		**this.setState**((prevState) => {
			const newState = { count: prevState.count + 1 }
			return newState
		})
}

• 변경될 수 있는 정보를 담고 있는 변수
• this.state.count 와 같이 데이터에 접근할 수 있다.
• state는 항상 객체 형식으로 작성되어야 한다.
• state 의 데이터 값을 변경하기 위해선 this.setState() 내부에서 바꿔야지만 React.render() 함수를 다시 호출한다.

🔝 위로 가기