State

state는 컴포넌트 가변 데이터의 상태를 나타내며, 컴포넌트 내부에서 선언및 관리한다.

기본적으로 상태가 변경이 되면 컴포넌트는 리렌더링 된다.

  • 가변 데이터의 상태
  • Private state(컴포넌트 스스로 관리)
  • 컴포넌트 내부에서 직접 변경 가능
import React, { useState } from 'react';

const UseState = () => {
  const [value, setValue] = useState(0);

  const inCrement = () => {
    setValue(value + 1);
  }
  const deCrement = () => {
    setValue(value - 1);
  }

  return(
    <div>
      <p>현재 카운터 값은 <b>{value}</b></p>

      <button onClick={inCrement}>+1</button>
      <button onClick={deCrement}>-1</button>
    </div>
  );
};

export default UseState;

 

Props

props는 properites를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.

컴포넌트 간 데이터의 흐름은 한 컴포넌트에서 다른 컴포넌트로 데이터 전달(props의 전달)을 의미한다.

props의 전달은 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 것이며,

자식 컴포넌트는 한 개가 될 수 있고 두 개 이상이 될 수 있다.

props는 부모로부터 상속 받은 데이터를 전달 받기 위함이며 데이터를 변경할 수 없다.

  • 불변의 데이터
  • 부모로부터 전달 받은 props
//자식 컴포넌트(MyComponent.js)
import React from 'react';

const MyComponent  = props => { //props는 컴포넌트 함수의 파라미터
    return <div>안녕하세요, 제 이름은 {props.name} 입니다.</div> // 부모 컴포넌트에서 name로 지정해서 사용한다.
};

export default MyComponent;

//부모 컴포넌트(App.js)
//컴포넌트를 사용할 때 props 값 지정하기
import React form 'react';
import MyComponent from './MyComponent';

const App = () => {
    return <MyConponent name={'React'} />; //자식 컴포넌트 props.name으로 지정한 값 사용
}

export default App;

 

결론

state는 함수의 내부에서 선언한 변수이고,

props는 컴포넌트의 함수 파라미터라고(매개변수) 이해하면 좋을 것 같다.