[React 공식문서 공부하기] - Components와 Props

Lee Jeong Min·2022년 1월 3일

React 개인공부

React 공식문서 공부

목록 보기

4/5

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. 이 페이지에서는 컴포넌트의 개념에 대해 소개한다.

개념적으로 컴포넌트는 JS의 함수와 유사하다. "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

함수 컴포넌트와 클래스 컴포넌트

컴포넌트를 정의하는 가장 간단한 방법은 JS함수를 작성하는 것이다.

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

이 함수는 데이터를 가진 하나의 "props" 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다. 이러한 컴포넌트는 JS 함수이기 때문에 말 그대로 "함수 컴포넌트"라고 호칭한다.

또한 ES6 class를 사용하여 컴포넌트를 정의할 수 있다.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}

React의 관점에서 볼 때 두 가지 유형의 컴포넌트는 동일하다.

class는 몇 가지 추가 기능이 있으며 이에 대해서는 다음 장에서 설명한다.

컴포넌트 렌더링

전까지는 DOM 태그만 사용해 React 엘리먼트를 나타냈다.

const element = <div />;

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

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

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 props라고 한다.

이 예시는 "Hello, Sara"를 렌더링하는 예시이다.

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

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

이 예시는 다음과 같은 순서로 렌더링 된다.

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

컴포넌트의 이름은 항상 대문자로 시작한다.

컴포넌트 합성

컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있다. 이는 모든 세부 단계에서 동일한 추상 컴포넌트를 사용할 수 있음을 의미한다. React앱에서는 버튼 폼, 다이얼로그, 화면 등의 모든 것들이 흔히 컴포넌트로 표현된다.

예를 들어 Welcome을 여러번 렌더링 하는 App 컴포넌트를 만들 수 있다.

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

function App()	{
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.rendeR(<App />, document.getElementById('root'));

일반적으로 새 React 앱은 최상위 단일 App 컴포넌트를 가지고 있다.

컴포넌트 추출

컴포넌트를 여러 개의 작은 컴포넌트로 나누기

다음 Comment 컴포넌트를 살펴보자.

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> 
  )
}

이 컴포넌트는 author (객체) text (문자열) 및 date (날짜)를 props로 받은 후 소셜 미디어 웹 사이트의 코멘트를 나타낸다.

이 컴포넌트는 구성요소들이 모두 중첩 구조로 이루어져 있어서 변경하기 어려울 수 있으며, 각 구성 요소를 개별적으로 재사용하기도 힘들다. 이 컴포넌트에서 몇 가지 컴포넌트를 추출해보자.

먼저 Avatar 이다.

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

Avatar 는 자신이 Comment 내에서 렌더링 된다는 것을 알 필요가 없다. 따라서 props의 이름을 author 에서 더욱 일반화된 user로 변경하였다.

props의 이름은 사용될 context가 아닌 컴포넌트 자체의 관점에서 짓는 것을 권장한다.

이제 Commnet 가 아래와 같이 변경된다.

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <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>
  );
}

다음으로 Avatar 옆에 사용자 이름을 렌더링하는 UserInfo 컴포넌트를 추출해보자.

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

Comment 가 더욱 단순해졌다.

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>
  );
}

처음에는 컴포넌트 추출 작업이 지루해 보일 수 있지만 재사용 컴포넌트를 만들어 놓는 것은 더 큰 애플리케이션에서 작업할 때 효과를 발휘한다. UI 일부가 여러 번 사용되거나 (Button, Panel, Avatar), UI 일부가 자체적으로 복잡한 (App, FeedStory, Comment) 경우에도 별도의 컴포넌트로 만드는 게 좋다.

props는 읽기 전용이다.

함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다. 다음 sum 함수를 살펴보자.

function sum(a, b) {
  return a + b;
}

이런 함수들을 순수 함수라고 호칭한다. 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하기 때문이다.

반면에 다음 함수는 자신의 입력값을 변경하기 때문에 순수 함수가 아니다.

function withdraw(account, amount) {
  account.total -= amount;
}

React는 매우 유연하지만 한 가지 엄격한 규칙이 있다.

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

다음 장에선 "state"라는 새로운 개념을 소개하는데, React는 이를 사용하여 위 규칙을 위반하지 않고 사용자 액션, 네트워크 응답 및 다른 요소에 대한 응답으로 시간에 따라 자신의 출력값을 변경할 수 있다.

참고사이트

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

Lee Jeong Min

It is possible for ordinary people to choose to be extraordinary.

이전 포스트

[React 공식문서 공부하기] - 엘리먼트 렌더링

다음 포스트

[React 공식문서 공부하기] - Components와 Props