Day 38 - React.js 기초

이유승·2025년 1월 12일
타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기

데브코스 웹 풀스택 개발 5기

목록 보기
38/66

* 프로그래머스, 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기 강의 수강 내용을 정리하는 포스팅.

* 원활한 내용 이해를 위해 수업에서 제시된 자료 이외에, 개인적으로 조사한 자료 등을 덧붙이고 있음.

React.js 개념 정리

1. React.js의 개념

  • React.js는 Facebook에서 개발한 JavaScript 기반의 프론트엔드 라이브러리.
    - 프레임워크가 아니다. 이전 포스팅 참조.

  • 주로 UI(User Interface) 구축을 위해 사용되며, 컴포넌트(Component) 기반 구조로 효율적인 개발이 가능.

  • Virtual DOM을 사용하여 UI 변경 사항을 빠르게 반영하고, 단방향 데이터 흐름을 통해 상태 관리가 용이.

2. CRA와 Vite의 개념 및 차이점

2.1 CRA (Create React App)

  • CRA는 React 프로젝트를 간편하게 설정할 수 있는 React 공식 보일러플레이트.

  • 복잡한 환경 설정 없이 빠르게 React 프로젝트를 생성할 수 있도록 돕는다.
    - React.js로 무언가를 만들고 싶다, 라고 할때..
    - 제대로 동작하는 하나의 프로그램을 만들기 위해서는 생각보다 더 많은 도구들을 필요로 한다.
    - React.js는 특히 JSX를 JS로 변환시켜주는 바벨(Babel)을 필수적으로 가져야하고, 번들 문제를 처리해 줄 웹팩(Webpack) 같은 것들도 필요하다.
    - 보일러플레이트를 사용하지 않는다면, 개발자는 프로그램 제작에 필요한 필수요소들이 무엇인지 알아서 하나하나 직접 설치해주어야 한다.
    - 이런 귀찮고 번잡하고 어려운 작업을 대신해주는게 보일러플레이트.

  • 하지만 무거운 설정과 긴 빌드 시간이 단점으로 지적된다.
    - 개발자가 원하는 요구사항을 정확하게 알 수가 없으니, 기본 설정을 모두 적용하여 설치하기 때문.
    - 너가 무엇을 필요로하는지 모르겠으니 일단 모두 설치해줄게.. 라는 식으로 이해하면 빠르다.

  • 2022년 즈음부터는 Vite같은 경량 보일러플레이트에 밀려 입지가 좁아지고 있다. CRA의 메인 업데이트도 중단되어 있을 정도..

2.2 Vite

  • Vite는 경량화된 프론트엔드 개발 도구로, 빠른 빌드 속도와 효율적인 개발 환경을 제공.

  • 최신 브라우저의 ES 모듈(ESM)을 기반으로 번들링을 최소화하며, 핫 리로딩이 매우 빠르다.

  • 다만, CRA에 비하면 사용자가 추가적으로 설치해야하는 모듈들이 좀 더 있을 수 있다.

2.3 CRA와 Vite의 차이점

특징CRAVite
빌드 속도느림빠름
핫 리로딩느림빠름
설정 편의성초기 설정이 자동화됨초기 설정이 간단함
번들링 방식Webpack 사용Rollup 및 ESM 기반
사용 권장 시점간단한 React 프로젝트대규모 또는 최신 프로젝트 환경

3. JSX 문법

  • JSX (JavaScript XML)은 React에서 사용하는 JavaScript 확장 문법으로, HTML과 유사한 문법을 사용하여 UI를 선언적으로 작성할 수 있습니다.
  • JSX는 브라우저가 이해할 수 있는 JavaScript로 변환되어 실행됩니다.

예시:

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

4. 클래스형 컴포넌트와 함수형 컴포넌트

4.1 클래스형 컴포넌트

  • ES6 클래스 문법을 사용하여 정의된 컴포넌트.
  • this 키워드를 사용하며, 상태 관리와 라이프사이클 메서드 사용이 가능.

클래스형 컴포넌트 예시

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <h1>Hello from Class Component!</h1>;
  }
}

4.2 함수형 컴포넌트

함수 문법을 사용하여 정의된 컴포넌트.

React Hooks(useState, useEffect 등)을 사용하여 상태와 라이프사이클을 관리.

함수형 컴포넌트 예시

function MyComponent() {
  return <h1>Hello from Function Component!</h1>;
}

