1021 React 기초 복습 (1/3): 핵심 원리와 구성 요소
✅ 1. React란 무엇인가? (선언형 UI 라이브러리)
-
React는 페이스북(현 메타)에서 개발한, 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브R입니다.
-
핵심 철학:
- 컴포넌트 기반 (Component-Based): UI를 독립적이고 재사용 가능한 조각들(컴포넌트)로 나누어 관리합니다. 레고 블록을 조립하듯 UI를 구축할 수 있습니다.
- 선언형 (Declarative): "어떻게(How) 그릴 것인가"가 아닌, "무엇을(What) 그릴 것인가"에 집중합니다. 특정 상태(State)일 때 UI가 어떻게 보여야 하는지만 선언하면, React가 알아서 화면을 변경해줍니다.
- 전통적 방식 (명령형): "ID가 'title'인 요소의 텍스트를 'Hello'로 바꿔라." (직접 DOM 조작)
- React 방식 (선언형): "title 상태가 'Hello'이면, 화면에 'Hello'를 보여줘."
- Virtual DOM: 상태가 변경될 때마다 실제 DOM을 직접 조작하는 대신, 메모리상에 가상의 DOM(Virtual DOM)을 먼저 그리고 이전 가상 DOM과 비교합니다. 그 후, 변경된 부분만 실제 DOM에 최소한으로 적용하여 뛰어난 성능을 보장합니다.
✅ 2. JSX (JavaScript XML): UI를 작성하는 문법
-
JSX는 JavaScript를 확장한 문법으로, JavaScript 파일 내에서 HTML과 매우 유사한 형태로 UI 구조를 작성할 수 있게 해줍니다.
-
주요 규칙:
- 하나의 루트 요소: 모든 JSX 코드는 반드시 하나의 최상위 태그로 감싸여야 합니다. (보통
<div>나<>(Fragment)를 사용) className사용: HTML의class속성 대신className을 사용합니다. (class는 JavaScript의 예약어)- JavaScript 표현식 삽입: 중괄호
{}를 사용하면 JSX 내부에 JavaScript 변수나 표현식을 넣을 수 있습니다. - 카멜 케이스(camelCase):
onclick대신onClick,background-color대신style={{ backgroundColor: 'red' }}와 같이 이벤트 핸들러나 스타일 속성은 카멜 케이스로 작성합니다.
function App() { const name = "React"; return ( <div className="container"> <h1>Hello, {name}!</h1> <p>This is a JSX example.</p> </div> ); } - 하나의 루트 요소: 모든 JSX 코드는 반드시 하나의 최상위 태그로 감싸여야 합니다. (보통
✅ 3. 컴포넌트 (Component): UI의 독립적인 블록
-
컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 최소 단위입니다. 현대 React에서는 주로 함수형 컴포넌트를 사용합니다.
-
함수형 컴포넌트: JavaScript 함수이며,
props라는 객체를 인자로 받아 화면에 렌더링될 React 엘리먼트(JSX)를 반환합니다. -
특징:
- 재사용성: 하나의 컴포넌트를 여러 곳에서 반복해서 사용할 수 있습니다.
- 캡슐화: 컴포넌트는 자신만의 로직과 상태를 가질 수 있어 독립적으로 동작합니다.
- 합성: 작은 컴포넌트들을 조합하여 더 크고 복잡한 컴포넌트나 페이지를 만들 수 있습니다.
// Greeting.js - 재사용 가능한 컴포넌트 function Greeting(props) { return <h2>Hello, {props.name}!</h2>; } // App.js - 컴포넌트 합성 function App() { return ( <div> <Greeting name="Alice" /> <Greeting name="Bob" /> </div> ); }
✅ 4. Props (Properties): 데이터의 하향식 전달
-
Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위한 메커니즘입니다. React의 핵심적인 단방향 데이터 흐름(One-way Data Flow)을 구성합니다.
-
핵심 특징:
- 읽기 전용 (Read-Only): 자식 컴포넌트는 전달받은
props를 절대 직접 수정해서는 안 됩니다. 이는 데이터 흐름을 예측 가능하게 만드는 중요한 원칙입니다. - 객체 형태: 자식 컴포넌트는
props를 하나의 객체로 전달받습니다.
// ParentComponent.js function ParentComponent() { const userData = { name: "Charlie", age: 30 }; return <ChildComponent user={userData} />; } // ChildComponent.js function ChildComponent(props) { // props.user는 { name: "Charlie", age: 30 } 객체 return ( <p> Name: {props.user.name}, Age: {props.user.age} </p> ); } - 읽기 전용 (Read-Only): 자식 컴포넌트는 전달받은
✅ 5. State (useState): 컴포넌트의 기억 장치
-
State(상태)는 컴포넌트가 내부적으로 소유하고 관리하는, 변할 수 있는 데이터입니다. 사용자의 인터랙션 등으로 인해 변경될 수 있는 모든 값은 State로 관리해야 합니다.
-
React의 핵심 원리: State가 변경되면, React는 해당 컴포넌트를 자동으로 다시 렌더링(Re-render)하여 화면을 업데이트합니다.
-
useStateHook: 함수형 컴포넌트에서 State를 사용할 수 있게 해주는 Hook입니다.- 문법:
const [currentState, setStateFunction] = useState(initialState); currentState: 현재 상태 값.setStateFunction: 상태를 갱신하는 함수. 이 함수를 통해서만 상태를 변경해야 합니다.initialState: 상태의 초기값.
import React, { useState } from 'react'; function Counter() { // count 상태를 0으로 초기화 const [count, setCount] = useState(0); const increment = () => { // setCount 함수를 호출하여 count 상태를 갱신 setCount(count + 1); }; return ( <div> <p>You clicked {count} times</p> <button onClick={increment}>Click me</button> </div> ); } - 문법:
📌 요약
- React는 컴포넌트 단위로 UI를 조립하는 선언형 라이브러리입니다.
- UI 구조는 JSX라는 직관적인 문법으로 작성합니다.
- 데이터는 부모에서 자식으로 Props를 통해 단방향으로 흐르며, 자식은
props를 수정할 수 없습니다. - 컴포넌트가 스스로 기억하고 변경해야 하는 데이터는 State (
useState)로 관리합니다. - State가 변경되면 컴포넌트가 리렌더링되어 화면이 업데이트되는 것이 React의 핵심적인 반응성(Reactivity) 원리입니다.```
