Published on

1단계: React 기본기

React 기본기

Next.js는 React 기반 프레임워크이기 때문에, React의 기초를 탄탄히 이해하는 것이 중요합니다.
이 단계에서는 JSX 문법, Props 전달 방식, State 관리, 이벤트 처리, 조건부 렌더링, 리스트 출력, 컴포넌트 분리 등
실전에서 꼭 쓰는 React 핵심 개념들을 예제를 통해 배웁니다.

1-1. JSX 문법

JSX는 JavaScript 코드 안에 HTML을 작성할 수 있도록 해주는 문법입니다.

function Hello() {
  return <h1>Hello, React!</h1>;
}
  • 반드시 하나의 부모 태그로 감싸야 합니다.
  • JS 표현식은 중괄호 {} 안에 작성합니다.
const name = 'H.Y';
return <h1>안녕하세요, {name}님</h1>;

1-2. Props & State

✅ Props

부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용합니다.

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

<Welcome name="영수" />

✅ State

컴포넌트 내부의 상태값을 관리할 때 사용합니다.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

1-3. 이벤트 처리

React에서는 DOM 이벤트를 camelCase로 작성하고, 함수로 이벤트를 처리합니다.

<button onClick={() => alert('클릭됨!')}>눌러봐</button>

또는 핸들러를 함수로 분리할 수도 있습니다.

function handleClick() {
  console.log('클릭!');
}

1-4. 조건부 렌더링

조건에 따라 서로 다른 UI를 보여줄 수 있습니다.

function Greeting({ isLoggedIn }) {
  return <h1>{isLoggedIn ? '환영합니다!' : '로그인해주세요'}</h1>;
}

1-5. 리스트 렌더링 + Key

배열 데이터를 화면에 출력할 때는 .map()을 사용하며, 각 항목에는 key를 반드시 부여해야 합니다.

const users = ['홍길동', '이몽룡', '성춘향'];
return (
  <ul>
    {users.map((user, index) => (
      <li key={index}>{user}</li>
    ))}
  </ul>
);

1-6. 컴포넌트 구조 분리

컴포넌트를 폴더로 쪼개면 유지보수가 쉬워집니다.

components/
  Header.js
  Footer.js
  UserCard.js

각 파일은 독립된 UI 단위를 정의하고 props로 데이터만 주고받도록 구성합니다.

요약

  • JSX는 JavaScript 내에 HTML 문법을 쓸 수 있는 구조이며 {}로 표현식을 렌더링합니다.
  • props는 부모 → 자식 데이터 전달, state는 내부 상태 관리에 사용됩니다.
  • 이벤트는 onClick 등으로 처리하며 함수 분리 가능.
  • 조건부 렌더링은 삼항 연산자나 논리 연산자로 구현.
  • 리스트 출력 시 .map() + key 속성을 반드시 사용합니다.
  • UI를 작은 컴포넌트로 나누면 유지보수성이 높아집니다.

심화학습

Q1. useState와 props는 각각 어떤 역할을 하고, 어떻게 다르게 사용할까?

A: props는 외부(부모)에서 주어진 고정값이고, useState는 내부에서 바뀌는 상태값입니다. props는 읽기 전용이고, state는 변경 가능하여 동적인 UI를 만듭니다.

Q2. 컴포넌트를 어떤 기준으로 쪼개야 유지보수가 쉬워질까?

A: 화면에서 재사용 가능한 단위나 의미 있는 UI 블록 기준으로 나누면 됩니다. 하나의 컴포넌트가 너무 많은 역할을 하면 나중에 테스트와 유지보수가 어려워집니다.

Q3. 리스트 렌더링에서 key는 왜 꼭 넣어야 할까? 중복되면 어떤 문제가 생길까?

A: key는 React가 DOM을 효율적으로 업데이트하기 위해 각 항목을 구분하는 식별자입니다. 중복되면 업데이트 시 오작동하거나 성능 문제가 생깁니다.