[LG CNS AM Inspire Camp 1기] FE - React 시작하기

이슬아·2025년 1월 5일

LG CNS AM Inspire Camp 1기

목록 보기

10/20

모듈

소프트웨어를 구성하는 하나의 독립적인 단위로, 특정 기능을 캡슐화하여 다른 코드와 분리한 코드의 집합이다.
모듈을 사용하면 코드 재사용성을 높이고, 관리와 유지보수를 쉽게 하며, 복잡한 시스템을 더 작은 단위로 나누어 개발하는 것이 가능하다

모듈 생성 및 사용

⬅️ export(내보내기)
모듈에서 특정 함수나 변수를 외부에서 사용할 수 있도록 내보낼 수 있다.

// math.js (모듈 파일)
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

➡️ import(가져오기)
math.js에서 내보낸 모듈을 가져올려면 import를 사용한다.

// main.js
import { add, subtract } from './math.js';
console.log(add(5, 3));        // 8
console.log(subtract(5, 3));   // 2

✔️ 기본(default) 내보내기
기본 내보내기(export default)는 모듈에서 단 하나의 기능만 기본으로 내보낼 때 사용한다

기본 내보내기는 import할 때 중괄호 사용하지 않아도 된다.

// math.js
export default function multiply(a, b) {
  return a * b;
}

// main.js
import multiply from './math.js';
console.log(multiply(5, 3));   // 15

기본 내보내기는 이름을 변경해 가져올 수도 있다.

import myMultiply from './math.js';
console.log(myMultiply(5, 3)); // 15

리액트(React)

정의

리액트는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리이다.
SPA(Single Page Application)를 쉽고 빠르게 만들수 있도록 해 주는 도구이다
( 라이브러리 ⇒ 자주 사용되는 기능을 정해 모아 놓은 것)
대표적인 자바스크립트 UI 라이브러리 : Angular, React, Vue.js

프레임워크 vs 라이브러리
프로그램 흐름제어권이 누구에게 있느냐에 따라 구분할 수 있다.

흐름제어권이 개발자에게 있다 => 라이브러를 이용하여 개발한다.

흐름제어권이 프로그램에게 있다 => 프레임워크 기반으로 개발한다.

프레임워크는 흐름의 제어 권한을 개발자가 아닌 프레임워크가 갖고 있는 반면
라이브러리는 흐름에 대한 제어를 하지 않고 개발자가 필요한 부분만 필요할 때 가져다 사용하는 형태이다

리액트의 주요 특징

1) 컴포넌트 기반 구조

UI를 컴포넌트라는 독립적인 단위로 나눌 수 있다
각 컴포넌트는 HTML, CSS, JavaScript를 모두 포함하며, 재사용이 가능합니다.

2) 가상 DOM(Virtual DOM)
실제 DOM 대신 가상 DOM을 사용하여 UI를 렌더링하여 변경된 부분만 업데이트하기 때문에 빠른 렌더링이 가능하다.

그 외에도 메타(페이스북)지원, 활발한 지식 공유와 커뮤니티, 모바일 앱 개발 가능하다는 장점을 가지고 있지만
러닝커브가 크고 높은 상태(state) 관리 복잡도를 가진다는 단점도 존재한다.

리액트에서 높은 상태(State) 관리 복잡도란?
리액트는 컴포넌트 기반으로 설계되어 있고, 각 컴포넌트는 상태(state)를 독립적으로 관리한다.

상태(State)란?
컴포넌트가 동작하면서 변경될 수 있는 데이터를 말한다

즉 상태 관리 복잡도가 높다는 것은 애플리케이션이 커지고 복잡해지면서 상태를 효율적으로 관리하는 것이 점점 더 어려워질 수 있다는 것을 이야기한다.

리액트 앱 개발

