React 리액트란?

• 2023.01.13(금) westudy > Foundation1 > React

---

프레임워크(Framework)와 라이브러리(Library)의 등장

이전에는 HTML, CSS, VanillaJS 만으로도 웹 서비스를 구축하여 배포하는 게 흔했지만 시간이 지날수록 유저와 웹간의 상호작용 늘어나기기 시작했다.
일일이 DOM을 사용하여 절차식으로 선언하는 코딩 방식은 비효율적이기 때문에 상호작용이 많고 규모가 커진 웹 애플리케이션을 계속해서 개발하고 유지보수를 용이하게 하기 위해서는 이를 간소화시킬 수 있는 방안이 필요해졌다.
DOM 조작을 쉽게 해주는 jQuery라는 자바스크립트 라이브러리가 초기에 등장하긴 했으나, jQuery 역시 DOM에 직접 접근을 해야한다는 사실은 변함이 없었기 때문에 여전히 어려움이 많았다.
그래서 이를 개선시킬 수 있는 다양한 프론트엔드 프레임워크와 라이브러리들이 등장하게 된 것.

• 프레임워크(Framework): 정해진 틀 속에서 수동적으로 작업을 해야하는 것 ex. 모든 기구가 갖춰진 주방 전체, 다른 사람이 이미 마련해놓은 주방
• 라이브러리(Library): 필요한 기능을 찾고 능동적으로 가져와서 사용하는 것 ex. 용도에 따라 가져다 쓰는 주방기구 like 주전자, 다른 사람이 만들어놓은 도구

---

React(리액트)

• 리액트(React)는 메타(구 페이스북)에서 개발하고 관리하는 UI를 만들기 위한 자바스크립트 라이브러리이다.
  리액트는 자바스크립트의 활용도가 높으며 생태계가 활성화되어있고 개발 생산성을 높여준다는 점과 같은 장점을 가지고 있어 사용자가 꾸준히 증가하고 있으며, 프론트엔드의 여러 프레임워크와 라이브러리 중 현재 가장 많이 사용되고 있다.

---

Component(컴포넌트)

프론트엔드 개발에서 컴포넌트란, 재활용 가능한 UI 구성 단위를 뜻함.

• Class(클래스) Component; render() 메서드가 필요함

import React from 'react';

class App extends React.Component {
  render() {
    return <h1>This is Class Component!</h1>;
  }
}

export default App;

• Function(함수) Component; render() 메서드 없이 JSX를 반환함

import React from 'react';

const App = () => {
  return <h1>This is Function Component!</h1>;
};

export default App;

-> 클래스 컴포넌트보다 훨씬 간단하고 단순하기 때문에 함수 컴포넌트를 더 많이 사용하게 됨.

---

JSX(JavaScript Syntax eXtension) 자바스크립트 확장 문법

기존에는 HTML와 JavaScript가 개별의 파일이었다면 JSX는 이 둘을 합쳐서 한번에 사용하는 것을 가능케 해준 문법이다. 즉, JSX는 HTML과 JavaScript 로직을 하나의 JavaScript 파일 안에서 모두 처리하기 위해 확장한 문법을 뜻함.

JSX 문법 참고

🚨 JSX문법은 암기가 답. 이해<암기; 암기부터 하고 이해하는 걸로! 암기를 해야 JSX를 사용할 수 있음

---

함수 컴포넌트를 이용하여 React 적용시켜보기

index.html 파일은 건들지 않고,
src 폴더 내 생성한 js 파일 안에 컴포넌트를 생성한 후 router.js 파일 안에 BorwserRouter 들을 설정해준다.

// router.js

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Login from './pages/Login/Login';
import Main from './pages/Main/Main';

const Router = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path='/' element={<Login />} /> 
                <Route path='/main' element={<Main />} />
            </Routes>
        </BrowserRouter>
    );
};

export default Router;

그 이후에 index.js 파일 내 root.render(<Router />); 를 작성해준다.

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import Router from './router';

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

vscode 내 터미널을 통해 rpm start 실행 시 router.js에서 할당한 Route path 주소에 따라 할당된 element가 불러와진다!

---

💬 첫 React 적용 후기
리액트라는 라이브러리를 이용하여 기존 javascript들의 기능을 보다 편리하게 사용하는 방법을 더욱 익숙케 해야겠다. 정신 놓치면 이해 못하고 어물쩡 어물쩡 넘어가게 될 듯...

• 처음에 javascript로 작성한 westagram login html, css 파일을 리액트로 변환하는 과정에서 같은 html 파일이라고 login.html 내용을 index.html에 냅다 복붙했는데.. 뭐하는 짓..?
  ➡️ 이런 멍청이같은 짓 하지 말고 html을 jsx문법으로 변환하여 login.js에 ✨Login 컴포넌트✨로 생성해주어 router.js와 index.js 파일이 해당 ✨컴포넌트✨를 불러올 수 있게끔 해주어야 함.

// Login.js에 Login 함수 컴포넌트 생성해주기

import React from 'react';

const Login = () => {
  return <h1>This is Function Component!</h1>;
};

export default Login;

어디에 뭐가 들어가고 어떤 파일이 어느 파일에 영향을 서로 미치는지 더욱 완벽하게 이해할 것!