리액트 Props & State 활용

Props :

부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하기 위해 사용함

State :

UI에 보여줄 정보를 결정할 때 사용하는 상태값

// Parent.js (부모 컴포넌트)
import React, {useState} from 'react';
import Child from './Child';

const Parent = () => {
	const [color, setColor] = useState('red');

	const changeColor = () => {
		setColor('blue');
	};

  return (
		<>
	    <div>부모 컴포넌트입니다.</div>
			<Child color={color} change={changeColor} />
		</>
  );
};

export default Parent;

// Child.js (자식 컴포넌트)
import React from 'react';

const Child = (props) => {
	console.log(props);       // {color: 'red', change: () => {setColor('blue')}}

  return (
		<>
	    <div>자식 컴포넌트입니다.</div>
			<p>{props.color}</p>
			<button onClick={props.change}>색상 바꾸기</button>
		</>
  );
};

export default Child;