React-state,Props

State

• 단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값입니다.
• state는 화면에 보여줄 컴포넌트의 정보(상태)를 지니고 있는 객체입니다.

import React, { useState } from 'react';

 function State() {
  const [ color, setColor ] = useState('red');

  const handleColor = () => {
		if(color !== 'blue') {
	    setColor({
	      color: 'blue'
	    });
    }
  }

  return (
    <div>
      <h1 style={{ color: color }}>Function Component | State</h1>
      <button onClick={handleColor}>Click</button>
    </div>
  );
}

export default State; 

Props

• 단어 뜻 그대로 컴포넌트의 속성값
• props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체

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

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

function Child(props) {
  return (
    <div>
      <h1 style={{color : props.titleColor}}>Child Component</h1>
    </div>
  );
}