[React] props 알아보기

 

아래 내용은 스타트 위드 유데미에서 제공해준 강의를 토대로 리뷰를 작성한 것입니다.

 

https://www.udemy.com/course/winterlood-react-basic/

 

component 간에 prop을 전달하는 방법을 알아보겠습니다.

 

정말 쉽게 설명하면

 

만일 App.js에서 tomato.js안에 있는 soCoolGuy function을 import 한다고 하면

 

App. js 에서

 

import soCoolGuy from "tomato.js"

 

 

라고 적겠죠 그리고 밑에 내용 여러가지가 있고

import soCoolGuy from 'tomato.js';

const App = () => {
  const apple = 5;

  return (
    <div>
      <soCoolGuy />
    </div>
  );
};

 

이렇게 되있다면 soCoolGuy가 저장되어있는 tomato 에

apple을 전달 하려면

 

import soCoolGuy from 'tomato.js';

const App = () => {
  const apple = 5;

  return (
    <div>
      <soCoolGuy sexyGuy={apple} />
    </div>
  );
};

 

이런 식으로 sexyGuy는 그냥 제가 임의로 정의한 것이고

 

sexyGuy는 이제 전달받은 tomato.js에서 쓸 것입니다.

 

이러면 apple 값이 전달이 됩니다!.

 

그러면 이제 tomato.js를 봐야겠지요!

 

tomato.js

function soCoolGuy({sexyGuy}) {
  sexyGuy;
}

export default soCoolGuy;

 

여기서 중요한건 soCoolGuy에 parameter로 sexyGuy를 받아서 사용한다는 것입니다.

 

이제 tomato.js 에 soCoolGuy에 sexyGuy를 사용할 수 있는 것입니다.

 

이런식으로 props를 전달 받으면 됩니다!