React prop

prop

부모 컴포넌트에서 자식 컴포넌트에게 어떤 값을 이름을 붙여 전달하는 방식

 

부모

<Counter a={1} b={2} initialValue={5} />

자식

const Counter = (props) => {
    console.log(props);

이렇게 값이 객체안에 들어가 전달이 된다.

 

이렇게 짧은 값 말고 긴 값들도 전달을 해주고 싶을 때는 객체에 넣어서 전달해주면 된다.

 

 

부모

function App() {
    const number = 5;

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

자식

const Counter = (props) => {
    console.log(props);

 

const Counter = ({ initialValue }) => {

    const [count, setCount] = useState(initialValue);

이렇게 값을 받아도 된다.

 

 

initialValue에 값이 없을때를 대비해 이렇게 설정을 해두면 initialValue에 값이 없어도 default값인 0이 출력되게 된다.

Counter.defaultProps = {
    initialValue: 0,
};

 

 

값이 짝수 홀수인지 판별하기

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

export default OddEvenResult;

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

이렇게 입력을 하면 홀수인지 짝수인지 판별이 된다.

 

 

이쁘게 만들어보기

function App() {
    const number = 5;

    const counterProps = {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
        e: 5,
    };
    return (
        <Container>
            <div>
                <MyHeader />
                <Counter {...counterProps} />
            </div>
        </Container>
    );
}

Counter.defaultProps = {
    initialValue: 0,
};
export default App;

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

export default Container;

이렇게 코드를 작성하면

이쁘게 만들어진다.