🌱 props

properties의 약자로 컴포넌트에게 어떠한 값을 전달하는 것을 props라 말한다.

<app.js>

import React from 'react';
import Hello from './hello';
export default function App () {
  return (
    <Hello name="anne" />
  );
}

<hello.js>

import React from 'react';
export default function Hello (props) {
  return (
    <div>
      안녕하세요 {props.name}
    </div>
  );
}

🌿 여러개의 props 비구조화 할당

props 내부의 값을 조회 할 때마다 props를 입력하고 있는데 함수의 파라미터에서 비구조화 할당 문법을 사용하면 조금 더 코드를 간결하게 작성할 수 있다.

<app.js>

import React from 'react';
import Hello from './hello';
export default function App () {
  return (
    <Hello name="anne" color="red" />
  );
}

<hello.js>

import React from 'react';
export default function Hello (props) {
  return (
    <div style={{ color: props.color }}>
      안녕하세요 {props.name}
    </div>
  );
}

<hello.js>

import React from 'react';
export default function Hello ({ color, name }) {
  return (
    <div style={{ color }}>안녕하세요 {name}</div>
  );
}

☘️ defaultProps

컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값을 설정하면 된다.

<hello.js>

import React from 'react';
function Hello (name) {
  return <div>안녕하세요 {name}</div>
}
Hello.defaultProps = {
  name: '이름없음'
}
export default Hello;

<app.js>

import React from 'react';
import Hello from './component/hello';
function App() {
  return (
    <>
      <Hello name="anne"/>
      <Hello />
    </>
  );
}
export default App;

🍀 props.children

컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐 props.children을 사용한다.

<wrapper.js>

import React from 'react';
export default function Wrapper ({ children }) {
  const style = {
    border: '2px dotted pink',
  };
  return (
    <div style={style}>
      {children}
    </div>
  );
}

<hello.js>

import React from 'react';
export default function Hello(props) {
  return (
    <div>안녕하세요 {props.name}</div>
    );
}

<app.js>

import React from 'react';
import Hello from './components/hello';
import Wrapper from './components/wrapper';
export default function App () {
  return (
    <Wrapper>
      <Hello name="anne" />
      <Hello />
    </Wrapper>
  );
}

🌳 결론!

• props는 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용
• 여러개의 props는 비구조화 할당으로 간결하게 작성
• defaultProps로 기본값 설정가능
• props.children는 컴포넌트 태그 사이에 넣은 값을 조회