[React.JS] Componenst와 Props

Components와 Props

---

Component는 UI를 독립적(independent)하게 나누는 단위입니다. Component는 독립적이고, 재사용 가능해야 합니다.

Component는 JavaScript에서 함수, Props는 함수의 인자값으로 생각 할 수 있습니다. 함수는 인자 값으로 어떠한 값을 만들어 내고, Component는 Props로 어떠한 UI를 만들어 냅니다.

Component 종류

Component를 만들어 내는 방법은 function을 이용하는 방법과 ES6에서 추가된 class를 이용하는 방법 2가지가 있습니다.

Function Component

Component를 표현하는 가장 간단한 방법입니다.

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

Class Component

ES6에서 추가된 Class를 이용하여 Component를 만드는 방법입니다. ([자바스크립트] OOP, ES6(ECMA Srcipt 6) - 클래스(Class) 참고)

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

Component의 Rendering

JSX에서 HTML tag를 표현하는 방법은 아래와 같습니다.

const element = <dev />;

JSX에서 유저가 정의한 Components를 표현하는 방법은 아래와 같습니다.

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

props를 이용한 Component를 랜더링 하는 방법은 아래와 같습니다.

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

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

ReactDOM.render(
    element,
    document.getElementById('root')
);

CodePen으로 예제 확인하기

7번 줄, ReactDom.render() API를 사용하여, HTML에 element를 랜더링 하겠다는 의미입니다.

5번 줄, element의 정의로, Welcome이라는 Component가 정의 되어 있고 props로 name을 가지고 있습니다. name의 값은 Beomy가 되겠구요.

1번 줄, Welcome Component의 정의 부분 입니다. props를 인자로 가지고 있고, 5번 줄에서 넘겨 받은 name의 값을 <h1>으로 출력합니다.

props.name의 의미는 [React.JS] JSX 에서 JSX를 객체로 표현하기 부분을 보시면 이해하는데 도움이 될듯 싶습니다.

Component가 다른 Component를 포함 하는 형태도 가능합니다.

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

function App() {
    return (
        <div>
            <Welcome name="Beomy" />
            <Welcome name="Noel" />
        </div>
    );
}

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

CodePen으로 예제 확인하기

분리할 수 있는(따로 땔 수 있는) UI는 Component로 만드는 것이 코드 유지 보수에 유리합니다.

Props는 Read-Only

Props는 수정할 수 없는 Read-Only 속성입니다. 아래와 같이 Prop를 사용이 가능합니다

function Square(prop) {
  var square = prop.number * prop.number;
  return <h1>{prop.number} square is {square}</h1>;
}

ReactDOM.render(
  <Square number="2" />,
  document.getElementById('root')
);

CodePen으로 예제 확인하기

하지만 아래와 같이 prop.number *= 2로 prop를 직접 변경하는 것은 불가능 합니다.

function Square(prop) {
  prop.number *= 2;
  return <h1>2 square is {prop.number}</h1>;
}

ReactDOM.render(
  <Square number="2" />,
  document.getElementById('root')
);