컴포넌트
- 화면에서 UI 요소를 구분할 때 사용하는 단위
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);- javaScript 함수 작성 = 컴포넌트 정의
- 엘리먼트로 root.render()를 호출
- React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출
- Welcome 컴포넌트는 결과적으로
<h1>Hello, Sara</h1>엘리먼트를 반환 - React DOM은
<h1>Hello, Sara</h1>엘리먼트와 일치하도록 DOM을 효율적으로 업데이트 - 컴포넌트 이름은 항상 대문자
- 소문자로 시작하는 컴포넌트는 DOM 태그로 처리
- 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 함
- 클래스형 컴포넌트에 비해 함수형 컴포넌트가 비교적 메모리 자원을 적게 사용
Property(Props)
- 부모 컴포넌트에서 자식 컴포넌트에 전달되는 데이터
- 어떤 값을 컴포넌트에게 전달해야 할 때 props 사용
- 프로퍼티 값은 자식 컴포넌트에서 수정할 수 없음
State
- 컴포넌트의 상태를 저장하고 수정 가능한 데이터
Context
- 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에게 전달하는 데이터
참고
🍄🧑🌾