props

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

<u>**Component.defaultProps**</u> = {
	message: "기본값"
}

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

state

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

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

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

🔝 위로 가기