reactJS - 영화 웹 서비스 만들기(1)

** 노마드코더님의 강의를 보고 작성하였습니다! **

 

리액트

자바스크립트 기반이므로 프레임워크가 사라진다고 해도 자바스크립트 고수가 될 수 있음

패키지 종류 많고 문서 잘 정리되어 있고 빠르고 점점 더 많은 사람들이 사용하고 있음

대부분의 큰 회사들이 사용함

멋진 자바스크립트 개발자로 만들어줌

 

처음 시작

node js 설치

npm 설치

npx 설치

 

"create-react-app 프로젝트이름"

 

리액트 프로젝트 구성요소

 

리액트 동작 원리

자바스크립트와 함께 HTML안에 들어갈 element들을 생성하고, html에 밀어넣음!

import App from './App';

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

// App.js에서 반환한 element를 id root를 가진 애한테 넣어줄게!
// <App /> : component
// component를 통해 data를 보여줌, HTML을 반환하는 함수!

리액트를 빠르게 하는 이유

-> 처음부터 소스코드에 html을 넣지 않고, 리액트를 통해 html요소를 추가하거나 제거하기 때문!

빈 html를 로드하고, react가 만들어낸 element들을 추가해줌!!

 

// 오류 코드, 두 개의 component를 동시에 배치할 수 없음!
ReactDOM.render(<App /><Potato />, document.getElementById('root'));


// 올바른 사용
import React from 'react';
import Potato from './Potato';

function App() {
  return (
    <div className="App">
      hello~
      <Potato />
    </div>
  );
}

 하나의 component만을 rendering 할 수 있음!! => App만 렌더링 가능!

react application은 한 번에 하나의 component만 rendering할 수 있다!!

 

jsx?

javascript안의 html. component를 만들고 어떻게 사용하는지에 대한 것!

html + javascript