[React] React 기본 - CRA

소마 과정을 진행하며 리액트를 사용할 것 같다. 아직 리액트가 익숙하지 않아 예비 과정 동안 React로 원하는 걸 구현할 수 있을 정도로만 학습하고, 이후 본 과정에서 본격적으로 사용하며 깊이 있게 적용 및 학습할 예정이다. 1달 반 동안 매일매일 학습하며 프로젝트를 진행해보자

 

 

React란?

리액트는 JS가 처리해야할 이벤트가 다양해지고, DOM도 다양해지게 되면 업데이트를 하는 규칙도 많이 복잡한 기존 개발 방법을 완전히 바꾸는 프레임워크이다. 리액트는 어떠한 상태가 바뀌었을 때, DOM을 업데이트하는 게 아니라 아예 다 날리고, 처음부터 모든 걸 새로 만들어서 보여준다는 아이디어에서 개발되었다.

 

다 날리고 새로 만들면 느리지 않을까? 

리액트는 Virtual DOM을 이용해 속도를 해결한다. 메모리에 존재하는 가상의 DOM 이며 JavaScript 객체이므로 속도가 훨씬 빠르다!

업데이트가 필요한 곳의 UI를 Virtual DOM을 이용해 렌더링한다. 

 

🔥 리액트는 상태 변화시 어떻게 DOM을 업데이트 하지?! 에 대한 고민 없이 빠른 성능으로 새로 만들어 버린다!

 

 

CRA

npx create-react-app (프로젝트 네임)

CRA로 프로젝트를 생성할 수 있다.

 

 

처음에 위 디렉토리 처럼 구성되어있을 것이다.

우리는 기존 구성을 사용하지 않을 것이므로 아래와 같이 필요 없는 건 삭제해주자

// App.js

function App() {
  return <div className='App'>
  	<h1>Hello REACT!</h1>
  </div>;
}

export default App;

// index.js
// react에서 화면에 render하는 파일
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

src폴더의 App.js, index.js를 일단 위와 같이 수정해주자.(css파일 및 icon 등이 연동되어 있어 삭제했으니 연동 해제)

index.js에서 ReactDOM을 랜더링 한다는 걸 보니 무언가를 화면을 띄어주는 것이고, StrictMode로 App 컴포넌트를 id값이 root인 곳에 랜더링 한다는 것 같다.

 

여기서 잠깐 리액트 컴포넌트에 대해 알아보자.

리액트는 style, view 등 컴포넌트를 만들어 import, export를 통해 module화 하여 조립해서 만든다.

이는 리액트의 강력한 장점이며, 가독성 및 유지보수가 향상된다.

또한 🔥컴포넌트의 첫 문자는 꼭 대문자여야 한다!

 

다시 돌아와서 id값이 root인 태그가 어디있을까?

public의 index.html 파일로 가보자.

31번째 줄이 id값이 root인 div 태그가 보인다. 저 부분에 render를 해서 화면에 표시해주는 것이다.

 

원리를 대충 알았으니 터미널에서 해당 디렉터리로 이동 후

npm run start

를 작성해보자!

 

그럼 이렇게 반겨줄 것이다. 다음은 JSX문법과 useState, Form 제어 등을 학습해보자!