먼저 state 와 props를 한마디로 정의하면

• state : 변경가능한 UI 정보(상태값)
• props : 부모요소의 데이터값(state값)을 자식요소에 전달하기 위한 매개체

간단하지만 개념이지만 코드로 익숙해지지 않으면 머리속으로 그려지지 않는다.

state

원래는 state는 클래스형 컴포넌트에서만 사용가능했다고 한다.
그러나 hook을 통해 함수형 컴포넌트에서도 state를 사용가능하게 되었다.

hook

• hook의 사용 규칙
  • 최상위 에서만 hook을 호출해야한다.
    컴포넌트 내에 있는 반복문, 조건문, 함수 내에서 호출할 수 없다.
• React 함수 컴포넌트 내에서만 hook을 호출해야 한다.

react에는 useState같은 내장 hook이 있는데 이를 통해서 state의 개념을 이해하면 좋다.

import React, { useState } from 'react';

function Component() {
  const [userColor,setUserColor] = useState("red");
  // userColor라는 state를 정의하고 useState함수를 통해 초기값을 넣어준다.
  return (
  	<div className="Component">
    	<h1 style={{color:usercolor} 
	onClick={() => setUserColor("blue")}
        > // onClick 이벤트와 setUserColor 함수를 연결
          // setUserColor 함수를 통해서 state값을 변경할수 있다.
          userColor(state값)의 색이 글자 색이 된다.
        </h1>
    </div>
  );

props

props: properties(속성), 말그대로 컴포넌트의 속성값이다.
props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체이다.
그 값들을 자식 컴포넌트에서 전달 할 수 있다.

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

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

  return (
    <div>
      <h1>Parent Component</h1>
      <Child />
    </div>
  );
}

export default Parent;

위의 코드로는 부모 컴포넌트의 state값인 color를 자식 컴포넌트에서 전달해 줄 수 없다.

그때 아래와 같이 props 를 사용하는 것이다.

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

function Parent() {
  const [themeColor, setThemeColor] = useState('red');

  return (
    <div>
      <h1>Parent Component</h1>
      <Child titleColor={themeColor} changeColor={() => setThemeColor("blue")} />
    </div>
  );
}

export default Parent;

//Child.js

import React from 'react';

function Child(props) { //props 객체를 인자로 받아와야한다.
	// console.log(props); //{titleColor : {themeColor}, changeColor:{() => setThemeColor("blue")}}
	// props.titleColor => themeColor 값인 "red"
	// props.changeColor => {() => setThemeColor} 함수반환

  return (
    <div>
      <h1 style={{color : props.titleColor}} onClick={props.changeColor}>Child Component</h1>
// props를 통해 부모요소의 state값을 전달 받을수도 있고
// props를 통해 전달받은 함수를 이벤트와 연결해서 state값을 변경할 수도 있다.
    </div>
  );
}

export default Child;