4.3 왜 클래스형이었고, 왜 지금은 함수형인가?

  • React.js는 원래 클래스형 컴포넌트 방식으로 먼저 개발되었다.

  • React.js가 처음 개발된 2013년 기준에서는 객체 지향 프로그래밍(OOP)이 대세였기에, OOP 기반의 클래스형으로 만들어진 것.

  • React는 UI와 상태를 동적으로 연결하는 라이브러리로 설계되었기 때문에, 상태(state)와 라이프사이클 관리가 필수적이었다.

  • 따라서 클래스형 컴포넌트는 this.state와 라이프사이클 메서드(componentDidMount, componentDidUpdate 등)를 통해 상태와 라이프사이클을 명확히 정의하였다.

  • 이 시기에도 함수형 컴포넌트가 없던 것은 아니었는데, 단순히 데이터를 입력받아 JSX를 반환하는 "순수 함수"로만 존재했고, state도 라이프사이클 개념도 다룰 수가 없었다.

  • 그런데, 시간이 흐르고 보니 클래스형 컴포넌트에서는 this 키워드 사용으로 인해 초보 개발자들이 사용에 어려움을 겪는 문제가 터져나왔고.. 라이프사이클 메소드가 3개나 되다보니 로직이 여기저기 흩어져서 코드가 복잡해지는 문제가 발생했다.

componentDidMount() { /* 데이터 가져오기 */ }
componentDidUpdate() { /* 데이터 업데이트 */ }
componentWillUnmount() { /* 데이터 정리 */ }

  • 이 문제를 해결하기 위해서 React.js 개발진은 함수형 컴포넌트를 대안으로 삼아 이를 점진적으로 확장해나가기 시작했다.

  • 2019년, React.js 16.8버전을 기점으로 Hooks 개념이 추가되면서 함수형 컴포넌트에서도 상태와 라이프사이클을 관리할 수 있게 되었고.. 함수형 컴포넌트는 점차 클래스형 컴포넌트를 완전히 대체해나갔다.

  • Hooks? 클래스형 컴포넌트에 존재했던 핵심 기능들을 함수형 컴포넌트에서 낚시바늘로 낚아서 사용한다는 의미에서 Hooks라는 이름이 붙었다.

  • 클래스형 컴포넌트의 this.state와 라이프사이클 메서드(componentDidMount, componentDidUpdate 등)들은 함수형 컴포넌트에서 각각 useState와 useEffect으로 대체되었다.

  • useState와 useEffect 외에도 다양한 Hooks(useContext, useReducer, useMemo, useRef 등)가 추가되어, 함수형 컴포넌트에서의 상태 관리와 복잡한 로직 구현을 지원하고 있다.

  • useEffect의 경우, 컴포넌트가 마운트될 때 콜백 함수 인자로 전달되는 내부 코드가 실행되면서 componentDidMount를 대체 / useEffect의 2번째 인자로 전달되는 배열 내부의 요소에 변화가 발생할 때 콜백 함수 인자로 전달되는 내부 코드가 실행되도록 하면서 componentDidUpdate를 대체 / return 키워드로 전달되는 코드는 컴포넌트가 언마운트될 때 실행되도록 하면서 componentWillUnmount까지 완벽하게 대체한다.

  • 2024년 기점에서, 공식적으로 React.js에서는 클래스형 컴포넌트의 사용을 권장하지 않는다. 레거시 코드 보수 등의 사유가 아니라면 함수형 컴포넌트를 사용하는 것이 상식이다.

5. State

  • State는 React 컴포넌트의 내부 데이터로, UI의 동작을 동적으로 변경하는 데 사용.
  • 상태(state)가 변경되면 React는 해당 컴포넌트를 재렌더링합니다.

useState를 사용한 상태 관리 예시

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 상태 선언

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

6. 구조 분해 할당 (Destructuring)

  • 객체나 배열의 값을 개별 변수로 분리하여 할당하는 문법.

객체 구조 분해 예시

const user = { name: "Alice", age: 25 };
const { name, age } = user; // name = "Alice", age = 25

배열 구조 분해 예시

const numbers = [1, 2, 3];
const [first, second] = numbers; // first = 1, second = 2

React에서의 구조 분해 할당

  • React 컴포넌트의 props를 구조 분해하여 간결하게 표현.
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

7. 데이터 반복 처리하기

  • React에서 데이터를 반복적으로 렌더링할 때 map 메서드를 사용.

데이터 반복 렌더링 예시

function ItemList() {
  const items = ["Apple", "Banana", "Cherry"];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
  • key 속성: 각 반복 요소에 고유한 식별자를 부여하여 React가 효율적으로 렌더링하도록 도움.
profile
이유승
프론트엔드 개발자를 준비하고 있습니다.
이전 포스트

Day 37 - 클래스, 객체, 생성자, 접근 지정자, Getter/Setter

다음 포스트

Day 39 - React.js 스터디 1주차

0개의 댓글