1. props

-component의 속성을 설정할 때 사용하는 요소
부모 component에서 값을 전달 받아서 사용

props

-부모 component에서 자식 component로 값을 전달

App.js

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponent name='hemtory'/>
    </div>
  );
}

export default App;

MyComponent.js

import React from 'react';

const MyComponent = (props) => {
    return (
        <div>
            {props.name}, 안녕!!!!
        </div>
    );
};

export default MyComponent;

defaultProps

-부모 component에서 값을 전달하지 않을 때 자식 component가
기본적으로 갖게 되는 값

App.js

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

export default App;

MyComponent.js

import React from 'react';

const MyComponent = (props) => {
    return (
        <div>
            {props.name}, 안녕!!!!
        </div>
    );
};

MyComponent.defaultProps = {
    name: 'hemtory'
}

export default MyComponent;

children

-component 사이에 보여지는 내용의 props를 children으로 전달 받을 수 있음

App.js

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponent>hemtory2</MyComponent>
    </div>
  );
}

export default App;

MyComponent.js

import React from 'react';

const MyComponent = (props) => {
    return (
        <div>
            {props.children}, 안녕!!!!
        </div>
    );
};

export default MyComponent;

props 비구조화 할당

-자식 component에서 비구조화 할당을 사용하여 props 내부 값을 추출할 수 있음

App.js

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponent name='hemtory'>햄토리</MyComponent>
    </div>
  );
}

export default App;

MyComponent.js

import React from 'react';

const MyComponent = (props) => {
    const {name, children} = props;

    return (
        <div>
            {name}, {children}, 안녕!!!!
        </div>
    );
};

export default MyComponent;

아래와 같이 props가 아니라 객체형태로 값을 각각 전달 받을 수도 있음
MyComponent.js

import React from 'react';

const MyComponent = ({name, children}) => {
    return (
        <div>
            {name}, {children}, 안녕!!!!
        </div>
    );
};

export default MyComponent;

propTypes

-props의 타입을 지정해서 값을 전달하도록 사용할 수도 있음

App.js

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponent name={3} />
    </div>
  );
}

export default App;

MyComponent.js

import React from 'react';
import PropTypes from 'prop-types';

const MyComponent = (props) => {
    return (
        <div>
            {props.name} 안녕!!!!
        </div>
    );
};

MyComponent.propTypes = {
    name: PropTypes.string
};

export default MyComponent;

렌더링이 되서 값이 나타나기는 하지만 console에 에러 메세지가 뜸

2. state

-component에서 지정하고, 수정할 수 있는 값
함수형 component에서는 state를 직접 사용할 수 없어서 함수를 이용해 state를 사용할 수 있다

useState

-useState는 비구조화 할당을 통해 state값과 state값을 변경할 때 사용할 setter 함수를 지정할 수 있다
useState()의 괄호 안에는 state 초기값을 설정할 수 있다

App.js

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

export default App;

MyComponent.js

import React, { useState } from 'react';

const MyComponent = () => {
    const [name, setName] = useState('햄토리');
    return (
        <div>
            <div>{name} 안녕!!!!</div>
            <button onClick={() => setName('hemtory')}>영어로</button>
        </div>
    );
};

export default MyComponent;

'영어로' 버튼을 누르면 바뀐다

state 변경시 주의할 점

state값이 객체인데 setter 함수를 사용하지 않고 직접 접근해서 값을 변경하려는건 잘못된 방식이다

state.name = '햄토리';

아래와 같이 spread 연산자(...)를 사용해 객체 사본을 만들고, 사본 값을 변경한 후 setter 함수를 통해 업데이트 해야된다

import React, { useState } from 'react';

const MyComponent = () => {
    const [name, setName] = useState({name: '햄토리'});
    return (
        <div>
            <div>{name.name} 안녕!!!!</div>
            <button onClick={() => setName({...name, name: 'hemtory'})}>영어로</button>
        </div>
    );
};

export default MyComponent;