function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);- React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 “props”라고 한다.
- props는 “읽기전용” 이다.
- 모든 React 컴포넌트는, 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.
💡 주의: 컴포넌트의 이름은 항상 대문자로 시작합니다.
React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리합니다. 예를 들어
는 HTML div 태그를 나타내지만, < Welcome />은 컴포넌트를 나타내며 범위 안에 Welcome이 있어야 합니다.
- 컴포넌트는 합성 / 추출이 가능하므로 컴포넌트를 작은 컴포넌트들로 세분화하기 수월하다.
- 컴포넌트의 재사용성을 충분히 높이기 위해 노력하자. = 완전히 같은 코드가 반복되는 것을 지양하자.
함께 일하고싶은 개발자로 기억될래요