[React] props의 원리

Props는 속성을 나타내는 데이터로 객체 인자를 받은 후 React 엘리먼트를 반환한다. 이러한 컴포넌트는 JS함수이기 때문에 함수 컴포넌트를 정의할 수 있다.

 

React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있다.

const element = <Welcome name="Sara" />;

 

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달하는데, 이 객체가 바로 props다. 아래의 예시를 보자.

 

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);

페이지에 "Hello, Sara"를 렌더링 하는 예시이다. 이 곳에서는 다음과 같은 일이 일어난다.

i) <Welcome name="Sara" /> 엘리먼트로 root.render()를 호출합니다.
ii) React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출합니다.
iii) Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환합니다.
iv) React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트합니다.

 

 

다음 예시는 컴포넌트 추출이다.

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

 

1) 아바타를 추출해서 이렇게 만들 수 있다.

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

 

2) UserInfo를 추출할 수 있다.

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

 

3) 코멘트를 추출한 모습이다.

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

 

 

마지막으로 중요한 원칙이 있는데 props는 읽기전용이라는 것이다. 컴포넌트 자체 props를 수정해서는 안 되며, 순수함수라고 호칭한다. 입력값을 바꾸려하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하기 때문이다.

 

모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.

 

 

 

props를 쓰는 방법을 정리하면 다음과 같다.

 

1) 재사용이 필요한 컴포넌트를 정의한다.

2) 부모 컴포넌트에서 어트리뷰트를 정의한다.

3) 그 어트리뷰트를 자식컴포넌트에 프롭스로 넘겨준다.

 

항상 프롭스로 코드짜는 것이 약간 헷갈리곤 했는데 이번 기회에 확실히 정립해서 쉽게 활용해야겠다는 생각이 들었다.

 

 

출처 https://ko.legacy.reactjs.org/docs/components-and-props.html

Components와 Props – React