smilehyeon

내 뒤에 돌을 하루에 하나씩 던지면 어느샌가 산이 되어있을 거야 :)

노마드코드님의 유튜브를 즐겨보는 구독자로서, 무료로 풀어두신 클론코딩 강의를 들어보고자 한다:)
드디어 본격적인 react 시작…!!
오늘은 component와 props에 대해 알아볼 것이다🤩 🆂🆃🅰🆁🆃~~~~~
React로 영화 웹서비스 만들기
저번편은 여기로

Reusable components with JSX + Props🐾

Reusable

Potato.js 파일을 지우고 App.js에 새로 Potato를 작성해볼 것이다. ༼;´༎ຶ ۝ ༎ຶ༽

import React from "react";

function Potato(){
  return <h1>I Like Potato</h1>
}

function App() {
  return (
  <div>
    <h1>Hello!!!!</h1>
    <Potato />
  </div>);
}

export default App;

app.js를 이렇게 수정해주면 Potato 파일이 없어도 실행이 된다.
react는 재사용 가능한 component를 만들 수 있다.
이말인즉슨 우리가 만든 Potato component도 얼마든지 💥반복사용 가능💥이라는 거다.




component->component / children component

우선은 component 이름을 Food로 수정하고, 거기에 name을 설정한다.

function App() {
  return (
  <div>
    <h1>Hello!!!!</h1>
    <Food fav="kimchi" />
  </div>);
}

🌺이렇게요…!
name를 적은 코드는 HTML 식으로 아래와 같은 형식이라고 볼 수 있다.
실제로 굉장히 유사한 형태를 띄고 있다…!

<div class="kimchi"></div>

한마디로 우리가 한 건 food component에
fav라는 property의 value를 kimchi로 준 것!




jsx(HTML + JavaScript) + props

props란, Immutable Data 즉, 변하지 않는 데이터로,
상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 넘겨줄 때 사용한다.
자, 그럼 이제 저 props로 무엇을 할까??
react magic에서 전달한 props를, react가 가져가도록 할 것이당.

<Food 
    fav="kimchi" 
    something={true} 
    hehe = {["hi", "반가워요", 1, 2, 3, true]} />

food에 여러가지 props를 만들고, component로 전달해준다.

function Food(props){
  console.log(props);
  return <h1>I Like Potato</h1>
}

전달한 props를 console로 찍으면 아래와 같이 찍힌다.🔥🔥🔥
image1



function Food({fav}){
  return <h1>I Like {fav}</h1>
}

인자를 전달해줄 때는 이렇게도 보낼 수 있다. WOW…!🤭
props안의 fav의 value값이 보내진다. ㅎㅎ
화면에도 당연히 찍히겠지?!?!?!
image2

이번에는 여러개 만들어줄거다😎

<Food fav="kimchi" />
<Food fav="meat" />
<Food fav="coffee" />
<Food fav="cake" />

image3
바로 이렇게 jsx(HTML + JavaScript) + props의 힘으로 모두 재사용 가넝…!!
매우 간단하다!✌️
🔄component에 많은 props가 있고, 우리는 그걸 충분히 재활용할 수 있다.🔄

참고