React 기초

React

React 기초 - Props

3은 2023. 1. 31. 23:14

728x90

Props란?

컴포넌트에 데이터를 전달하는 방법

Counter 예제

App.js

import './App.css';
import MyHeader from './MyHeader';
import Counter from './Counter';

function App() {

  return (
    <div className="App">
      <MyHeader/>
        <Counter a = {1} b = {2} c = {3} d = {4} initialValue={5}/> 
    </div>
  );
}

export default App;

App.js에서 Counter 컴포넌트에게 여러 매개변수를 보낸다.

Counter.js

import React,{useState} from "react";

const Counter = (props) => {

    console.log(props);

    //0에서 출발
    //1씩 증가
    //1씩 감소
    //count 상태
    const [count, setCount] = useState(0);
    //count는 상태의 값
    //setCount는 count라는 상태를 변화시키는 상태변환 함수
    //useState(0)은 count의 값을 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;

Counter.js에서 props로 매개변수를 받아서 콘솔에 찍어보면 아래 사진처럼 객체 안에 담겨서 잘 오는 것을 확인할 수 있다.

props.initialValue 같은 방식으로 객체 안에 변수를 꺼내 쓸 수 있다. 이를 점표기법이라고 한다.

여러 개의 prop을 전달할 때는 아래와 같은 방법으로 객체로 만들어서 전달할 수 있다.

App.js

import './App.css';
import MyHeader from './MyHeader';
import Counter from './Counter';

function App() {

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

  return (
    <div className="App">
      <MyHeader/>
        <Counter {...counterProps}/> 
    </div>
  );
}

export default App;

● defaultProps

까먹을 거 같거나 중요한 prop일 때 사용한다.

Counter.js