[React.js] Props

Props란

: 프로퍼티(Properties)의 줄임말로 컴포넌트에 데이터를 전달하는 방법

: 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다.

 

 

Props 사용하기

 : 프로퍼티에 문자열을 전달할 때는 " ", 이 외의 값을 전달할 때는 { }를 사용한다.

 

1) 1개의 프로퍼티 넘기기

부모 App 컴포넌트에서 자식 Counter로 데이터를 넘겨준다.

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

function App() {
  return (
    <div>
      <Counter initialValue={5}/>
    </div>
  );
}

export default App;

 

부모에서 몇개를 보내든 객체 안에 담겨서 보내지므로 자식 컴포넌트에서 props를 꺼내 쓰려면 점표기법으로 접근해 사용이 가능하다.

//Counter.js
const Counter = (props) =>{
    console.log(props); //{"initialValue": 5}
    
    return (
        <div>
            <h2>초기값 : {props.initialValue}</h2>
        </div>
    )
};

export default Counter;

 

 

2) 2개 이상의 프로퍼티 넘기기

위 예제와 같이 하나하나 지정하여 전달도 가능하지만 가독성의 문제가 있기 때문에
부모에서 여러개를 넘기고 싶을 때는 객체로 만들어서 스프레드 연산자로 전달이 가능하다.

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

const counterProps = {
  a:1,
  b:2,
  initialValue:5
}

function App() {
  return (
    <div>
      <Counter {...counterProps}/>
      {/* <Counter a={1} b={2} initialValue={5}/> */}
    </div>
  );
}

export default App;

 

자식 컴포넌트에서는 비구조화할당으로 할당받을 수 있다.

//Counter.js
const Counter = ({initialValue}) =>{
    return (
        <div>
            <h2>초기값 : {initialValue}</h2>
        </div>
    )
};

export default Counter;

 

이때 전달하지 않은 props를 자식에서 사용하게 되면 에러가 발생하게 되는데
이를 방지하기 위해서 defaultProps기능을 사용해 에러를 방지할 수 있다.

//Counter.js
const Counter = ({c}) =>{

    return (
        <div>
            <h2>초기값 : {c}</h2>
        </div>
    )
};

Counter.defaultProps = {
    c: 3
};

export default Counter;

 

 

3) 동적 데이터 전달

: props는 정적인 데이터뿐만이 아니라 동적인 데이터도 전달할 수 있다.

 

Counter에서 state로 동적으로 값이 변하는 count를 자식 컴포넌트인 OddEvenResult에 props로 넘겨 홀수, 짝수를 판별하는 예제

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

export default OddEvenResult;

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

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

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

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

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

Counter.defaultProps = {
    initialValue: 0
};

export default Counter;

 

 

4) 컴포넌트 전달

 

별도 props를 지정하지 않아도 부모 App에서 Container의 자식요소들이 props로 전달되어 
Container 컴포넌트에서 children으로 받아 사용할 수 있다.

//App.js
import React from 'react';
import Container from './Container';

function App() {
  return (
    <Container>
        <div>
            <h2>HI</h2>
        </div>
    </Container>
  );
}

export default App;

 

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

export default Container;

 

 

참고

[1] 인프런 한입 크기로 잘라 먹는 리액트(React.js) : Props