Component와 props

component

컴포넌트를 통해서 UI를 재사용 가능한 조각으로 만들어서 관리할 수 있다.
props라는 임의의 값을 입력 받아서 화면에 어떻게 표시되는지를 기술하는 리액트 엘리먼트를 반환한다.

함수형 vs 클래스 컴포넌트

리액트 컴포넌트는 함수형, 클래스형으로 구분을 할 수 있다. 각 컴포넌트 생김새를 살펴보면 아래와 같다.

함수형 컴포넌트

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

클래스 컴포넌트

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

함수형 컴포넌트와 클래스 컴포넌트의 차이가 몇가지 있다. 그 내용은 다음에 살펴보기로 하겠다.

props

간단히 말해 props는 우리가 어떤 컴포넌트에 값을 전달할 때 사용한다.
예를들어 우리가 Hello 컴포넌트에 name이라는 값을 전달하고 싶으면 App.js에서 아래와 같이 값을 전달을 한다.

//App.js
import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="홍길동" />
  );
}

export default App;

이제 Hello 컴포넌트에서 App.js에서 전달한 값을 받아서 사용하고 싶다면 props 파라미터에서 name의 값을 찾아 사용할 수 있다.

//Hello.js
import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

props 기본값 설정하기

만약 props의 기본값이 필요한 아래와 같은 경우에는 컴포넌트.defaultProps를 이용하여 기본값을 설정할 수 있다.

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}
//props 기본값 설정 (만약 props로 값이 넘어 오지 않으면 기본값을 사용한다.)
Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

props.children

컴포넌트 태그 사이에 들어있는 값을 조회하고 싶은 경우 props.children을 사용하면 된다.
아래와 같이 Wrpper라는 컴포넌트 안에 Hello라는 컴포넌트가 들어있는 경우 props.children을 사용하지 않으면 Hello 컴포넌트 화면에 출력되지 않는다.

//App.js
import React from "react";
import Wrapper from "./Wrapper";
import Hello from "./Hello";

export default function App() {
  return (
    <>
      <Wrapper>
        <Hello />
      </Wrapper>
    </>
  );
}

// Wrapper.js
import React from 'react';

function Wrapper() {
  return (
    <div></div>
  )
}

export default Wrapper;

import React from "react";

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>;
}

Hello.defaultProps = {
  name: "이름 없음"
};

export default Hello;

따라서 Wrpper 컴포넌트 태그 안에 있는 Hello 컴포넌트를 렌더링해주기 위해서는 props.children을 이용한다.

import React from 'react';

function Wrapper({children}) {
  return (
    <div>{children}</div>
  )
}

export default Wrapper;

props는 읽기전용

모든 리액트 컴포넌트들은 자신의 props를 다룰 때 반드시 순수함수처럼 동작해야한다.
여기서 순수함수란 아래의 함수처럼 동일한 입력값에는 항상 동일한 결과값이 나오는 함수를 말한다.

const foo = (a,b) => a+b;