Props(properties)

react.js 를 공부하면서 짚고 넘어가야할 중요한 기능인 props에 대해 간략히 정리하는 글이다. 

react에서 props는 프로퍼티의 줄임말로 상위 컴포넌트에서 하위 컴포넌트에 값을 전달할때 사용하는 기능이다.

이전 게시글(State)에서 사용하던 Counter 코드를 예시로 활용해보려 한다.

 

1. Props 를 사용 및 추출

import MyHeader from './MyHeader';
import Counter  from './Counter'; 
import React from 'react';

function App() {

  const number = 5;
 
  return (
      <div>
        <MyHeader/>
        <Counter initialValue={number}/>
      </div>
  );
}

export default App;

위 예시코드는 상위 컴포넌트인 App 에서 하위 컴포넌트인 Counter 에게 props를 사용하여 값을 전달하는 코드이다.

Counter 컴포넌트에 initalValue 프로퍼티로 number 변수에 담긴 5를 넣어주었다.

import React, {useState} from 'react';

const Counter = (props) => {

    console.log(props)// {initalValue: 5}
    const [count, setCount] = useState(props.initialValue);

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

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

export default Counter;

하위 컴포넌트인 Counter에서 상위컴포넌트인 App에서 전달받은 값을 props라는 파라미터로 담아 사용이 가능한데 props를 콘솔로 찍어보면 {initalValue: 5} 로 넘어오는 것을 확인할 수 있다. 추출하여 사용하기 위해 점표기법으로 접근하여 사용할 수 있다.

 

2. 여러개의 Props 사용 및 defaultProps

props는 한개이상으로 여러개를 사용할수 도 있다.

import MyHeader from './MyHeader';
import Counter  from './Counter'; 
import React from 'react';

function App() {

  const counterProps = {
    a: 1,
    b: 2, 
    c: 3,
    d: 4,
    e: 5,
    initialValue : 5
  }
 
  return (
      <div>
        <MyHeader/>
        <Counter {...counterProps}/> // <Counter a = {1} b = {2} c = {3} d = {4} e= {5} initialValue = {5}/> 열거하여서도 여러개의 프로퍼티를 사용가능
      </div>
  );
}

export default App;

import React, {useState} from 'react';

const Counter = ({initialValue}) => { // 비구조화 할당을 사용하여 initalValue를 바로 사용
    console.log(initialValue);
    const [count, setCount] = useState(initialValue);

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

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

Counter.defaultProps = { // initialValue가 정상적으로 넘어오지 못했을때 초기값을 설정
    initialValue: 0
}
export default Counter;

 

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

export default OddEvenResult;

위와 같이 객체에 여러 프로퍼티를 넣어서 스프레드 연산자를 사용하여 한번에 넘겨줄 수 도 있다.  Counter에서는 비구조화 할당을 사용하여 점표기법을 사용하지 않고 바로 원하는 프로퍼티값을 사용가능하다. defaultProps를 사용하여 특정 프로퍼티의 초기값을 설정할 수 있는데 이는 상위컴포넌트로부터 정상적으로 값이 넘어오지 않았을 때 효율적으로 사용이 가능할 것 같다. 

 

State로 동적으로 바뀌는 값을 props로 넘겨줄수도 있는데 OddEvenResult 컴포넌트에서 console.log를 찍어서 플러스 버튼과 마이너스 버튼을 눌러보면 State로 count값이 바뀔때마다 OddEvenResult로 찍어놓은 console.log가 찍히는 걸 확인할 수 있다.

즉, 자신의 관리하는 State가 바뀌면 리렌더가 되고 상위컴포넌트가 리렌더가 되면 하위 컴포넌트도 리렌더가 된다는 것을 알 수 있다. 

 

3. 컴포넌트를 Props로 전달

마지막으로 컴포넌트를 props로 전달도 가능하다.

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

export default Container;

import MyHeader from './MyHeader';
import Counter  from './Counter'; 
import React from 'react';
import Container from './Container';

function App() {

  const number = 5;

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

export default App;

[실행결과]

Container 컴포넌트는 children 이라는 컴포넌트를 Props를 전달받아 children 컴포넌트의 상위 div에 적용되어 있는 css를 적용시켰다. 실행결과를 확인해보면 정상적으로 css가 적용된 것을 확인해 볼 수 있다.