처음 배우는 리액트, 초보자도 쉽게 따라하는 React.js 기초 가이드

🛠️ Create React App으로 프로젝트 시작하기

React.js를 처음 시작할 때 가장 편리한 방법 중 하나는 Create React App(CRA)을 이용하는 것입니다.
복잡한 설정 없이 단 한 줄의 명령어로 개발 환경을 자동으로 구성해주기 때문에 초보자에게 적합합니다.
CRA를 사용하면 Babel, Webpack 등의 설정을 신경 쓰지 않아도 되고, 바로 코드 작성에 집중할 수 있습니다.

📌 설치 명령어

CRA를 사용하기 위해서는 Node.js와 npm이 사전에 설치되어 있어야 합니다.
설치가 되어 있다면 아래 명령어를 실행해 새 프로젝트를 시작할 수 있습니다.

npx create-react-app my-app
cd my-app
npm start

이후 http://localhost:3000에서 기본 React 화면이 실행되며, 이제부터 본격적인 개발을 시작할 수 있습니다.

📌 프로젝트 구조 이해하기

CRA로 생성된 폴더 안에는 다음과 같은 구조가 기본적으로 포함되어 있습니다.

🔍 JSX 문법 제대로 이해하기

React에서 UI를 구성할 때 가장 먼저 마주치는 문법이 바로 JSX(JavaScript XML)입니다.
JSX는 자바스크립트 코드 안에 HTML과 유사한 코드를 작성할 수 있게 해주는 확장 문법으로, 가독성을 높이고 구조를 직관적으로 표현할 수 있는 장점이 있습니다.

하지만 엄밀히 말하면 JSX는 HTML이 아니기 때문에 몇 가지 문법적 차이점을 가지고 있습니다.
예를 들어 class 속성 대신 className, label 요소에는 htmlFor 속성을 사용해야 합니다.

📌 JSX 예시 코드

function Greeting() {
  return (
    <div>
      <h1>안녕하세요!</h1>
      <p>React에 오신 것을 환영합니다.</p>
    </div>
  );
}

이처럼 JSX는 HTML과 매우 유사하지만, 사실상 자바스크립트 코드이기 때문에 중괄호 {}를 이용해 변수나 함수 결과를 삽입할 수 있습니다.

📌 JSX에서 주의할 점

• ⚠️모든 컴포넌트는 하나의 루트 엘리먼트를 반환해야 합니다.
• 🔤속성 이름은 camelCase를 사용해야 하며, 이벤트 핸들러는 onClick처럼 대소문자를 구분합니다.
• 📛JSX 안에서 주석을 달 때는 {/* 주석 */} 형태를 사용합니다.

💡 컴포넌트 단위로 UI 구성하는 법

React.js에서 모든 화면은 컴포넌트(Component)로 구성됩니다.
컴포넌트란 간단히 말해 UI를 독립적으로 나누는 코드 블록이며, 재사용성과 유지보수에 큰 장점을 가집니다.
하나의 페이지를 여러 개의 컴포넌트로 나누면 각 부분을 독립적으로 관리하고 개발할 수 있게 됩니다.

React에서 컴포넌트를 만드는 방식은 두 가지가 있습니다.
함수형 컴포넌트와 클래스형 컴포넌트가 그것입니다.
하지만 최근에는 React Hook이 등장하면서 대부분의 개발자들이 함수형 컴포넌트를 선호합니다.

📌 함수형 컴포넌트 예시

function Welcome(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

위의 예제에서 props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용됩니다.
그리고 컴포넌트 이름은 반드시 대문자로 시작해야 React가 컴포넌트로 인식합니다.

📌 컴포넌트의 재사용

컴포넌트는 한 번 정의하면 어디서든 반복해서 사용할 수 있어 코드 중복을 줄이고, UI를 체계적으로 구성할 수 있습니다.

<Welcome name="지은" />
<Welcome name="민준" />

⚙️ 상태(state)와 속성(props) 완벽 가이드

React에서 UI를 동적으로 만드는 데 핵심이 되는 두 가지 개념이 있습니다.
바로 props(속성)과 state(상태)입니다.
props는 외부로부터 전달받는 데이터이며, state는 내부에서 관리되는 데이터입니다.
이 두 가지를 잘 활용하면 사용자 입력, 버튼 클릭, 값 변경 등 다양한 UI 이벤트에 대응할 수 있습니다.

📌 props란 무엇인가요?

props는 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용합니다.
자식 컴포넌트는 이 값을 읽기 전용으로만 사용할 수 있습니다.

function Welcome(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

이 컴포넌트를 사용할 때는 다음과 같이 name 값을 전달합니다.

<Welcome name="예진" />

📌 state는 언제 사용할까요?

state는 컴포넌트 내부에서 변화되는 데이터를 다룰 때 사용합니다.
예를 들어 버튼 클릭 시 값이 증가하거나 사용자의 입력 값을 저장할 때 주로 사용됩니다.

import { useState } from 'react';

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

  return (
    <div>
      <p>현재 숫자: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

위 코드에서 useState는 React의 Hook 중 하나로, 상태를 정의할 수 있게 해줍니다.
버튼을 클릭할 때마다 setCount가 호출되어 count 값이 갱신되고, 이 변화는 자동으로 UI에 반영됩니다.

📦 리스트 렌더링과 폼 데이터 처리 실습

React에서 반복되는 데이터를 효율적으로 화면에 출력하려면 리스트 렌더링이 필요합니다.
또한 사용자로부터 입력을 받는 폼 요소들은 상태와 연결하여 처리해야 동적인 UI를 구현할 수 있습니다.

📌 배열 데이터를 렌더링하는 기본 방식

const fruits = ['사과', '바나나', '포도'];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

map() 함수를 이용해 배열의 각 요소를 렌더링합니다.
이때 key 속성을 꼭 넣어줘야 React가 요소를 구분할 수 있습니다.

📌 사용자 입력값 처리하기

React에서 입력 요소(input, textarea 등)는 상태(state)와 연결하여 처리합니다.
이를 controlled component라고 부르며, 입력값을 실시간으로 상태에 반영할 수 있습니다.

import { useState } from 'react';

function NameInput() {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  };

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

이처럼 입력값은 onChange 이벤트를 통해 상태에 업데이트되며,
그 상태는 다시 화면에 즉시 반영되어 사용자 경험을 향상시킵니다.

❓ 자주 묻는 질문 (FAQ)