03. Component

리액트에서 컴포넌트는 독립적이고 재사용 가능한 최소의 코드 단위이다.
자바스크립트의 함수와 같은 목적을 제공하지만 분리되어 동작하고 HTML을 return 해주는 특징을 가졌다.
컴포넌트의 이름은 항상 대문자로 시작해야한다.

Function and Class Components

컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다.

• 함수형 컴포넌트
  • 자바스크립트 함수를 작성한다.
  • export 하여 다른 파일에서 불러올 수 있도록 한다.

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

• 클래스형 컴포넌트
  • 컴포넌트 구성 요소와 리액트 생명주기를 모두 포함한다.
  • 프로퍼티, state, 생명주기 함수가 필요한 구조에서 사용되는 컴포넌트다.

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

Rendering a Component

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

리액트 엘리먼트로 DOM 태크 뿐만 아니라 사용자 정의 컴포넌트도 나타낼 수 있다.
리액트가 사용자 정의 컴포넌트로 작성한 엘리먼트를 만나면 작성된 요소를 객체로 만들어 전달해주는데 그것이 props가 된다.
props는 단일 객체로 요소를 key와 value 값으로 정의해 해당 컴포넌트에서 나타날 수 있게 된다.

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

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

📌 what happens in this example

• <Welcome name="Sara" /> 엘리먼트로 ReactDOM.render()를 호출
• React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출
  • Welcom 컴포넌트에 작성된 요소를 props 단일 객체로 만들어 호출하게 된다.
• Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환
• React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트

Composing Components

컴포넌트는 자신의 출력에 다른 컴포넌트를 참조해 사용할 수 있다.
컴포넌트에 다른 요소를 입력해 재사용이 가능하다.

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

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

Extracting Components

컴포넌트를 여러 작은 컴포넌트로 나누는 것은 큰 프로젝트에서 재사용 가능한 컴포넌트로 효율성을 높일 수 있다.
다음 코드를 작은 컴포넌트로 분리해보겠다.

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

이 컴포넌트는 props에 author(객체), text(문자열) 및 date(날짜)를 props로 받는다.
위 코드는 중첩구조로 변형하기 어렵고 재사용성도 높지 않아 보인다.
하지만 코드구조와 컴포넌트 분리로 가독성 높은 코드를 만들 수 있다.

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

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

Avatar 컴포넌트에서 props는 새롭게 key 값이 변경되었다.
props의 이름은 사용될 context가 아닌 컴포넌트 자체에서 어떤 역할을 하는지에 대한 관점으로 짓는것이 좋다.

참고

https://www.w3schools.com/react/react_components.asp
https://goddaehee.tistory.com/299
https://ko.reactjs.org/docs/components-and-props.html