리액트 공식문서 읽기 - 주요개념(Components와 Props)

Components와 Props

컴포넌트

• 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눌 수 있다.
• 개념적으로 컴포넌트는 JS 함수와 유사하다. 👉 props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

//함수형
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
 
//클래스형
class Welcome extends React.Component{
  render(){
    return <h1>Hello, {this.props.name}</h1>
  }
}

👉 객체 인자를 받은 후 React 엘리먼트를 반환하는 유효한 React 컴포넌트

 

 

컴포넌트 렌더링

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

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 태그로 처리한다.

 

 

컴포넌트 합성

컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
 
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

 

 

컴포넌트 추출

하나의 컴포넌트를 이루는 구성요소들이 모두 중첩 구조로 이루어져 있으면 코드를 변경하기 어렵고, 각 구성 요소를 개별적으로 재사용하기도 힘들다. 

이를 해결하기 위해 하나의 컴포넌트를 여러 개의 작은 컴포넌트로 나누게 된다.

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

 

Avatar

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

 

UserInfo

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

 

최종

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를 수정해서는 안 된다.

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

👉 순수 함수: 입력값을 바꾸려 하지 않음 + 동일한 입력값에 대해 항상 동일한 결과를 반환

 

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

👉 순수 함수X: 자신의 입력값을 변경하고 있다.

 

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

React 컴포넌트는 다음 장에 배울 state를 이용해 위 규칙을 위반하지 않고 사용자 액션, 네트워크 응답 및 다른 요소에 대한 응답으로 자신의 출력값을 변경할 수 있다.

 

 

 

---

함께 읽어보면 좋을 글

순수 함수와 리액트의 관계