React 클론 코딩 (노마드 - 영화 웹 서비스 만들기) 1

React

• 소스코드에 처음부터 HTML을 넣지 않고, HTML에서 HTML을 추가하거나 제거하는 법을 React는 알고 있다.

  Hello라는 페이지를 만들어도 html에서는 발견할 수 없다.
  (ex. application이 빈 html을 로드하고 react가 component에 작성했던 것을 밀어 넣는다.)

npm/npx?

• npm (관리) : Node Package Manager의 약자로 node.js에서 사용하는 모듈들을 패키지로 만들어 npm을 통하여 관리하고 배포
• npx (실행) : npm을 좀 더 편하게 사용하기 위해서 npm에서 제공해주는 하나의 도구

Component?

• 독립적인 단위의 소프트웨어 모듈을 말한다. 즉 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이다. 리액트는 웹에서 쓰는 각 요소들을 컴포넌트로 만들 수 있게 해 기존의 UI를 다른 화면에서 다시 쓰거나, 다른 프로젝트에서 다시 쓸 수 있도록 하는 장점(높은 재사용성)을 가진다.
• html을 반환하는 함수
• 사용자 정의 컴포넌트는 반드시 대문자로 시작해야한다. (ex. )

import React from 'react';

component를 작성할 때마다 써줘야한다.
작성하지 않으면 react는 여기에 jsx가 있는 component를 사용하는 것을 이해하지 못한다.

jsx?

• react에서의 유일한 개념
• js와 html 사이의 조합 / js안의 html
• component를 만들고 어떻게 사용하는지에 대한 것

<App />

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

index.js에서 이런식으로 react application은 한 번에 하나의 component만 rendering할 수 있다고 했는데,

ReactDOM.render(
  <React.StrictMode>
    <App /><Potato />
  </React.StrictMode>,
  document.getElementById('root')
);

현재는 이런식으로도 가능한 듯. (App 클래스를 벗어나서 태그가 생긴다)

현재 클론 코딩으로만 진행하다 보니 기본 개념이 많이 부족해서 이 부분에 대한 강의를 추가로 들어야할 것 같다