JavaScript 고급 프레임워크

JavaScript React.js 기초

JavaScript React.js 기초 — 고급

React.js 기초

1. 도입 (왜 배워야 하는가)

React.js는 현대 웹 개발에서 가장 널리 사용되는 JavaScript 라이브러리 중 하나입니다. Facebook에서 개발하고 유지보수하며, 사용자 인터페이스(UI)를 구축하는 데 강력한 도구로 자리 잡았습니다. 실무에서는 빠른 개발과 유지보수가 가능하며, 많은 기업이 React를 채택하고 있습니다.

React.js를 배우지 않으면 다음과 같은 문제가 발생할 수 있습니다:

비효율적인 상태 관리: 상태(state)를 효과적으로 관리하지 못해 애플리케이션의 성능이 저하될 수 있습니다.
코드 재사용의 어려움: 컴포넌트를 잘 구성하지 않으면 코드의 재사용성이 떨어져 유지보수가 힘들어집니다.
UI 변경 시 복잡성 증가: 데이터 변화에 따라 UI를 업데이트하는 데 어려움을 겪을 수 있습니다.

2. 핵심 개념 설명

컴포넌트

컴포넌트는 UI의 독립적인 조각으로, 재사용이 가능하고 상태를 가질 수 있습니다. 마치 레고 블록처럼, 각 블록(컴포넌트)을 조합하여 큰 구조물을 만드는 방식으로 생각할 수 있습니다.

JSX

JSX는 JavaScript XML의 약자로, JavaScript 코드 안에 HTML과 같은 문법을 사용할 수 있게 해줍니다. 이는 UI를 정의하는 데 직관적이며, 가독성을 높여줍니다.

용어	설명
컴포넌트	UI의 재사용 가능한 구성 요소
JSX	HTML과 유사한 문법으로 UI를 정의하는 방법

3. 기본 코드 예제

다음은 간단한 React 컴포넌트를 만드는 예제입니다.

import React from 'react';
import ReactDOM from 'react-dom';

function HelloWorld() {
    return <h1>안녕하세요, React!</h1>; // 화면에 "안녕하세요, React!"를 출력
}

ReactDOM.render(<HelloWorld />, document.getElementById('root')); // 'root'라는 ID를 가진 HTML 요소에 컴포넌트를 렌더링

실행 결과

웹 페이지에 "안녕하세요, React!"라는 텍스트가 표시됩니다.

코드 한 줄씩 동작 설명

import React from 'react';: React 라이브러리를 불러옵니다.
import ReactDOM from 'react-dom';: ReactDOM을 불러와 DOM에 접근할 수 있게 합니다.
function HelloWorld() { ... }: HelloWorld라는 함수형 컴포넌트를 정의합니다.
return <h1>안녕하세요, React!</h1>;: 이 컴포넌트가 렌더링할 내용을 정의합니다.
ReactDOM.render(...);: HelloWorld 컴포넌트를 HTML의 'root' 요소에 렌더링합니다.

4. 실전 활용 예제

예제 1: 쇼핑몰 장바구니

장바구니에 상품을 추가하고, 삭제하는 컴포넌트를 구현해보겠습니다.

import React, { useState } from 'react';

function ShoppingCart() {
    const [items, setItems] = useState([]); // 장바구니 아이템 상태 정의

    const addItem = (item) => {
        setItems([...items, item]); // 새로운 아이템을 장바구니에 추가
    };

    return (
        <div>
            <button onClick={() => addItem('상품1')}>상품1 추가</button>
            <ul>
                {items.map((item, index) => <li key={index}>{item}</li>)} // 장바구니 아이템 목록 출력
            </ul>
        </div>
    );
}

예제 2: 사용자 프로필

사용자 정보를 표시하고 업데이트하는 컴포넌트입니다.

import React, { useState } from 'react';

function UserProfile() {
    const [name, setName] = useState('홍길동'); // 사용자 이름 상태 정의

    const updateName = (e) => {
        setName(e.target.value); // 입력된 값으로 사용자 이름 업데이트
    };

    return (
        <div>
            <input type="text" value={name} onChange={updateName} /> {/ 이름 입력 필드 /}
            <p>사용자 이름: {name}</p> {/ 현재 사용자 이름 표시 /}
        </div>
    );
}

5. 흔한 실수와 주의사항

실수 1: 상태 직접 변경

// 잘못된 코드
items[0] = '변경된 상품'; // 상태를 직접 수정

올바른 코드:

setItems([...items]); // 상태를 불변성 유지하며 업데이트

실수 2: JSX에서 조건문 사용 오류

// 잘못된 코드
return (
    {isLoggedIn ? <p>환영합니다!</p> : <p>로그인 해주세요.</p>} // JSX 안에서 조건문 사용
);