함수형 컴포넌트

const MyComponent = (props) => {
	return <p>Hello! ${props.name}</p>;
}

// <MyComponent name="종박" />

props.children

const MyComponent = (props) => {
	return <p> hello! ${props.children}</p>;
}

// <MyComponent><strong>종박</strong></MyComponent>

propType을 이용한 props 검증

• 컴포넌트의 필수 props이나 props의 타입을 지정할 수 있음

state

• 컴포넌트 내부에서 바뀔 수 있는 값을 의미
• props는 부모 컴포넌트에서 하위 컴포넌트에게 내려주는 값이라면, state는 해당 컴포넌트가 관리하고 있는 상태/값을 의미
• 함수형 컴포넌트: useState 훅
• 클래스형 컴포넌트: this.setState() 함수
  • this.setState()를 호출한다고 하여 바로 값이 바뀌는 것은 아니다.
  • 만약 연속적으로 setState가 여러번 호출되어야 한다면, 인자로 updater 함수를 전달하여 prevState를 참조하여 업데이트 가능
  • https://ko.reactjs.org/docs/react-component.html#setstate

setState()는 컴포넌트를 갱신하는 데에 있어 즉각적인 명령이 아니라 요청이라고 생각하시기 바랍니다. 인지 성능(Perceived Performance)의 향상을 위하여 React는 이 메서드의 실행을 지연시키고 여러 컴포넌트를 한번에 갱신할 수도 있습니다. React는 state 변화가 즉시 적용되는 것을 보장하지 않습니다.