[React] 리액트 기초 배우기 #3 components와 props

 

해당 글은 리액트에서 제공하는 자습서에 내용을 덧붙이고 풀어서  작성한 글입니다. 
원문 : https://ko.reactjs.org/docs/getting-started.html

시작하기 – React

 

컴포넌트 생성

리액트에서 컴포넌트를 생성하는 방법은 두가지 입니다.

첫번째로 함수를 정의하는 방식입니다.

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

위의 함수는 엘리먼트를 return하기 때문에 컴포넌트이고, 함수로 정의되었기 때문에 함수 컴포넌트라고 불립니다.

 

두번째로는 class로 정의하는 방식입니다.

 

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

 

사용자 정의 컴포넌트 사용하기

리액트에서 엘리먼트를 정의할 때 사용자 정의 컴포넌트를 사용할 수 있습니다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

//추가
function Greeting() {
  return (
      <div>
        <h1>Hello~~ Pengun</h1>
      </div>
  );
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello React!
          
          {/*추가*/}
          <Greeting/>
          
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

이때 컴포넌트는 항상대문자로 시작해야합니다.

 

props의 사용

function Greeting(props) {
  return (
      <div>
        <h1>Hello~~ { props.name }</h1>
      </div>
  );
}

Greeting컴포넌트에 props를 인자로 주고, props.name이라고 작성합니다.

<Greeting name={"pengun"}/>

그리고 컴포넌트에 name프로퍼티에 문자열을 전달합니다.

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

//수정
function Greeting(props) {
  return (
      <div>
        <h1>Hello~~ { props.name }</h1>
      </div>
  );
}

function App() {

    return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Hello React!

              {/*추가*/}
              <Greeting name={"pengun"}/>
              <Greeting name={"pingu"}/>
              <Greeting name={"pengsu"}/>

            </p>
            <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
        </div>
    );

}

export default App;

이렇게 컴포넌트에 프로퍼티로 전달된 것들은 모두 props을 통해 이름으로 접근할 수 있습니다.

 

컴포넌트 나누기

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

위와 같은 댓글 컴포넌트가 있다고 생각해보세요.

댓글을 표시하기 위해선 아바타 사진, 사용자 이름, 댓글 텍스트, 댓글 게시 시각 이렇게 총 4가지의 요소로 이루어져 있습니다.

이중 아바타 사진과 사용자 이름은 UserInfo로 묶여있습니다.

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

해당 컴포넌트들을 추출해서 묶어 하나의 큰 컴포넌트인 <UserInfo>로 사용하는 것이 좋습니다.

UI중에 일부분 (아바타, 버튼 등등)이나 복잡한 컴포넌트 (댓글, App 등등)인 경우 재사용가능 하게 컴포넌트를 추출해서 사용하는 것이 좋습니다.

 

읽기전용 props

props는 읽기전용으로 수정하려하면 에러가 발생합니다.

 

다음 포스팅에서는 동적인것을 처리하기 위해 state라는 개념에 대해서 알아보겠습니다.