본문 바로가기

React

[React] React 초보자 가이드: 주요 구성 요소와 특징

1. React의 개념

React는 Meta에서 개발한 JavaScript 라이브러리로, 유저 인터페이스를 구축하는 데 사용된다.
컴포넌트 기반 아키텍처를 통해 재사용 가능하고 모듈화된 UI 요소를 만들 수 있다.


2. React 주요 구성 요소

2-1. 컴포넌트 (Components)

  • 개념: React 애플리케이션의 기본 구성 단위
    • 컴포넌트는 독립적이고 재사용 가능한 UI 조각이다.
    • 함수형 컴포넌트와 클래스형 컴포넌트 두 가지 유형이 있다. (현재는 함수형 컴포넌트 사용을 권장)
    • 각 컴포넌트는 자체적인 로직과 UI를 가질 수 있으며, 다른 컴포넌트를 포함할 수도 있어 복잡한 UI를 구성할 수 있다.
  • 예시
// jsx
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

 

2-2. JSX (JavaScript XML)

  • 개념: JavaScript의 확장 문법으로, React에서 UI를 표현하는 데 사용
    • JSX는 JavaScript 내에서 HTML과 유사한 마크업을 직접 작성할 수 있게 하며 React 요소를 생성한다.
    • Babel과 같은 도구를 통해 컴파일 과정에서 일반 JavaScript 객체로 변환된다.
    • 중괄호 `{}` 안에 JavaScript 표현식을 삽입할 수 있다.
  • 예시
//jsx
const name = 'Alice';
const element = <h1>Hello, {name}!</h1>;

 

2-3. Props

  • 개념: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법
    • Props는 읽기 전용이며, 자식 컴포넌트에서 직접 수정할 수 없다.
    • Props를 통해 컴포넌트를 재사용 가능하고 동적으로 만들 수 있다.
    • Props는 함수의 매개변수와 유사한 역할을 한다.
  • 예시
//jsx
function Welcome(props) {
  return <p>Hello, {props.name}!</p>;
}

function App() {
  return <Greeting name="Alice" />;
}

 

2-4. State

  • 개념: 컴포넌트 내부에서 관리되는 데이터로, 변경될 수 있는 값들을 저장
    • State는 컴포넌트의 렌더링에 영향을 주는 데이터를 저장하고, State가 변경되면 React는 해당 컴포넌트를 다시 렌더링한다.
    • 함수형 컴포넌트에서는 `useState` Hook을 사용하여 state를 관리한다.
    • State 업데이트는 비동기적으로 처리될 수 있으므로, 이전 state를 기반으로 업데이트할 때는 함수 형태를 사용해야 한다.
  • 예시
//jsx
import React, { useState } from 'react';

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

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

 

2-5. Hooks

  • 개념: 함수형 컴포넌트에서 state와 생명주기 기능을 사용할 수 있게 해주는 기능
    • 클래스 컴포넌트 없이도 state와 기타 React 기능을 사용할 수 있게 한다.
    • 주요 Hook에는 `useState`, `useEffect`, `useContext`, `useReducer` 등이 있다.
    • 사용자 정의 Hook을 만들어 로직을 재사용할 수 있다.
  • 예시
//jsx
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

3. React의 주요 특징

3-1. 단방향 데이터 흐름 (One-way Data Flow)

데이터가 부모에서 자식 컴포넌트로만 전달된다. 데이터 흐름을 예측하기 쉽고 디버깅이 용이하다.

  • React에서 데이터는 항상 위에서 아래로(부모에서 자식으로) 흐른다.
  • 자식 컴포넌트는 전달받은 데이터를 직접 수정할 수 없다.
  • 데이터 변경이 필요한 경우, 상위 컴포넌트에서 처리하고 다시 전달한다.
  • 이러한 방식으로 데이터의 흐름과 변경을 추적하기 쉽다.
//jsx
function Parent() {
  const [data, setData] = useState('Hello');
  return <Child message={data} />;
}

 

3-2. 가상 DOM (Virtual DOM)

실제 DOM의 복사본을 메모리에 유지하고, 변경사항을 효율적으로 적용한다. 웹 애플리케이션의 성능을 향상시킨다.

  • 가상 DOM은 실제 DOM의 가벼운 복사본이다.
  • React는 상태 변화가 있을 때마다 새로운 가상 DOM 트리를 생성한다.
  • 이전 가상 DOM과 새 가상 DOM을 비교하여 변경된 부분만 실제 DOM에 적용한다.
  • 이 과정을 통해 불필요한 DOM 조작을 줄이고 성능을 향상시킨다.

3-3. 선언형 프로그래밍 (Declarative Programming)

원하는 결과를 선언하면 React가 UI를 자동으로 관리한다. 코드의 가독성과 유지보수성이 향상된다.

  • React에서는 "어떻게" 렌더링할지가 아니라 "무엇을" 렌더링할지 정의한다.
  • 각 상태에 대한 UI를 설계하고, React가 실제 DOM 업데이트를 처리한다.
  • 복잡한 UI 로직을 간단하게 표현할 수 있다.
//jsx
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}


4. 참고 사이트

  1. React 공식 문서: https://reactjs.org/docs/getting-started.html
  2. React Tutorial:  https://reactjs.org/tutorial/tutorial.html
  3. Create React App: https://create-react-app.dev