73. React 기초 (React Basics)

React 기초 (React Basics)

React는 UI를 컴포넌트 단위로 쌓아 올려 동적인 웹을 만들어내는 라이브러리다. 컴포넌트와 상태 관리를 중심으로 설계되어 효율적이고 유연한 개발을 가능하게 한다. 이번에는 React의 기본부터 심화까지 코드와 함께 자세히 풀어보려고 한다.

React를 잘 이해하면 복잡한 인터페이스도 깔끔하게 구성할 수 있다. 하나씩 단계별로 알아보자.

React 시작하기

React를 사용하려면 먼저 프로젝트를 설정해야 한다. create-react-app을 활용하면 간단하다:

# 터미널에서 실행
npx create-react-app my-app
cd my-app
npm start

// src/App.js 기본 구조
import React from 'react';

function App() {
    return (
        <div>
            <h1>안녕, React!h1>
        div>
    );
}

export default App;

위 코드는 React 앱의 기본 컴포넌트를 보여준다. JSX를 사용해 HTML처럼 작성할 수 있다.

1. 컴포넌트 만들기

React는 컴포넌트를 기반으로 동작한다. 간단한 컴포넌트를 만들어보자:

import React from 'react';

function Greeting(props) {
    return <p>안녕, {props.name}!p>;
}

function App() {
    return (
        <div>
            <Greeting name="홍길동" />
            <Greeting name="김영희" />
        div>
    );
}

export default App;
// "안녕, 홍길동!"
// "안녕, 김영희!"

props로 데이터를 전달해 재사용 가능한 컴포넌트를 만들었다.

2. 상태 관리

React에서 동적인 UI를 위해 useState 훅을 사용한다:

import React, { useState } from 'react';

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

    return (
        <div>
            <p>클릭 횟수: {count}p>
            <button onClick={() => setCount(count + 1)}>증가button>
        div>
    );
}

export default Counter;

useState로 상태를 정의하고, 버튼 클릭 시 상태를 업데이트했다.

3. 이벤트 처리

React에서 이벤트는 JSX 속성으로 처리된다:

import React, { useState } from 'react';

function InputForm() {
    const [text, setText] = useState("");

    const handleChange = (event) => {
        setText(event.target.value);
    };

    return (
        <div>
            <input type="text" value={text} onChange={handleChange} />
            <p>입력값: {text}p>
        div>
    );
}

export default InputForm;

onChange로 입력값을 실시간으로 상태에 반영했다.

4. 조건부 렌더링

React는 조건에 따라 UI를 다르게 렌더링할 수 있다:

import React, { useState } from 'react';

function Toggle() {
    const [isOn, setIsOn] = useState(false);

    return (
        <div>
            <button onClick={() => setIsOn(!isOn)}>토글button>
            {isOn ? <p>켜짐p> : <p>꺼짐p>}
        div>
    );
}

export default Toggle;

삼항 연산자로 상태에 따라 다른 내용을 표시했다.

5. 리스트 렌더링

배열 데이터를 렌더링할 때는 map을 활용한다:

import React from 'react';

function ItemList() {
    const items = ["사과", "바나나", "오렌지"];

    return (
        <ul>
            {items.map((item, index) => (
                <li key={index}>{item}li>
            ))}
        ul>
    );
}

export default ItemList;
// 
사과
바나나
오렌지

key 속성을 추가해 React가 리스트를 효율적으로 관리하게 했다.

6. 효과 훅 (useEffect)

useEffect로 컴포넌트의 생명주기를 관리할 수 있다:

import React, { useState, useEffect } from 'react';

function Timer() {
    const [seconds, setSeconds] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setSeconds((prev) => prev + 1);
        }, 1000);
        return () => clearInterval(interval);
    }, []);

    return <p>초: {seconds}p>;
}

export default Timer;

마운트 시 타이머를 시작하고, 언마운트 시 정리했다.

7. 데이터 가져오기

API 데이터를 가져와 렌더링해보자:

import React, { useState, useEffect } from 'react';

function PostList() {
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/posts")
            .then(res => res.json())
            .then(data => setPosts(data.slice(0, 5)));
    }, []);

    return (
        <ul>
            {posts.map(post => (
                <li key={post.id}>{post.title}li>
            ))}
        ul>
    );
}

export default PostList;

fetch로 데이터를 가져와 상태에 저장하고 렌더링했다.

8. 성능과 구조에 미치는 영향

React가 앱에 어떤 영향을 주는지 보자:

- 성능: 가상 DOM으로 변경 사항만 업데이트해 빠르다.

- 구조: 컴포넌트 기반으로 코드가 모듈화되고 관리하기 쉬워진다.

컴포넌트와 훅으로 React의 유연성과 효율성이 돋보인다.

마무리

React는 컴포넌트와 상태, 훅을 통해 동적인 UI를 단순화한다. 기본 컴포넌트부터 데이터 가져오기까지 다양한 상황에서 강력하게 활용할 수 있다.