create-react-app, props

react를 활용하여 영화 웹 서비스를 만들어 보려고한다.

먼저 npx create-react-app movie_app_2021명령어를 사용하여 CRA를 만들어준다.

npm은 현재 최신 버전의 노트 패키지를 데스크톱에 설치해 주는 도구이고,

npx는 최신 버전의 노드패키지를 사용하게 해주는 도구이다.

 

npx는 설치할 노드 패키지를 최신 버전으로 다운로드해서 설치한 다음 데스크톱에 남기지 않고 삭제한다.

한번 사용하고 말 노드 패키지를 굳이 데스크톱에 남길 필요는 없을 것이다.

 

git에 repository를 만들고 git remote add origin 주소를하여 연동해주자!!

 

이제 npm start를 하면  CRA가 실행이된다!!! 오우야

App.js에서 이렇게 html을 return하는 함수를 만든다. 기본적으로 이 것을 component라고 부른다.

react는 component와 함께 동작하며 data를 보여주게 한다. 

 

즉 component는 HTML을 반환하는 함수이다.

index.js에서 App(컴포넌트)을 가져와서 ReactDOM의 첫번재 인수에 적어주고 두번째 인수에는 index.html의 div#root를 적어주면 div#root 안에 hello가 적히게 된다. 이 부분이 component사용 형태이다. 예를들어

ReactDOM.render(App,document.getElementById('root'));

이런 형태를 쓰면 react가 동작하지 않는다.

 

 

react는 virtual이라 소스코드에는 아무것도 나오지 않지만

element를 보면

이렇게 root안에 App.js에서 적어놓았던 html요소가 잘 들어와있는 것을 알 수있다.

react가 엄청 빠른 이유는 바로 이러한 점이다. 실제 소스코드에는 없지만 가상의 요소를 만들어 보이게 해주기 때문이다.

 

이번엔 간단한 component를 하나 새로 만들어 보도록 하겠다. component를 작성할 때 마다 

import React from "react"

를 꼭 써주어야만 한다. 이것을 하지 않으면 react는 jsx가 있는 component를 사용하는 것을 이해하지 못한다.

jsx는 javascript안의 HTML이다. (HTML + Javascript)

이러한 component를 만들고 

App component안에 넣어주는 것도 가능하다.

 

react application은 한 번에 하나의 component만 rendering할 수 있다는 점이다.

<App /><Pizza /> 이렇게 안됨 그러나 현재 업데이트가 되어서 그런지 가능은 하다.

 

react는 component를 가져와서 browser가 이해할 수 있는 평범한 일반 HTML로 만들었다.

하나의 파일에서 다루어보겠다.

react의 매력은 재사용 가능한 component를 만들 수 있다는 점이다. 

component에서 component로 children component로 정보를 보내는 방법을 배울거다.

App에서 Food component로 정보를 보내고 그 다음에 Food component에서 그 정보를 어떻게 사용하는지에 대해서 알아보겠다.

 

Food에 fav라는 property를 주고 그의 value값으로는 kimchi를 주었다. 뒤에 여러 prop을 보낼 수 있다.

array = {[1,2,3,true]} 와같이 줄 수도 있다. 여기서 {}괄호안에 담아주어야 제대로 보내진다. string같은 경우는 {}생략 가능한 것 같다.

 

props를 주고 Food component에서는 argument로 받아올 수 있는데 여기에 props.fav이런식으로 담긴다. 따라서

ES6문법을 사용하여 {fav}로 kimchi의 value를 fav안에 집어 넣을 수 있다.

 

또 여기서 사용할 때에는 변수를 {}괄호 안에 적어주어야 사용이 가능하다. {fav}를 해주면

i like kimchi가 잘 나오는 것을 알 수 있다.