일반 웹 페이지에 react.js 파일을 추가해서 기능을 구현
[sample.html]
#1 HTML 파일에 DOM 컨테이너를 추가
DOM 컨테이너 -> 리액트 컴포넌트가 추가되는 위치를 나타냄 (= 렌더링될 위치 준비)
Root DOM Node => 가상 DOM(Virtual DOM)의 시작점

<div id="root"></div>

-> 리액트는 이 "root"라는 DOM 요소를 기준으로 가상 DOM을 사용해 화면을 업데이트한다.

#2 리액트 파일(react.js, react-dom.js)을 추가
리액트의 핵심 기능을 제공하는 라이브러리 파일

react.development.js: 리액트 컴포넌트를 작성하는 데 필요한 기능 제공.
react-dom.development.js: 리액트 컴포넌트를 HTML에 렌더링하는 기능 제공.

 <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

-> CDN(Content Delivery Network)을 사용해 라이브러리를 불러옴

#3 리액트 컴포넌트 코드를 추가

<script src="MyButton.js"></script>

-> MyButton.js라는 파일의 컴포넌트 사용

[MyButton.js]
1) MyButton 컴포넌트

function MyButton(props) {
    const [isClicked, setIsClicked] = React.useState(false);

useState(false) : 버튼의 상태(state)를 관리 (훅,Hook)
isClicked : 상태의 현재 값. (처음에는 false로 초기화
setIsClicked : 상태 값을 변경하는 함수

2) React.createElement

리액트에서 DOM 요소(여기서는 <button>)를 생성
세개의 매개변수
첫 번째 매개변수: 태그 이름("button")
두 번째 매개변수: 속성 객체(onClick 이벤트)
세 번째 매개변수: 태그 안에 들어갈 콘텐츠 (버튼 텍스트)
"button" 태그를 생성
속성 { onClick: () => setIsClicked(!isClicked) }을 추가
클릭 시 isClicked 상태를 반전시킴
버튼 텍스트는 상태 isClicked 값에 따라 다름 (true: "Clicked"/false: "Click here)

return React.createElement(
    "button",
    { onClick: () => setIsClicked(!isClicked) },
    isClicked ? "Clicked" : "Click here"
);

3) 컴포넌트를 렌더링

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(React.createElement(MyButton));

JSX = JavaScript + XML = 자바스크립트 확장 문법

JSX는 XML과 비슷한 문법을 가지며, JavaScript 코드 안에서 HTML과 유사한 구조로 UI 요소를 정의할 수 있다.

JSX의 예제

const element = <h1>Hello, World!</h1>;

JSX를 사용하지 않는 경우

const element = React.createElement('h1', {}, 'Hello, World!');

-> JSX를 사용했을 때와 비교했을 대 JSX가 HTML과 유사한 문법으로 작성할 수 있어 직관적이고 가독성이 높은 것을 확인할 수 있다.
Babel 같은 도구를 통해 JSX는 React.createElement()로 변환된다.

CRA (Create React App)와 CNA (Create Next App)

리액트 기반 웹 애플리케이션 개발에 필요한 모든 설정 상태의 프로젝트를 만들어 주는 도구

CRA (Create React App)

리액트 프로젝트 초기 설정을 자동으로 만들어주는 도구로 복잡한 환경 설정 없이 리액트 앱 개발을 시작할 수 있다.

CNA (Create Next App)

Next.js를 기반으로 한 프로젝트 초기 설정 도구로 SSR(Server-Side Rendering) 및 SEO(검색 엔진 최적화)에 강점이 있는 Next.js 프로젝트를 자동 설정한다.

CRA vs CNA

언제 CRA와 CNA를 사용해야 할까?
CRA는 단순하고 빠르게 SPA를 개발하거나 서버 사이드 렌더링이 필요없고, SEO가 중요하지 않은 프로젝트에서 사용하고
CNA는 SEO가 중요하거나 서버에서 데이터를 렌더링해야 하는 경우, 백엔드가 없는 간단한 API를 직접 작성하려는 경우 사용한다.

-> 요즘은 CNA로 많이 쓰는 추세