React props 기초

//app.js

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

function App() {


  return (
    <div>
      <Counter a={1} initialvalue={5}/>
    </div>
  );
}

export default App;

//counter.js
import React, {useState} from 'react';

const Counter = (props) => {
    const [count, setCount] = useState(props.initialvalue);

    const onIncrease = () => {
        setCount(count + 1);
    }

    const onDecrease = () => {
        setCount(count - 1);
    }

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    )
}

export default Counter;

요렇게 하면 app.js에서 보낸 props가 전달되어 counter.js의 초기값이 5가 되어 출력 된다.

//counter.js
import React, {useState} from 'react';

const Counter = ({initialvalue}) => {
    const [count, setCount] = useState(initialvalue);

    const onIncrease = () => {
        setCount(count + 1);
    }

    const onDecrease = () => {
        setCount(count - 1);
    }

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    )
}

export default Counter;

이렇게 비구조화로 가져와도 동일한 값이 나온다.

혹시 Props로 전달한 값이 많다면 하나씩 써주기 벅차다. 그러면 부모 컴포넌트에서 축약하여 자식 컴포넌트에 '펼쳐서 전달하는 스프레드 형태'로 전달이 가능하다.

//app.js

import React from 'react';
import Myheader from './Myheader';
import Counter from './Counter';

function App() {

  const counterProps = {
    a : 1,
    b : 2,
    c : 3,
    d : 4,
    e : 5,
  }

  return (
    <div>
      <Counter {...counterProps}/>
    </div>
  );
}

export default App;


//counter.js
import React, {useState} from 'react';

const Counter = ({e}) => {
    const [count, setCount] = useState(e);

    const onIncrease = () => {
        setCount(count + 1);
    }

    const onDecrease = () => {
        setCount(count - 1);
    }

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    )
}

export default Counter;

이렇게 주고 받을 수 있다.

본인이 바뀔 때, 부모가 리렌더 될 때, 자식이 바뀔 때 모두 리렌더 된다.