[Frontend] React란

목차 (OPEN)

• 🌱 React란
• 🧠 React를 사용하는 이유
• 🏗️ React의 핵심 개념

 

 

 

🌱 React란

React는 Facebook (Meta)에서 개발한 자바스크립트 기반의 UI 라이브러리이다.

 

(간혹 프레임워크라고 알고 계신 분들이 있는데, 라이브러리입니다 ..)

 

주로 웹 애플리케이션의 사용자 인터페이스 (UI)를 만들기 위해 사용된다.

 

---

🧠 React를 사용하는 이유

1️⃣ 선언형 프로그래밍 방식

React는 HTML 요소를 직접 수정하지 않아도,

상태(state)만 바꿔주면 알아서 화면(UI)을 다시 그려준다.

 

예를 들어, 버튼을 클릭해서 숫자를 증가시킬 때,

우리가 DOM을 직접 보작하지 않아도

상태가 바뀌면 React가 자동으로 UI를 업데이트해준다.

 

즉, 더 적은 코드로도 예측 가능한 UI를 만들 수 있는 것이다.

 

 

2️⃣ 컴포넌트 기반 구조

React는 화면을 작고 독립적인 컴포넌트 단위로 나누어 개발할 수 있도록 도와준다.

각 컴포넌트는 자신만의 state와 props를 가질 수 있어서 재사용과 유지보수에 매우 유리하다.

 

예를 들면, 버튼이나 카드, 목록, 입력창 등

하나의 컴포넌트를 여러 곳에서 재사용할 수 있다.

 

 

3️⃣ 가상 DOM

React는 변경된 내용을 직접 DOM에 반영하기 전에

메모리 상의 가상 DOM 에서 먼저 변경 사항을 계산한 후에

진짜 DOM과 비교해서 바뀐 부분만을 최소한으로 업데이트한다.

 

이러한 방식 덕분에 복잡한 화면에서도 빠르고 부드러운 UI 성능을 낼 수 있는 것이다.

 

 

4️⃣ 커뮤니티와 생태계

React는 전 세계적으로 많이 사용되는 프론트엔드 라이브러리 중 하나여서

관련된 라이브러리나 도구, 템플릿 등이 매우 풍부하다.

 

예를 들어서

상태 관리는 Redux, Zustand, Recoil

라우팅은 React Router

API 통신은 Tanstack Query, SWR

스타일링은 TailwindCSS, styled-components

등이 있다.

 

또한, 공식 문서나 Stack Overflow 같은 자료도 많아서

문제가 생겨도 검색 만으로도 대부분을 해결할 수 있다.

 

---

🏗️ React의 핵심 개념

1️⃣ JSX (JavaScript + XML)

JSX는 자바스크립트 안에 HTML을 직접 작성할 수 있도록 해주는 React만의 특별한 문법이다.

HTML과 비슷하게 보이지만, 사실은 JavaScript 코드인 것이다.

 

const element = <h1>Hello, React!</h1>;

 

이런 코드는 실제로는 Babel이라는 도구에 의해

React.createElement() 함수 호출 코드로 변환되어 브라우저에서 동작한다.

👉 브라우저는 JSX를 바로 이해하지 못하므로, JSX는 JS로 변환되어 실행되는 것이다.

 

 

2️⃣ 컴포넌트

컴포넌트는 React에서 화면을 구성하는 가장 작은 다위이다.

각각의 버튼, 카드, 헤더 등은 모두 컴포넌트로 표현할 수 있다.

 

컴포넌트는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다.

 

예전에는 클래스형을 많이 썼다고 하지만,

요즘에는 함수형 컴포넌트 + 훅 (hooks) 조합이 표준이라고 한다.

 

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

 

3️⃣ Props (Properties)

props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용하는 값이다.

React에서 컴포넌트 간 정보를 주고받는 방법이라고 보면 된다.

 

이러한 props는 읽기 전용이기 때문에, 자식 컴포넌트에서는 props를 수정할 수 없다.

 

 

4️⃣ State (상태)

State는 컴포넌트 내부에서 관리되는 변경 가능한 데이터로써,

사용자의 입력, 버튼 클릭, 타이머 등의 상황에 따라 값이 변할 수 있다.

 

React에서는 useState라는 훅을 사용해서 상태를 선언하고 관리한다.

 

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

 

여기에서 count는 현재 상태 값이고,

setCount는 상태를 변경하는 함수이다.

그리고, State가 변경되면 해당 컴포넌트는 자동으로 다시 랜더링된다.

 

 

5️⃣ useEffect

useEffect는 컴포넌트가 화면에 처음 나타나거나, 특정 값이 변경될 때

자동으로 실행되는 코드를 처리하는 훅이다.

 

대표적인 예시로는

API 호출, 타이머 설정, 이벤트 리스너 등록 및 제거 등과 같은 작업들이 있다.