리액트 소개

원도훈·2024년 9월 25일
React
1
post-thumbnail

리액트는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, 현대 웹 개발에서 널리 사용되고 있습니다. 이번 포스트에서는 리액트의 소개부터 앱 생성 방법, 그리고 리액트 앱의 구동 원리에 대해 상세히 알아보겠습니다.

1. 리액트 소개

리액트란?

리액트(React)는 페이스북에서 개발한 오픈 소스 JavaScript 라이브러리입니다. 주로 사용자 인터페이스(UI)를 구축하는 데 사용되며, 복잡한 웹 애플리케이션의 뷰 레이어를 효과적으로 관리할 수 있습니다.

리액트의 특징

  • 컴포넌트 기반 아키텍처: UI를 독립적인 컴포넌트로 분리하여 재사용성과 유지보수성을 높입니다.
  • Virtual DOM: 실제 DOM 대신 가상의 DOM을 사용하여 변경 사항을 효율적으로 업데이트합니다.
  • 단방향 데이터 흐름: 데이터는 상위 컴포넌트에서 하위 컴포넌트로 흐르며, 예측 가능한 상태 관리를 가능하게 합니다.
  • JSX 문법: JavaScript 코드 안에 HTML과 유사한 문법을 사용하여 가독성을 높입니다.

리액트의 장점

  • 높은 성능: Virtual DOM을 사용하여 최소한의 DOM 조작으로 UI를 업데이트합니다.
  • 유연성: 다른 라이브러리나 프레임워크와 쉽게 통합할 수 있습니다.
  • 활발한 커뮤니티: 풍부한 리소스와 패키지를 활용할 수 있습니다.

2. 리액트 앱 생성

리액트 앱을 생성하는 가장 간단한 방법은 Create React App(CRA) 도구를 사용하는 것입니다.

2.1 개발 환경 설정

Node.js 설치
리액트 개발을 위해서는 Node.js와 NPM(Node Package Manager)이 필요합니다.

Node.js 공식 웹사이트에서 최신 LTS 버전을 다운로드합니다: https://nodejs.org/ko/

설치 후 터미널에서 버전을 확인합니다.

node -v
npm -v

2.2 Create React App으로 앱 생성

1. Create React App 설치 (전역 설치)

npm install -g create-react-app

참고: 최신 NPM 버전에서는 전역 설치 없이도 npx를 통해 CRA를 사용할 수 있습니다.

2. 새로운 리액트 앱 생성

npx create-react-app my-app

my-app: 생성할 앱의 디렉토리 이름입니다.

3. 디렉토리 이동 및 앱 실행

cd my-app
npm start

브라우저에서 http://localhost:3000에 접속하면 리액트 앱이 실행된 것을 확인할 수 있습니다.

2.3 프로젝트 구조 이해

my-app/
├── node_modules/
├── public/
│ ├── index.html
│ └── favicon.ico
├── src/
│ ├── App.js
│ ├── App.css
│ ├── index.js
│ └── ...
├── package.json
└── README.md

  • public/: 정적 파일을 보관하는 디렉토리로, index.html 파일이 위치합니다.
  • src/: 애플리케이션의 소스 코드가 위치합니다.
  • index.js: 애플리케이션의 진입점입니다.
  • App.js: 기본 컴포넌트로, 여기서부터 컴포넌트를 구성합니다.
  • package.json: 프로젝트의 설정과 의존성이 정의된 파일입니다.

3. 리액트 앱 구동 원리

리액트 앱이 어떻게 동작하는지 이해하면 더욱 효율적으로 개발할 수 있습니다.

3.1 컴포넌트 기반 아키텍처

컴포넌트는 독립적이고 재사용 가능한 UI의 구성 요소입니다.
컴포넌트는 클래스형과 함수형 컴포넌트로 나뉩니다.

  • 함수형 컴포넌트: 함수로 정의되며, React Hooks를 통해 상태와 생명주기 메서드를 사용할 수 있습니다.
  • 클래스형 컴포넌트: ES6 클래스 문법을 사용하여 정의됩니다.

