React 하위컴포넌트에 props전달하기 쉽게 알아보자

React에서 하위 컴포넌트에 props를 전달해보자!

 

Ap.js ( 상위 컴포넌트 코드)

import React from "react";
import Under from "./Under";

function Ap() {
  return (
    <div>
      hi
      <Under />
    </div>
  );
}

export default Ap;

 

 

우선 하위 컴포넌트를 import 해야됩니다. 

 

 

Under.js(하위 컴포넌트 코드)

import React from "react";

function Under(props) {
  return <div>{console.log(props)}</div>;
}

export default Under;

 

아무것도 보내지 않았을때는 결과값으로 

이렇게 빈 객체를 가져옵니다!

그러면 상위컴포넌트에서 하위컴포넌트로 props로 보내고 그것을 하위컴포넌트에서 받는법을 알아봅시다.

 

두개의 방법으로 받아보겠습니다!

Ap.js(상위컴포넌트)

import React from "react";
import Under from "./Under";

function Ap() {
  return (
    <div>
      hi
      <Under name="hi" color="red" />
    </div>
  );
}

export default Ap;

 

Under.js(하위 컴포넌트)

import React from "react";

function Under(props) {
  return <div>{console.log(props)}</div>;
}

export default Under;

 

이렇게하면 결과값으로 props객체에 들어오게됩니다.

두번째 방법으로는 ES6문법을 이용해서 비구조화할당하는것입니다.!

import React from "react";

function Under({ name, color }) {
  return <div>{console.log(name, color)}</div>;
}

export default Under;

`이렇게 하면 비구조화할당을통해 name에는 바로 hi라는 문자열이 들어가고 color에 red가들어갑니다.

비구조화할당은 [a,b] = [3,4] 라면 a=3,b=3과같은 역할을하게됩니다.

결과가 이렇게 바로보이는것을 알수있습니다 ㅎㅎ