React.js 2 - Props & State 정리(1)

1. 개념

React에서 자주 사용되는 Props와 State의 개념과 차이점입니다.

Props란, 컴포넌트가 가지고 있는 프로퍼티로 자식 컴포넌트가 부모 컴포넌트로부터 값을 받고 싶을 때, props를 통해 받아올 수 있습니다. 일반 객체 지향에서 특정 function의 인자(parameter)로 생각하면 좋습니다.

위는 객체 데이터를 표시하거나 변경 사항등을 알리기 위해 사용되며 읽기전용이므로 값을 수정할 수 없다는 특징을 가지고 있습니다.

State는 private한 속성을 지니며 컴포넌트에 의해 완전히 제어되고 있다는 특징을 가지고 있습니다. 즉, 컴포넌트 내부에서만 사용할 수 있는 속성인 것이고, Local State라고도 부릅니다

2. Props

우선 MyComponent 컴포넌트를 수정하여 해당 컴포넌트에서 name이라는 props를 렌더링하도록 설정해 봅시다. props 값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있습니다. props를 렌더링할 때 JSX 내부에서 { } 기호로 감싸 주면 됩니다.

//MyComponent.js

import React from ‘react‘;


const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};



export default MyComponent;

App 컴포넌트에서 MyComponent의 props 값을 지정해 보겠습니다.

//App.js

import React from 'react';
import MyComponent from './MyComponent';
 
const App = () => {
  return <MyComponent name="React" />;
};
 
export default App;

 

2.1 Props 기본값 설정(defaultProps)

방금 설정한 name 값을 지우고 다시 저장해 보세요.

(...)
return <MyComponent />;
(...)

현재 name 값을 지정하지 않았기 때문에 브라우저에는 ‘안녕하세요, 제 이름은 입니다.’라는 내용이 보일 것입니다. 지금처럼 props 값을 따로 지정하지 않았을 때 보여 줄 기본값을 설정하는 defaultProps에 대해 알아봅시다.

//MuComponent.js

import React from 'react';
 
const MyComponent = props => {
  return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
export default MyComponent;

 

2.2 태그 사이의 내용을 보여 주는 children

리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여 주는 props가 있는데요. 바로 children입니다.

//App.js

import React from 'react';
import MyComponent from './MyComponent';
 
const App = () => {
  return <MyComponent>리액트</MyComponent>;
};
 
export default App;

위 코드에서 MyComponent 태그 사이에 작성한 리액트라는 문자열을 MyComponent 내부에서 보여 주fu면 props.children 값을 보여 주어야 합니다.

//MuComponent.js

import React from 'react';
 
const MyComponent = props => {
  return (
    <div>
      안녕하세요, 제 이름은 {props.name}입니다. <br />
      children 값은 {props.children}
      입니다.
    </div>
  );
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
export default MyComponent;

결과물은 아래와 같다.

2.3 비구조화 할당 문법을 통해 props 내부 값 추출하기 

ES6의 비구조화 할당 문법을 사용하여 props 값을 조회할 때마다 props 호출 없이 내부 값을 바로 추출하는 방법을 알아보겠습니다.

import React from 'react';
 
const MyComponent = props => {
  const { name, children } = props;
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
    </div>
  );
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
export default MyComponent;

이렇게 코드를 작성하면 name 값과 children 값을 더 짧은 코드로 사용할 수 있습니다.

방금 사용한, 객체에서 값을 추출하는 문법을 비구조화 할당(destructuring assignment)이라고 부릅니다. 이 문법은 구조 분해 문법이라고도 불리며, 함수의 파라미터 부분에서도 사용할 수 있습니다. 만약 함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용하는 것이죠.

import React from 'react';
 
const MyComponent = ({ name, children }) => {
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
    </div>
  );
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
export default MyComponent;

이렇게 함수형 컴포넌트에서 props를 사용할 때 이렇게 파라미터 부분에서 비구조화 할당 문법을 사용할 수 있습니다.

2.4 propTypes를 통한 props 검증

컴포넌트의 필수 props를 지정하거나 props의 타입(type)을 지정할 때는 propTypes를 사용합니다. 컴포넌트의 propTypes를 지정하는 방법은 defaultProp을 설정하는 것과 비슷합니다. 우선 propTypes를 사용하려면 코드 상단에 import 구문을 사용하여 불러와야 합니다.

import React from ‘react‘;
import PropTypes from ‘prop-types‘;


const MyComponent = ({ name, children }) => {
  return (…);
};



MyComponent.defaultProps = {
  name: ‘기본 이름‘
};



MyComponent.propTypes = {
  name: PropTypes.string
};



export default MyComponent;

이렇게 설정해 주면 name 값은 무조건 문자열(string) 형태로 전달해야 된다는 것을 의미합니다.