함수형 컴포넌트

// src/App.js
import React from 'react';

function App() {
  return (
    <div>
      <h1>안녕하세요, 리액트!</h1>
    </div>
  );
}

export default App;

3.2 JSX 문법

JSX는 JavaScript XML의 약자로, JavaScript 내에서 HTML과 유사한 문법을 사용할 수 있게 해줍니다.
Babel을 통해 일반 JavaScript로 변환됩니다.

JSX의 특징
태그는 반드시 닫혀야 합니다.

<input type="text" />  // 올바른 문법

자바스크립트 표현식을 {}로 감쌉니다.

const name = 'React';
<h1>{name}</h1>  // 출력: React

3.3 Virtual DOM

Virtual DOM은 메모리 내에서 가상의 DOM 트리를 구성하여 실제 DOM과의 차이를 최소화하여 업데이트합니다.
변경 사항을 효과적으로 감지하고, 필요한 부분만 실제 DOM에 반영하여 성능을 최적화합니다.

Virtual DOM의 동작 과정

상태(state)가 변경되면 새로운 Virtual DOM이 생성됩니다.
이전 Virtual DOM과 새로운 Virtual DOM을 비교하여 변경된 부분을 찾습니다.
실제 DOM에서 필요한 부분만 업데이트합니다.

3.4 상태 관리와 단방향 데이터 흐름

상태(State)란?

컴포넌트의 상태는 동적인 데이터를 담고 있으며, 상태가 변경되면 컴포넌트는 다시 렌더링됩니다.
단방향 데이터 흐름
데이터는 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 전달됩니다.
자식 컴포넌트는 props를 읽기 전용으로 받아옵니다.

상태와 이벤트 처리

// src/App.js
import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

export default App;

useState Hook을 사용하여 상태를 관리합니다.
버튼을 클릭하면 상태가 변경되고, 컴포넌트가 다시 렌더링되어 UI가 업데이트됩니다.

3.5 React 생명주기

클래스형 컴포넌트의 생명주기 메서드

  • 마운트(Mount): 컴포넌트가 처음 DOM에 삽입될 때 호출됩니다.
    constructor()
    componentDidMount()

  • 업데이트(Update): 상태나 props가 변경되어 다시 렌더링될 때 호출됩니다.
    shouldComponentUpdate()
    componentDidUpdate()

  • 언마운트(Unmount): 컴포넌트가 DOM에서 제거될 때 호출됩니다.
    componentWillUnmount()

함수형 컴포넌트에서의 생명주기
React Hooks의 useEffect를 사용하여 생명주기와 유사한 기능을 구현합니다.

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 컴포넌트가 마운트될 때 실행
    fetchData();

    return () => {
      // 컴포넌트가 언마운트될 때 실행
      cleanUp();
    };
  }, []); // 빈 배열은 의존성이 없음을 의미

  return (
    <div>
      {/* ... */}
    </div>
  );
}

3.6 이벤트 처리와 바인딩

리액트에서는 이벤트 이름이 카멜 표기법(camelCase)을 사용합니다.
이벤트 핸들러로 함수를 전달합니다.

<button onClick={handleClick}>클릭</button>

이벤트 핸들러는 기본적으로 this와 바인딩되지 않으므로, 화살표 함수나 bind를 사용해야 합니다.

이번 포스트에서는 리액트의 소개부터 앱 생성 방법, 그리고 리액트 앱의 구동 원리에 대해 자세히 알아보았습니다. 리액트는 현대 웹 개발에서 필수적인 라이브러리로, 이를 잘 이해하고 활용하면 더욱 효율적이고 사용자 친화적인 애플리케이션을 개발할 수 있습니다. 앞으로 컴포넌트의 심화된 사용법, 상태 관리 라이브러리(Redux 등), 그리고 라우팅 등 리액트의 다양한 기능을 탐구해보시기 바랍니다.

profile
원도훈
개발
이전 포스트

Node.js 기초 정리

다음 포스트

Js 계산기

0개의 댓글