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. 참고 사이트
- React 공식 문서: https://reactjs.org/docs/getting-started.html
- React Tutorial: https://reactjs.org/tutorial/tutorial.html
- Create React App: https://create-react-app.dev