props를 통해 값 전달하기

props의 의미: property의 줄임말 

 

1) Hello 라는 컴포넌트에 값을 주기 위해 값을 작성

//APP.js

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

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red"/> 
      {/* hello 컴포넌트에 react라는 name을 작성, 그다음 Hello 컴포넌트를 작성 */}
      <Hello color="pink" />
    </Wrapper>
  )
}

 

2) name 컴포넌트에서 작성한 값들을 사용하고 싶다면 함수에서 props라는 값을 가져온다.

props라는 parameter는 넣어준 값들이 객체 형태로 들어가있다 

 

//Hello.js

import React from 'react';

function Hello(props){ // name이라는 값을 사용하고 싶다면 함수에서 props라는 값을 가져온다, props라는 파라미터는 넣어준 값들이 객체형태로 들어가있다.    
return <div style={{ //중괄호가 2개인 이유: 하나는 자바스크립트 값(객체), 하나는 객체를 감싸고, 
    color:props.color
    }}>안녕하세요{props.name}</div>; //react라는 값을 컴포넌트에서 보여주고 싶다하면 js에서 rendering하고싶으면 {} 을 사용
}

 

앞서 작성한 react라는 값을 컴포넌트에서 보여주고 싶다하면 rendering하고 싶을 때는 {props.속성이름} 

 

3) 비구조화 할당을 통해 Hello 컴포넌트는 props라는 값을 parameter를 통해 받을 수 잇는데 비구조화 할당을 통해 이같이 줄일 수 있다. 

 

 

import React from 'react';

function Hello({color, name}){ // Hello 컴포넌트는 props라는 값을 파라미터를 통해 받을수 있는데 비구조화 할당을 통해 바로 추출할 수 있다.
    return <div style={{
        color
    }}>안녕하세요 {name}</div>
}