[Day106] React란? - 1

React란 무엇인가?

개요

React (리액트)는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리이다. Facebook에서 개발하였으며, 대규모, 고성능의 웹 애플리케이션을 빠르게 개발하기 위해 설계되었다. React의 주요 특징은 컴포넌트 기반 아키텍처, 가상 DOM, 단방향 데이터 흐름 (Unidirectional Data Flow)이다.

React의 탄생 배경

1. 컴포넌트 기반 접근: 웹 애플리케이션의 UI를 독립적이고 재사용 가능한 작은 단위로 나눈다.
2. 가상 DOM 사용: 실제 DOM을 직접 조작하는 것보다 성능적으로 유리하며, 애플리케이션의 성능을 향상시킨다.
3. 단방향 데이터 흐름: 데이터가 한 방향으로만 흐르므로 애플리케이션의 데이터 흐름을 쉽게 이해하고 관리할 수 있다.

React의 주요 개념

1. 컴포넌트 (Component): UI의 독립적인, 재사용 가능한 부분이다. 클래스 또는 함수 형태로 정의될 수 있다.
2. JSX (JavaScript XML): HTML과 유사한 문법을 가진 JavaScript의 확장 문법이다. React에서 UI를 표현하는 데 사용된다.
3. 상태 (State) 및 속성 (Props): React 컴포넌트의 데이터를 관리한다. 상태는 변경 가능한 데이터를, 속성은 부모 컴포넌트로부터 전달받은 데이터를 의미한다.
4. 생명주기 메소드 (Lifecycle Methods): 컴포넌트가 생성, 업데이트, 파괴되는 시점에 호출되는 메소드들이다.
5. Hooks: 함수 컴포넌트에서 상태 관리 및 사이드 이펙트를 처리하기 위한 기능들이다.

React 사용의 장점

1. 재사용 가능한 컴포넌트: 개발 시간과 비용을 절약하고, 코드의 일관성을 유지할 수 있다.
2. 유지 보수의 용이성: 컴포넌트 기반 구조는 코드의 가독성을 높이고 유지 보수를 용이하게 한다.
3. 강력한 커뮤니티와 생태계: 다양한 서드파티 라이브러리와 도구가 지원된다.
4. 유연성: 다른 프레임워크 또는 라이브러리와 쉽게 통합될 수 있다.

실제 React 코드 예시

React의 기본적인 사용 예시로, 간단한 "Hello, World!" 애플리케이션을 살펴보자:

import React from 'react';
import ReactDOM from 'react-dom';

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

ReactDOM.render(<HelloWorld />, document.getElementById('root'));

이 코드는 HelloWorld라는 함수 컴포넌트를 정의하고, 이를 HTML의 root 요소에 렌더링한다. JSX 문법을 사용하여 HTML과 유사한 방식으로 UI를 정의한다.

React에서 나오는 개념들

1. 생명주기 메소드 (Lifecycle Methods): 컴포넌트의 생성, 업데이트, 소멸 과정에서 호출되는 메소드들이다. 예를 들어, componentDidMount, componentDidUpdate, componentWillUnmount 등이 있다.
2. Hooks: React 16.8 이후에 도입된 기능으로, 함수 컴포넌트에서 상태 관리 및 다른 React 기능들을 사용할 수 있게 해준다. 대표적인 Hooks로는 useState, useEffect, useContext가 있다.
3. Context API: 컴포넌트 트리 전반에 걸쳐 데이터를 전달할 수 있는 방법을 제공한다. 이를 통해 prop drilling(속성을 여러 계층에 걸쳐 전달하는 것) 문제를 해결할 수 있다.
4. 고차 컴포넌트 (Higher-Order Components, HOCs): 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수로, 재사용 가능한 컴포넌트 로직을 만드는 데 사용된다.