좌충우돌 IT이야기

🐱‍🏍 리액트(React) Note

많은 사람들이 리액트를 프레임워크로 알고있지만, 라이브러리이다.

🔨 프레임워크(Framework)

프레임워크는 '소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합'이다.

Application 개발 시 필수적인 코드, 알고리즘, 데이터베이스 연동 등 과 같은 기능들을 위해 어느정도 구조를 제공해준다.

🔨 라이브러리(Library)

라이브러리는 '특정 기능에 대한 도구나 함수들을 모은 집합'이다. 즉, 프로그래머가 개발하는데 필요한 것들을 모아둔 것이다.

다시, 본론으로 돌아오자면 리액트는 컴포넌트로 이루어져 있어 재사용성이 높다는 장점을 가지고 있다.

또한, 기존의 자바스크립트에서 사용하던 Real Dom과 달리 리액트는 Virtual Dom을 사용하기 때문에 화면 렌더링 발생 시 화면 깜박거림이 발생하지 않는다. 참 트루.

🔨 Real Dom

화면 전체를 다시 LOAD 시킨다.

🔨 Virtual Dom

처음에 Snapshot을 찍어 변경 된 부분과 비교 후 해당 부분만 update 한다.

리액트를 생성하려면 터미널에서 npx create-react-app 이라는 명령어를 작성해주면된다. 이전에는 npm install -g create-react-app 명령어를 사용해서 설치했다고 한다. -g 옵션은 global의 약어로 document에 설치하여 디스크의 용량을 낭비한다는 단점이 존재했다. 이를 해결하고자 npx가 등장했다. npx를 사용함으로서 디스크의 용량 뿐 아니라 사용할 때 마다 최신 버전을 사용할 수 있게 되었다.

리액트를 사용하다 보면 바벨(Babel)과 웹팩(Webpack)이라는 단어를 접할 수 있다. 바벨(Bable)은 es6 문법을 구형 환경에서도 쓸 수있게 변환해주는 트렌스파일러(transpiler)이다. 웹팩(Webpack)은 모듈을 하나의 파일로 묶어주는 모듈 번들러이다. 예를 들어 이미지를 사용하고 싶으면 클라이언트의 src 폴더 안에 경로가 설정되어 있어야 웹팩이 이미지를 모듈로 인식한다.

리액트를 실행하면 기본적으로 App.js 파일 라우터 역할을 수행 한다. 여기서 원하는 파일로 이동하기 위해선 react-router-dom이 필요하다. react-router-dom을 호출하는 코드는 아래와 같다. 단, 먼저 npm을 이용하여 설치를 해야한다.

import {
  //react-router-dom 을 쓰기 위한 기본 구조
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
} from "react-router-dom";

그리고 원하는 폴더 또는 파일을 생성하여 해당 경로를 App.js에 설정해주면, 원하는 페이지로 이동할 수 있다.

(* 이동방법 => https://localhost:3000/login (또는 register) path에 맞게 작성해주면 된다.)

import LandingPage from "./components/views/LandingPage/LandingPage";
import LoginPage from "./components/views/LoginPage/LoginPage";
import RegisterPage from "./components/views/RegisterPage/RegisterPage";

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={LandingPage} />
          <Route exact path="/login" component={LoginPage} />
          <Route exact path="/register" component={RegisterPage} />
        </Switch>
      </div>
    </Router>
  );
}

여기서 <Route exact path="/" compoent={LandingPage} /> 를 볼 수 있다. 이는 가독성이 좋기 위한 코드이며 이 전의 코드는 아래와 같다.

<Route path="/login"><LoginPage /></Route>

🔗 전체코드

/*
	전체코드
*/

import React from "react";
import "./App.css";
import {
  //react-router-dom 을 쓰기 위한 기본 구조
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
} from "react-router-dom";

import LandingPage from "./components/views/LandingPage/LandingPage";
import LoginPage from "./components/views/LoginPage/LoginPage";
import RegisterPage from "./components/views/RegisterPage/RegisterPage";

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={LandingPage} />
          <Route exact path="/login" component={LoginPage} />
          <Route exact path="/register" component={RegisterPage} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

🏓 주저리

얼마전 험난한 취업 시장을 뚫고 학생 신분을 탈출한 신입 개발자 지인들을 만났다. 그들은 빠르게 성장하고 있었고, 자신들의 학습 방법을 알려주었다. 서로 상이했지만, 공통점은 '이유' 였다.

' 왜 사용하는지 알고, 꼬리를 물고 파고 파서 습득한다. '

이게 그 이유이다. 기존에는 코드가 오류만 안나고 작동하면 만족했었다. 왜 동작하는지도 모른체. 그래서 이번에는 동작원리 또는 탄생 배경부터 알아가고자 노력한 것 같다. 앞으로 꾸준히 이렇게 공부할 수 있도록 노력.. 또 노력 !