props를 통해 컴포넌트에게 값 전달하기

• props는 properties의 줄임말
• 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용함
  

컴포넌트에게 전달되는 props는 파라미터를 통하여 조회할 수 있다 props는 객체 형태로 전달되며, 만약 name값을 조회하고 싶다면 props.name을 조회하면 된다.

App.js

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

function App() {
  return (
    <Hello name="react" color="red"/>
  );
}

export default App;

Hello.js

import React from 'react';

function Hello(props) {
    console.log(props);
    return <div style={{
        color: props.color
    }}>안녕하세요{props.name}</div>;
}

export default Hello;

비구조 할당 또는 구조 분해 문법을 사용한다면 아래처럼 작성

function Hello({color, name}) {
    return <div style={{color}}>안녕하세요{name}</div>;
}

**props를 지정하지 않았을 때 기본적으로 사용할 값 설정**

App.js

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

function App() {
  return (
    <>
    <Hello name="react" color="red"/>
    <Hello color="pink"/>
    </>
  );
}

export default App;

Hello.js

import React from 'react';

function Hello({color, name}) {
    return <div style={{color}}>안녕하세요{name}</div>;
}

Hello.defaultProps = {
    name : '이름없음'
}

export default Hello;

중괄호가 두번들어가는것은 가장 위 {}는 jsx문법, 그리고 그 안에 {}는 객체리터럴

---

**props.children**

• 컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children을 조회
• 쓰이는 곳( App.js )에서 값을 정한다 = props(부모)
  쓰임 당하는 곳( Hello.js나 Wrapper.js )에서 값을 정한다 = children

App.js

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

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red"/>
      <Hello color="pink"/>
    </Wrapper>
  );
}

export default App;

Hello.js

import React from 'react';

function Hello({color, name}) {
    return <div style={{color}}>안녕하세요{name}</div>;
}

Hello.defaultProps = {
    name : '이름없음'
}

export default Hello;

Wrapper.js

import React from 'react';

function Wrapper({children}) {
    const style = {
        border : '2px solid black',
        padding: 16
    };

    return <div style={style}>{children}</div>
}

export default Wrapper;

---

이 글은 패스트캠퍼스 '프론트엔드(React)올인원패키지Online'을 수강하며 정리한 노트입니다.
https://fastcampus.co.kr/search?keyword=%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C