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

props 란?

props = properties

컴포넌트 사용할 때 특정 값 전달 해 주고 싶을때 사용한다.

Hello Component에 name이라는 값을 전달 해 주고 싶다면?

props에는 우리가 넣어 준 값들이 객체 형태로 들어 가 있다.

App.js에서

function App() {
  
  return (
    //Hello Component
    <Hello name="react"/>
  )
}

Hello.js는 이렇고

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

// Hello 라는 component를 return 해 주겠다. 
// 

props에는 우리가 넣어 준 값들이 객체 형태로 들어 가 있기 때문에
name = "react" 가 console창에 나타난다.

js 의 변수를 사용 해 주고 싶으면 {} 괄호로 감싸주고
props.name 이렇게 해서 props 객체 안의 값 사용한다.

import React from 'react';


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

// Hello 라는 component를 return 해 주겠다. 
// 
export default Hello;

props를 구조 분해 해서 color랑 name값을 미리 추출 해 줄 수 있다.

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

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

color:color 에서 :color 생략 가능

Default Props

• props설정하지 않았을때 기본적으로 설정하고 싶은값 어떻게 하면 좋을지

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


//props가 지정되지 않았을때 기본값을 설정 해주고 싶다면?
Hello.defaultProps = {
    name: '이름없음'
};

이게 바로 default props다.

Props Children

//이 방법으로도 불러 올 수 있고 
import Wrapper from './Wrapper'

//<Wrapper> 해 주면 자동으로 import 된다. 
<Wrapper>
      <Hello name="react" color="red"/>
      <Hello  color="pink"/>
</Wrapper>

Wrapper Component로 감싸 주니까 Wrapper 컴포넌트에 가려서 Hello들이 나오지 않는데
Wrapper안에 Hello를 표현 해주고 싶을때 사용하는게 Props Children이다.

Wrapper에게 있어서는 children이라는 props가 자식 Component를 받아 온 것이다.
name, color가 props고 이 값을 파라미터를 이용하여 받아올 수 있고 기본값 설정하기 위해서는 defaultprops를 사용하면 된다..

태그와 태그 사이에 넣는 내용을 의미 하는게 children이다.