React Basics

유데미 강의를 듣고 복습차 정리해놓은 내용이다.

이번 기회에 리액트 강의 다 듣고 개념을 제대로 잡고 프로젝트로 들어가봐야겠다.

매번 절반까지만 듣고 말았지 뭐야 ... 

 

React => Component

가장 핵심 개념이다. 리액트는 재사용성을 고려하여 모든 요소를 각각의 component로 쪼갠 뒤 갖다 쓰는 방식으로 재사용성을 높였다. 불필요한 코드를 반복할 필요도 없으며, 각각의 기능을 쪼개 하나의 component가 각각 하나의 기능만을 수행하게 하여 관리하기 수월하게 만들었다.

 

component는 HTML + JS (+ CSS?)로 이루어진다. 

 

Create React App

쉽고 빠르게 리액트 프로젝트를 시작할 수 있는 툴이다. 그나저나 오랜만에 cra 썼더니 오래된 버전이라고 지우고 다시 설치하라고 떴다... 얌전히 npm uninstall -g create-react-app 해주고 npm install -g create-react-app 해줬다. 

 

React project 뜯어보기

리액트는 어쨌거나 JS 파일이다. 그러나 cra를 통해 생성된 index.js 파일을 뜯어보면 기존 js 문법에서는 허용되지 않는 부분들을 볼 수 있다. 가령 css 파일을 import 한다던지? <App /> 라던지

React는 브라우저로 전달해주기 전에 코드를 브라우저가 이해할 수 있게 잘~ 통역해서 보내준다. 

 

index.js 파일이 가장 먼저 실행되는 파일인데 한번 더 자세히 살펴보자. 

import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

react, react-dom 패키지를 통해 리액트 라이브러리가 실행된다. ReactDOM 패키지는 어떤 React dom object를 export를 해주고 그 요소를 index.js로 가져오고(import) 있다. 가져온 ReactDOM 객체의 createRoot 함수를 실행하는데 리액트로 개발하는 요소의 가장 root단에 존재하는 요소이다. 이 리액트 UI가 어디에 실행될지, index.html 파일 내에서 찾아볼 수 있다. 리액트는 single page application이므로, public 폴더 내의 index.html 파일 내에 <div id="root"> </div> 영역 내에 우리의 리액트 코드가 삽입될 것이다. 

해당 객체를 root라는 이름으로 저장한 뒤, 해당 div 내에 어떤 요소가 렌더링되어야할지 전달한다. 현재 코드 상으로는 < App /> 요소가 전달되고 있다. 이 App이라는 요소가 어디서 왔는지 살펴봤더니 App.js 파일에서 export된 요소로 보인다. 하지만 문법이 생소하다. 이 문법은 일반적인 JS 문법은 아니며, JSX라는 JS를 조금 더 확장한 문법이다.

 

App은 하나의 component이다. App.js 파일을 살펴보자.

function App() {
  return (
    <div>
      <h2>Let's get started!</h2>
    </div>
  );
}

export default App;

 

App.js는 하나의 함수이며 무언가를 리턴하고 있다. HTML 코드를 JS파일 내에서 리턴하는 방식은 일반적인 JS 에서 보지 못했던 JSX 문법이다. 

 

JSX란?

JSX란 JavaScript에 XML을 추가한 것으로, 브라우저로 전달되기 전에 브라우저가 이해하기 쉽게 한번 변환되어 전달된다. 실제로 우리의 react 프로젝트를 개발자도구에서 살펴보면 우리가 작성한 적 없는 코드들을 볼 수 있다. 

 

How React Works

기존 JS는 Id나 class이름이나 document에서 요소를 가져온 뒤 createElement로 요소를 추가하고, 추가된 요소를 append해주는 방식으로 html코드를 삽입했다. 이렇게 하나하나 어떻게 실행해야될지 명령하는 언어를 imperative(명령형) 언어라고 한다. 하지만 이 방식은 요소를 추가하거나 지울 때마다 꽤 수고롭다. 그에 비해 리액트는 일반 html코드를 적듯이 적어주기만 하면 된다. 리액트 컴포넌트는 custom html 요소나 마찬가지다.