React - (1) 프로젝트 만드는 법, 기본 동작 원리

리액트는 node.js, npm, npx 깔려 있으면 프로젝트 만들고 서버 생성해보고 쉽게할 수 있음

node.js는 버전 12 이상. npm, npx는 버전 6 이상.

 

cmd창에서 원하는 폴더로 이동하고 다음과 같이 입력하면 해당 폴더에 react 프로젝트를 생성할 수 있음

 

npx create-react-app 이름 

 

 

그리고 npx로 서버 실행해보려면 다음과 같이 입력함(끌 때는 해당 콘솔창에서 ctrl + c로 끌 수 있음)

 

npm start

 

---

 

component: HTML을 반환하는 함수

jsx: HTML + javascript

 

리액트는 index.html 소스에 컴포넌트를 사용해서 동적으로 html을 삽입함.

index.js 에서 DOM 쿼리를 이용해 삽입할 div를 찾아서 삽입하는 것.

index.js를 최소한으로 압축한 내용은 아래와 같음.

 

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("potato"));

 

DOM 쿼리로 가져온 ID는 html 소스코드에 따라 달라질 수 있음.

ReactDOM.render 는 컴포넌트를 하나밖에 받을 수 없다.

그래서 App컴포넌트에 자식 컴포넌트로 여러 개 만들어가면서 html 삽입해가는 방식으로 리액트가 구성된다.

 

 

---

 

props: component에 전달할 수 있는 오브젝트

아래처럼 전달 가능

 

      <Food fav="kimchi" />
      <Food fav="ramen" />

 

이러면 이제 props.fav 에 kimchi가 들어가거나

props.fav 에 gogi가 들어가는 것

 

 

해당 component의 인자로 이 props를 받아서 쓰면 됨.

 

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

 

아니면 props에 있는 특정 값만 가져오려면

 

function Food({ fav }) {
  console.log(fav);
  return <h1>I like {fav}</h1>;
}