Components / Props

📌 Components 란.

component는 React 앱을 구성하는 기본 단위로, 재사용 가능한 코드의 조각을 의미한다.

간단히 말해, 컴포넌트는 UI의 한 부분을 담당하는 자바스크립트의 클래스나 함수이다.

 

다음은 component 의 예시이다.

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

 

📌 Prop(property) 란.

Prop은 component에 전달하는 데이터로, 부모 component로부터 자식 component로 데이터를 전달할 때 사용된다.

 

간단한 예로, 'Greeting' 이라는 component가 있고, 이 component에 "name" 과 "age" 라는 prop을 통해 사용자의 이름과 나이를 전달할 수 있다. 

function Greeting(props) {
      return <h1>Hello, {props.name}! I`m {props.age} years old.</h1>;
}

그리고 이 'Greeting' component를 사용할 때는 다음과 같이 작성한다.

<Greeting name="Alice" age="21" />
<Greeting name="Brian" age="23" />