리액트에서 다루는 데이터는 props와 state로 나뉜다

간단하게 정의하자면 이렇다

props는 '정적인 데이터'
state는 '동적인 데이터'

props

props 는 properties의 줄임말로, 부모 요소에서 상속받아 사용 할 수 있다. 받아온 값은 읽기만 가능하고 수정 할 수는 없다. 자식 요소에 불러왔을 때 props. 를 이용해 사용할 수 있다.

// Parent.js

import React, { useState } from 'react';
import Child from '../pages/Child/Child';

function Parent() {
  const [color, setColor] = useState('red'); // color의 기본 값을 red로 설정 

  return (
    <div>
      <h1>Parent Component</h1>
      <Child titleColor={color} />
    </div>
  );


export default Parent;

// Child.js

import React from 'react';

function Child(props) {

  return (
    <div>
      <h1 style={{color : props.titleColor}}>Child Component</h1>
    </div> // props.titleColor : props 객체의 특정 key(titleColor)값. 즉 "red"
  );
}

export default Child;

state

state 는 컴포넌트의 상태를 나타내며 props 와는 반대로 변할 수 있다.
또한 컴포넌트 내부에서 선언 할 수 있으며, 값을 직접 변경 할 수도 있다.

import React, { useState } from 'react';

function State() {
	const [color, setColor] = useState('red'); 
        // color는 현재 가지고 있는 값, setColor를 통해 언제든지 다른 색으로 변경 시킬 수 있다

	return (
      <div>
        <h1>Function Component | State</h1>
      </div>
  );
}

export default State;

import React, { useState } from 'react';

function State() {
	const [color, setColor] = useState('red');
	
	return (
      <div>
        <h1 style={{ color: color }}>Function Component | State</h1>
	<button onClick={() => setColor('blue')}>Click</button>
      </div> // color의 기본 값은 red였지만 onClick 이벤트를 활용해 
             // setColor에 blue로 지정시켜 color값을 변환시키게끔 한다
  );
}

export default State;