09_리액트설명,작업환경 준비

이제부터 리액트가 무엇이고 어떤 것인지 알아보겠다.

저번 글에서 간단한 카운터 예제에서 dom을 사용해봤었다.

 

그렇다면 DOM이란 무엇일까?

DOM이란 각 HTML Element정보를 지닌 객체이다. 

 

 

const number = document.getElementById("number");
const increase = document.getElementById("increase");
const decrease = document.getElementById("decrease");

console.log(number.innerText);
console.log(increase.offsetTop);
console.log(decrease.id);

increase.onclick = () => {
  const current = parseInt(number.innerText, 10);
  number.innerText = current + 1;
  console.log("increase가 클릭됨");
};

decrease.onclick = () => {
  const current = parseInt(number.innerText, 10);
  number.innerText = current - 1;
  console.log("decrease가 클릭됨");
};

이러한 dom을 직접 바꾸는 방법은 프로젝트가 커지면 유지보수도 힘들고 업데이트를 어떻게 해야할지 정말 어려워진다.

 

그래서 Ember,Backbone,Angular JS등 많은 프레임 워크가 만들어졌는데, 이들은 자바스크립트의 값이 바뀌면 그에 해당하는 DOM의 속성또한 바뀌게 하여 업데이트를 가장 적게 해주는 방식이었다.

 

리액트는 여기서 발상의 전환을 하여, 상태가 바뀌었을때 DOM을 바꿔주는것이 아닌, 아예 모든걸 삭제하고 처음부터 시작하는 것이다. 물론 이런방식은 업데이트에 대해 생각을 안해도 되지만, 프로젝트 규모가 커진다면 속도가 느려진다는 단점이 있다. 그래서 리액트에선 Virtual DOM 즉 가상 돔을 사용하여 이를 해결하였다.

 

자바스크립트의 객체인 가상 DOM을 사용하여 먼저 랜더링하고, 비교 알고리즘을 통해 실제 DOM과 비교하여 차이가 있는 곳만 바꿔주는 형식으로 두마리 토끼를 모두 잡은 것이라 볼 수 있겠다.

 

자, 이러면 결국 우리가 생각할껀 UI가보여지는 즉 컴포넌트(UI조각)만 생각하면 되게 된다.

앞으로 이 컴포넌트에 대해 잘 배우게 될 것이다.

 

 

작업환경 준비

 

어떤 개발이든 가장 중요하고 첫번째로 해야할 작업환경 준비에 대해 알아보겠다.

 

node.js , vscode , yarn을 사용해야 한다.

 

yarn은 npm보다 훨씬 빨라서 한번 사용해보는것도 필요하다.

 

추가로 git for windows를 사용하여 bash 명령어를 쓸 수 있을 필요가 있다.

 

node.js

https://nodejs.org/

Node.js

yarn

https://yarnpkg.com/en/docs/install

Yarn

vscode

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

npm을 사용해 yarn 설치

$ npx create-react-app begin-react

그 후, 디렉토리를 하나 만든 후에 파일안에 들어가서 위 명령어를 실행시켜 새 리액트 프로젝트를 만들어준다.

 

vs코드

그 이후에 vs code를 들어가서 해당 디렉토리(파일)에 들어가보면 프로젝트가 잘 만들어졌음을 알 수 있다.

 

 

그 후에 다시 git bash창으로 돌아간 후

 

$ ls
begin-react/

 

ls명령어로 begin-react가 내 디렉토리에 있는지 확인한 후에 들어가준다.

 

yarn start

그 이후 위 명령어로 실행을 시켜주면

 

시작화면

위처럼 리액트 로고가 빙글빙글 돌아가는 화면을 볼 수 있다.

 

만약 yarn을 설치하지 않았다면 npm을 사용해도 무방하다.

 

 

기본파일의 이름을 바꾸면 내용도 변경해볼수 있다 ㅋㅋ

 

 

이제 아주간단한 리엑트 컴포넌트를 하나 만들어 보자.

 

먼저 src에 Hello.js파일을 하나 만들어준뒤 아래 코드를 작성한다.

 

import React from 'react';

function Hello() {
    return <div>안녕하세요</div>;
}


export default Hello; //hello 컴포넌트를 만들어서 내보내겠다

리액트를 사용하기 위해선 맨위에 선언을 해주어야 하고, Hello()란 컴포넌트를 만든 모습이다.

 

이를 사용하기 위해선 App.js로 들어가야 한다. 기본적으로 나와있는 불필요한 코드들은 우선 없애고 아래 코드를 입력해보자. 

 

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
      <Hello />
      <Hello />
    </div>
  );
}

export default App;

import를 사용하여 Hello를 불러오고 만든 컴포넌트를 3번 실행한 모습이다.

 

실행화면

 

해당 화면처럼 안녕하세요가 3번씩 나오게 된다.

 

 

위의 동작 방식을 생각해보면 이렇다.

 

Hello 컴포넌트를 만들어서 App 컴포넌트에 만들어준다.

 

이 App.js는 index.js에 묶여있다. (src파일안에 있다.)

 

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

위 파일이 index.js내용이다. 보면 root란 아이디를 찾아서 넣는 부분이 있는데 이건 public파일안의 index.html파일 안을 보면 id가 root인 부분이 있다.

 

밑줄처진 부분

즉, html의 저 부분에 우리가 작성한 부분이 html로 변환되어서 삽입되어진다고 생각하면 될 것 같다.