Reusable Components with JSX + Props

이제 우리가 react가 어떻게 동작하는지에 대해 이야기를 해보자.

react가 무엇이냐? react는 당신이 거기에 쓰는 모든 요소를 생성한다는 것임. 자바스크립트와 함께 그것들을 만들고 

그것들은 HTML으로 밀어 넣어   <div id="root"></div> 이 사이에 모든 요소들을 밀어 넣어버려 바로 리액트가 말이야. 믿지 못하겠다면 index.js를 봐봐 그러면 reactDOM render라고 하는 부분을 볼 수 있어. 이 녀석은 application(<App />)을 render하려고 하는데 document.getElementByID("root")가 보이지 이걸 통해서 넣어버리는거야.

react는 app.js component를 ElementByID 내부에 넣는거야. 너가 localhost:3000 페이지의 소스코드를 보면 너는 어디에서도 우리가 App.js와 같은 component에서 작성한 내용을 보지 못할거야. 소스코드에서 우리가 보는 것은 기본적으로 빈 index.html 파일이야 우리가 작성한 hello world같은 내용이 없는 그냥 빈 index.html파일. 그런데말이야, 이게 바로 react를 빠르게 하는 이유야. react는 소스코드에 처음부터 HTML을 넣지 않고, HTML에서 HTML을 추가하거나 제거하는 법을 알고 있어(without HTML to add HTML or delete HTML). 그래서 application(<App />)이 이것을 로드할 때, 텅 빈 HTML을 로드하게되고 그런 다음에 react가 HTML을 밀어넣게돼, 너의 component에 작성해뒀던 것들 말이야.  이게 react가 동작하는 방식이야. virtual DOM이라는게 있어. virtual document object model, 버츄얼! 존재하지 않는다는 말이야. 보다시피 소스코드에는 존재하지 않아, react가 그걸 만들어내는거야. 그래서 우리가 Acpp.js component에 <h1>Hello!!</h1>을 추가하면 react는 그걸 만들고 이야기했듯 소스코드에는 <h1Hello!!/h1>가 보이지 않을거야.

하지만 우리는 Hello!! 를 볼 수 있고(굉장히 빠른 속도로) 하지만 소스코드에는 보이지 않지. 알겠지? 이게 바로 react의 일이야! 이것이 react가 빠른 이유야. 왜냐면 virtual이고 존재하지 않거든  

 

component는 HTML을 반환하는 함수

우리는 function, application을 가지고 잇고 이것은 HTML을 반환할거야

 

<App /> 이부분이 우리가  이 부분이 우리가 component를 사용하고자 할 때, component의 형태임.

 

react는 component를 사용해서 HTML처럼 작성하려는 경우에 필요함. javascript와 HTML 사이의 이러한 조합을 jsx라고 부름.  이건 react에서 나온 매우 custom한 유일한 개념임. 즉, react가 소개한 유일한 개념임. 나머지 개념은 js에서 배울 수 있음. 예를 들어 변수, 클래스, 배열, maps, return 모두 다 js에서 하는 것들임  하지만 jsx는 react에 특화된 개념 중 하나인데, react에서만 쓰게됨.

 

그 말인즉슨 이러한 jsx에 대한 지식은 우리가 다른 분야(예를 들어, vue, Angular 등등...)로 가면 우릴 도울 수없다는것임. 하지만 react에 있는다면 jsx는 javascript위에서 배워야 할 유일한 것임.

 

아무튼 저게 component를 사용하는 방법임. 어떻게 component를 만들 수 있을까? 우리만의 component를 만드는 것은 매우 간단함.

 

src안에 새로운 파일을 만들거야.

 

Potato.jsx라는 새로운 component를만들자, 그리고 component를 작성할 대마다 import React from "react"를 써줘야만 해. 이것을 하지않으면 react는 여기에 jsx가 있는 component를 사용하는 것을 이해하지 못함.

 

 react application이 하나의 component만을 rendering해야하기 때문이다. 그리고 그 component가 App 이야.

 

따라서 Potato를 app옆에 두는 대신에 app안에 넣어보자

 

App 내부에 import Potato from "./Potato"를 입력하자. 이 점과 슬레시의 의미는 같은 directory라는 말이다. Potato와 App.js는 같은 directory에 있잖아 맞지? 그게 유일한 이유야

 

jsx는 javascript안의 HTML이야. 우리는 만들고 싶은 만큼 component를 만들 수 있고, 많은 component를 return할 수 있다. 우리가 기억해야할 것은 react application은 한 번에 하나의 component만 rendering할 수 있다는 점이다. 따라서 모든것은 Application안에(<App />)안에 들어가야만 해. 

 

