[React] Props 정리

컴포넌트에 파라미터를 전달할 때 HTML에서의 속성값을 쓰는 것처럼 전달한다. 이때 이 컴포넌트에 지정한 속성을 리액트에서 Props(프롭)라고 부른다. Props는 properties(속성)의 약자다.

컴포넌트에 속성을 지정하면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달된다.

쉽게 생각하면 컴포넌트의 prop들은 하나의 객체 안에 들어가는대 이때 prop의 이름은 객체의 key가 되고 속성의 값은 key에 할당된 값이 된다.

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

function App() {
  return (
    <Hello name="react" /> //name이 prop이다.
  );
}

export default App;

//Hello.js
import React from 'react';

function Hello(props) { //console에 props를 출력하면 객체가 출력된다.
  return <div>안녕하세요 {props.name}</div> //객체 값에 접근하는것과같이 key를 이용해 접근한다.
}

export default Hello;

위 코드를 보자면 name이 props의 키값이 되고 react가 props name의 키값이 된다.

let props = { // props객체 표현
 name: "react"
}

구조분해 문법과 같이 사용하면 좀더 간결하게 코드를 작성할 수 있다.

//Hello.js
import React from 'react';

function Hello({name}) { //name값을 구조분해
  return <div>안녕하세요 {name}</div> //name 변수로 바로 사용가능
}

export default Hello;

한 가지 특별한 prop이 존재하는데 바로 children 프롭이다. 보통 컴포넌트는 <컴포넌트 /> 이런식으로 작성한다 그런데 버튼 같은 태그를 사용할 때는 여는 태그(<button>)와 닫는 태그(</button>)의 형태로 작성할 때가 있다. 이 때 그 이 태그들 사이에 작성된 코드가 바로 이 children 값에 담기게 된다.

// App.js

import React from 'react';
import ChildComponent from './ChildComponent';

function App() {
  return (
    <div>
      <ChildComponent>Hello, world!</ChildComponent>
    </div>
  );
}

export default App;

// ChildComponent.js

import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      {props.children}
    </div>
  );
}

export default ChildComponent;

Reference

https://www.codeit.kr/learn/4652 - codeit props 정리하기

https://react.vlpt.us/basic/05-props.html - props 정리한 블로그