[React] 입문 / Props

Props 개요

<Counter/>	// 기존

<Counter initialValue={5}/>	// 태그의 prop value 지정

기존 방식으로만 Component를 사용 했던것과 달리,
태그의 properties 를 사용하는 것 처럼 Component 요소에 props value 를 지정 하면,
해당 Component 에서  자식 Component로 데이터를 전달 할 수 있다.

Props 사용

App.js 파일

import logo from './logo.svg';
import Counter from './Counter';
import './App.css';

function App() {

  const counterProps = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5,
  }
  return (
    <div className="App">
      <header className="App-header">
        <Counter initialValue={5} {...counterProps}/> //spread 연산자 사용 가능
      </header>
    </div>
  );
}

export default App;

Counter.js 파일

import React, {useState} from "react"

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

    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;

console.log(props)

defaultProps

defaultProps 는 부모 Component 로 부터 전달 받지 못한 props 의 값을 기본 값으로 초기화 해주어 값이 넘어 오지 않았을 때 예외처리를 해 줄 수 있는 속성이다.


App.js 파일

import logo from './logo.svg';
import Counter from './Counter';
import './App.css';

function App() {

  return (
    <div className="App">
      <header className="App-header">
        <Counter/> //spread 연산자 사용 가능
      </header>
    </div>
  );
}

export default App;

 

Counter.js 파일

import React, {useState} from "react"

const Counter = ({initialValue}) => {	//비구조화 할당으로 받을 수 도 있다.
    console.log(initialValue);	//undefined 출력
    const [count, setCount] = useState(0);

    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;

 

defaultProps 사용한 Component.js 파일

import React, {useState} from "react"

const Counter = ({initialValue}) => {
    console.log(initialValue);	//0 출력
    const [count, setCount] = useState(0);

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

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

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

Counter.defaultProps = {	//defaultProps 사용
     initialValue:0
}
export default Counter;

 

참고

https://espania.tistory.com/350

[React] 입문 / State (상태)

https://espania.tistory.com/333

[javascript] 비 구조화 할당