👉 컴포넌트(Component)는 UI를 구성하는 조각(piece)에 해당되며, 독립적으로 분리되어 재사용을 됨을 목적으로 사용된다. React 앱에서 컴포넌트는 개별적인 JavaScript 파일로 분리되어 관리한다.
👉 React 컴포넌트는 개념상 JavaScript 함수와 유사하다. 컴포넌트 외부로부터 속성(props)을 전달 받아 어떻게 UI를 구성해야 할지 설정하여 React 요소(JSX를 Babel이 변환 처리)로 반환한다. 이러한 문법 구문을 사용하는 컴포넌트를 React는 '함수형(functional)'으로 분류한다.
function BaseButton(props) {
return (
<button type={props.type || 'button'} className="base-button">
{props.children}
</button>
)
}
export default BaseButton
👉 ES6 부터 지원되는 클래스 문법을 사용해 컴포넌트를 정의할 수도 있다. 클래스 문법을 사용하면 아래와 같이 작성할 수 있다.
class BaseButton extends Component {
render() {
const { type, chilren } = this.props
return (
<button type={type} className="base-button">
{chilren}
</button>
)
}
}
export default BaseButton
👉 React 세계관에서 함수형과 클래스 컴포넌트 유사하다. 하지만 함수형 컴포넌트에 없는 기능을 추가적으로 클래스형 컴포넌트에서 사용할 수 있다.
📄 Function Component
this 키워드 사용 불가능
📄 Class Component
this 키워드 사용 가능, 상태(state) 및 라이플 사이클(LifeCycle) 훅 (hoop)설정 가능.
👉 컴포넌트에 설정된 임의의 JSX 속성(type, children 등)은 React에 의해 컴포넌트에 속성(props) 객체로 전달한다.
👉 전달된 전달된 값은 props 객체의 각 속성으로 설정된다.
👉 전달된 컴포넌트 속성 객체 props는 컴포넌트 내부에서 컴파일에 활용된다.
📌컴포넌트에 전달된 속성(props) 객체는 읽기 전용(readonly)이다. 다시 말해 전달 받은 속성 값을 수정하면 안된다는 말이다. 전달 받은 속성 값을 수정하는 대신 컴포넌트 상태(state)를 활용해야 한다.