application(<App />)안에서 많은 component를 넣을 수있다. 그리고 이러한 component안에 더 많은 conponent를 import할 수 있다. 그리고 이러한 것들로 인해서 아름답고 동적인 application을 만들 수 있을 것이다.

 

 jsx에서 두번째로 이해해야 하는 것은, component에 정보를 보낼 수 있다는 점이다. react가 멋진 이유는 재사용 가능한 component를 만들 수 있다는 점이다. 이 말은 component를 계속해서 반복해서 사용할 수 있는 것임.

 

자 이제 component에서 component로, children component로 정보를 보내는 방법을 배워보자

 

이 application(<App />)에서 food component로 정보를 보내고 그런 다음에 food component에서 그 정보를 어떻게 사용하는지에 대해서 얘기해보자.

 

<Food name="kimchi" />

이렇게 써봐바

이게 굉장히 HTML하고 닮았다는 걸 알거야. 예를 들어 HTML에는 <div class="hello">, 맞지? 

지금 이건 jsx야. 그래서 기본적으로 어떤 것의 이름 속성을 따옴표와 텍스트를 쓰는 것과 같은 방식임. 매우매우 쉬워.

자 이게 food component에 정보를 보내는 방법이야. 자 보자, 만약 우리가 refresh를 했을 때 아무 변화가 없다면, 정보를 보냈지만, 그 정보를 사용하지 않았기 때문이야.   자 이제 이것은 배워야하고 알아야하는 부분인데, 첫 react 개념 중 하나야. 우리가 방금 한 일은 food component에 kimchi라는 value로 prop name을 줬어. 알겠어? 바로 <Food name="kimchi" /> 이부분 말이야. 여기서 우리가 한 것은 food component에 name이라는 이름의 property(=prop)를 kimchi라는 value로 준거임.  

 

자 이제 어떻게 이 props를 사용할까(이제 이것들을 props라고 부를게) ?

우리는 react magic을 이용해서 props를 사용할거야, react magic에서 react는 우리가 전달한 props를 가져가는 일을 할거야. 

 

 예를 들어서, something={true} 라고 할 수 있어. 즉 string만 넣을 필요 없고, boolean도 넣을 수 있고 또는 niyack에 hello를 array로 그리고 1, 2, 3, 4, true로 보낼 수도 있어 

원하는 건 뭐든지 할 수 있고 father component에서 children component로 원하는 많은 props를 보낼 수 있어 알겠어?  react magic이라는 것은 react가 이걸 보게 되고 이를 다음과 같이 되어지게 할거야. 누군가가 fooc component로 정보를 보내려고 하면, react는 이 모든 속성(name="kimchi" something={true} niyack={["hello", 1, 2, 3, 4, true]} 등등)을 가져올거야. 그리고 food function component의 argument(인자)로 그것들을 넣을거야 바로 다음과 같이 말이야

믿지 못하겠다면, console.log(props)를 입력해봐봐

그치? 이 object는 component로 전달 된 모든 props들이야. 즉 props라고 불리는 한 argument의 내부야. 이게 바로 react magic! 이러한 점들이 우리가 react magic을 사용하기 위해 create-react-app이 필요한 이유야.   

 

자 그럼 다시 something이나 niyak같은 이상한 언어들을 다 지워보고 이렇게 해보자

위에 console.log(props)를 console.log(props.name)으로 바꿔봐! 그럼 

이렇게 kimchi 가 나오지. 자 이젠 인수에 object를 열어서 object에서 name을 꺼낼거야. 알다시피 props object 내부에는, name이 있어. function Food({ name }) 이런식으로 해보자구. 이게 내가 내부에서 얻는 방법임. props.name을 쓰는 것과 {} 내부에 name을 쓰는 것은 같은거야 

이걸 이용해서 이렇게 코드를 짜보자구~

I like Food라고 하는 대신에 Food를 원하는 무엇이든지로 바꾸자 알겠지? 자 이걸 복사해서 이렇게 {name}을 하고 저장하자. 이제 와서 새로고침을 해보면 보다시피 이미 굉장히 빨리 동작했어 I like kimchi. 얼마나 멋져!!

 

이제 다른 component를 만들어보자. 바로 이렇게 말이야!

그리고 새로고침을 해볼까?

자 이제 우리는 동적 데이터가 있는 component가 있어. 보다시피 우리는 jsx + props의 힘으로 모두 재사용할 수 있어 맞지? 

 

jsx는 단지 HTML + Javascript야. 맞지?

component는 대문자로 시작해야하고, 우리의 component로 정보를 보낼 수 있어.

father가 childeren에게 어떻게 data를 보낼까? app이 어떻게 food에게 props를 사용해서 data를 보낼까?

props란 이렇게 뭐든지 component에 넣게 되는 것들이야. 이게 props야 알겠지? props는 어디로 갈까? argument로 가, food의 첫번쨰 argument, 알겠지? 따라서 우리는 props.name을 적을 수 있고, 이것은 물론 동작할거야