[React]props, state로 컴포넌트 내부 속성 설정하기

리액트로 컴포넌트를 제작하다 보면 컴포넌트 내부의 속성을 부모 컴포넌트에서 지정해주고 속성 값 조작이 필요한 경우가 있습니다. 이렇게 속성 설정이 필요할 때 사용할 수 있는 것이 바로 props와 state입니다.

 

props와 state는 내부의 속성, 쉽게 생각하면 내부 변수를 지정해 줄 때 사용하는 요소입니다.

 

두 요소의 차이는 props는 부모 컴포넌트에서 값을 지정할 때 사용하고 state는 컴포넌트 내부에서 값을 바뀔 수 있는 차이가 있습니다.

 

이해를 돕기위해 props와 state를 하나씩 실습을 해보겠습니다.

props

먼저 아래의 코드를 보겠습니다.

-Parent.js

import React from 'react';
import Children from './Children';

const Parent = () => {

  return (
    <Children name="리액트"/>
  )
};

export default Parent;

-Children.js

import React from 'react';

const Children = props => {

  return (
    <div>제 이름은 {props.name} 입니다.</div>
  )
};

export default Children;

위의 코드를 보면 Parent에서 Chlidren 컴포넌트를 사용한 것을 확인할 수 있습니다.

여기서 Chlidren의 내부를 보면 props를 파라미터로 받아  {props.name}으로 부모에서 지정한 속성 값을 사용할 수 있습니다.

* props 더 잘 사용하기

propsTypes를 사용하여 속성의 타입을 지정해 줄 수 있습니다.

 

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

const Children.propTypes = {
  name: propTypes.string
  //name: propTypes.string.isRequired
};

const Children = props => {

  return (
    <div>제 이름은 {props.name} 입니다.</div>
  )
};

export default Children;

위와 같이 propsTypes에서 string, number, array, func, object 등 타입을 지정하면 됩니다. 추가로 isRequired를 이용하여 필수 값으로 지정할 수 있습니다.

state

이번에는 버튼을 누르면 1씩 증가하는 것을 보여주는 컴포넌트를 만들어 보겠습니다.

import React, { useState } from "react";

const Counter = () => {
    const [number, setNumber] = useState(0);
    
    return (
        <div>
            <h1>{number}</h1>
            <button onClick={() => {this.setNumber(number+1)}}>
                +1 버튼
            </button>
        </div>
    )
}

export default Counter;

state를 지정하기 위해 useState를 사용하였습니다. useState는 변수와 setter가 한 묶음으로 구성되어 있습니다. 

사용법은 간단합니다.

사용시 number를 변수처럼 사용하면 됩니다. 값을 변경하여야 할 경우 setNumber를 이용하여 수정해주면 됩니다.

 

 이 글에서는 props와 state의 기본적인 개념과 사용법을 알아보았습니다. 앞으로 부가적인 기능은 더 많은 학습이 필요합니다.