[React] Components와 Props

Components와 Props

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있음
이 페이지에서는 컴포넌트의 개념을 소개할 것임
👉 자세한 컴포넌트 API 레퍼런스는 여기에서 확인

개념적으로 컴포넌트는 JavaScript 함수와 유사함

“props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환

---

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

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

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

이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터입니다) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트임
이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그대로 “함수 컴포넌트”라고 호칭함

또한 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 root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);

CodePen에서 시험해보기

이 예시에서는 다음과 같은 일들이 일어남

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

주의: 컴포넌트의 이름은 항상 대문자로 시작

React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리함
예를 들어 <div />는 HTML div 태그를 나타내지만, <Welcome />은 컴포넌트를 나타내며 범위 안에 Welcome이 있어야 함

이 규칙에 대한 자세한 내용은 여기에서 확인할 수 있음

---

컴포넌트 합성

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

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

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

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

CodePen에서 시험해보기

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

하지만 기존 앱에 React를 통합하는 경우에는 Button과 같은 작은 컴포넌트부터 시작해서 뷰 계층의 상단으로 올라가면서 점진적으로 작업해야 할 수 있음

---

컴포넌트 추출

컴포넌트를 여러 개의 작은 컴포넌트로 나누는 것을 두려워하지 말자

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

CodePen에서 시험해보기

이 컴포넌트는 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가 아닌 컴포넌트 자체의 관점에서 짓는 것을 권장

이제 Comment 가 살짝 단순해짐

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

CodePen에서 시험해보기

처음에는 컴포넌트를 추출하는 작업이 지루해 보일 수 있지만 재사용 가능한 컴포넌트를 만들어 놓는 것은 더 큰 앱에서 작업할 때 두각을 나타냄

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를 다룰 때 반드시 순수 함수처럼 동작해야 함

물론 애플리케이션 UI는 동적이며 시간에 따라 변함
다음 페이지에서는 “state”라는 새로운 개념을 소개할 것임
React 컴포넌트는 state를 통해 위 규칙을 위반하지 않고 사용자 액션, 네트워크 응답 및 다른 요소에 대한 응답으로 시간에 따라 자신의 출력값을 변경할 수 있음

 

---

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

Components와 Props – React