[React] Props; 컴포넌트에 데이터 전달하기

Props ?

-  프로퍼티스의 줄임말. 

import React from "react";
import Counter from "./Counter";
import MyFooter from "./MyFooter";
import MyHeader from "./MyHeader";

function App(){
    const number = 5;

    return (
        <div>
            <MyHeader/>
            <Counter a={1} b={2} initialVlue={5}/>
            <MyFooter/>
        </div>
    )
}

export default App;

프로퍼티스를 여러개 전달해 줄 수 있다.

하지만 이런식으로 props를 전달하면 길어지기때문에

자식컴포넌트에 보내줘야하는  prop들을 객체로 만들어 보내주는게 좋다

 

 

 

 

 

 

 

 

counterProps 객체를 만들고 할당시 스프레드 객체인 {...counterProps}로 받았다

 

 

import React, {useState} from "react";

const Counter = ({initialValue}) => {
    console.log(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>
    )
}

Counter.defaultProps = {
    initialValue: 0
}

export default Counter;

 

initialValue의 기본값을 5로 초기화 해주었다.

 

 

 

 

 

---

Props 특징

- 본인이 가진 state 바뀔때마다 re-render

- 내려오는 props가 바뀔때마다 re-render

- 부모가 re-render가 되면 re-render

 

 

const OddEvenResult = ({count}) => {
    return <>{count % 2 == 0 ? "짝수" : "홀수" }</>
}

export default OddEvenResult;

 

import React, {useState} from "react";
import OddEvenResult from "./OddEvenResult";

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>
            <br/>
            <OddEvenResult count={count}/>
        </div>
    )
}

Counter.defaultProps = {
    initialValue: 0
}

export default Counter;

 

 

 

 

 

---

컴포넌트를 감쌀 컴포넌트 만들기

const Container = ({children}) => {
    return (
        <div style={{margin:20, padding:20, border:"1px solid grey"}}>
            {children}
        </div>
    )
}

export default Container;

인라인스타일을 지정해주었고, Container 파라미터에 childeren을 넣어주었다..

 

 

import React from "react";
import Container from "./Container";
import Counter from "./Counter";
import MyFooter from "./MyFooter";
import MyHeader from "./MyHeader";

function App(){
    const counterProps = {
        a : 1,
        b : 2,
        initialValue : 5
    }

    return (
        <Container>
            <div>
                <MyHeader/>
                <Counter {...counterProps}/>
                <MyFooter/>
            </div>
        </Container>
    )
}

export default App;

 

react element를 children으로 받았다.

 

 

props 개념이 어려워서 w3school에서 더 공부해야겠다.

 

 

참고 :

- 한 입 크기로 잘라먹는 리액트