[React] State, Props

State

• 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값이다.
• 화면에 보여줄 컴포넌트의 UI 정보(상태) 입니다

Props

• props : properties(속성) 부모컴포넌트에서 자식 컴포넌트로 전달해주는 객체이비다.

Props 전달.

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 titleColor={color} />
    </div>
  );

export default Parent;

import React from 'react';

function Child(props) {
  // console.log(props);

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

export default Child;

props를 통한 event handler 전달

// 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 titleColor={color} changeColor={() => setColor('blue')} />
    </div>
  );

export default Parent;

import React from 'react';

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

export default Child;