리액트로 강의 자료실 개발하기 - 기초 셋팅 및 리액트에 대하여

이왕 개발하는거 요즘 프론트엔드에서 핫하다고 하는 리액트로 교수님 강의자료실을 만들어보려고 한다. 까먹을까봐 티스토리에 개발 방법 및 기록을 해두려고 한다.

 

지금부터 대부분의 내용은 노마드 코더의 리액트 강의를 따라가고 있다. 

 

 

VS code를 켜고 작업을 시작할 디렉토리로 이동한 다음, 터미널에 해당사항을 입력해준다. npx create-react-app 뒤에 오는 것은 프로젝트 이름이 될 것이다. 현재 강의 자료실을 개발하므로 이름은 적당히 lecture_repos로 했다.

npx create-react-app lecture_repos

cd lecture_repos
npm start

 

cd lecture_repos의 경우 새롭게 VS code에서 폴더를 여는 경우 생략해도 좋다.

 

저 코드를 터미널에서 실행하면

리액트가 돌아가고 있다는 멋진 창이 뜬다.

 

코드 공유를 위해 깃에 repos를 추가하는 과정이 강의에 있는데 이 내용은 생략하겠다... 깃 올려놓기만 하고 잘 안본다 ㅠㅠ

 

이 뒤에는 갑자기 노마드씨가 빠른 이해를 위해 코드를 슉슉 지우기 시작한다...! 그 부분은 강의를 보고 따라가는 게 나을 것 같아 링크를 남겨 놓아야 겠다. https://youtu.be/9yITc-uEjwI

 

해당 강의를 따라가고 나면, src 폴더 내에 App.js, index.js 두 파일만 남는다. 다 지워버린 나머지 파일을 import하는 코드도 App.js에서 삭제해준다.

 

import React from 'react';

function App() {
  return (
    <div> 
    // 여기에 자유롭게 입력
    Hello!   
    </div>
  );
}

export default App;

 

해당 코드를 저장하기만 하면, 기존의 리액트 창이 자동으로 새로고침 되어 div 안에 적혀있는 Hello! 만 떠있다.

 

코드를 저장하기만 해도 알아서 새로고침이 된다..!!

현재 리액트 창의 코드를 보면 아래와 같다.

<div id="root">
	<div> Hello! </div>
</div>

 

하지만 내 작업폴더 내의 index.html 코드를 보면 div "root"는 비어있다. 

 <div id="root"></div>

 

여기에서 React의 특징이 등장한다! React는, 내가 작성한 모든 요소를 생성하고, JS와 그것을 만들고, 이를 HTML로 밀어넣는다. React는 모든 react application을 위의 div 사이에 밀어넣는다! 이 일은 index.js 내의 아래 코드를 통해 볼 수 있다.

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';


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

React는 app.js component를 ElementId 내부에 넣으려고 한다! 저 'root'의 이름은 만약 변경을 희망한다면 두 코드 둘다 바꿔주어야 제대로 작동할 것이다. 

 

index.html, index.js 파일은 여전히 비어있지만 제대로 작동한다. 내가 작성한 hello!가 없는데도 말이다. 이 점이 react를 빠르게 해주는 부분이다. react는 소스코드에 처음부터 HTML을 넣지 않고, HTML에서 HTML을 추가하거나 제거하는 방법을 알고 있다. application이 이 파일을 로드하는 경우 빈 HTML 파일을 로드한 후, react가 component에 작성해두었던 HTML을 밀어넣는 것이다. 

 

소스코드에는 존재하지 않지만 제대로 작동한다! 이를 virtual DOM(virtual Document Object Model)이라고 한다. 존재하지 않지만, react가 이를 만들어주는 것이다. React는 정말 신기한 언어다...!

 

여기까지 리액트를 시작하고, 빠르게 작동하는 원리를 알아보았다. 뒷부분부터는 직접적인 강의 자료실 개발과 관련이 있을 것 같아 여기에서 게시물을 마무리하고자 한다. 

 

추가적으로 ReactJS에 대해 궁금증이 생긴다면 꼭 노마드 코더의 ReactJS 2019 강의를 듣길 바란다. 정말 기본부터 차근차근 설명해준다 :)