React

1.react project creation 2.React Basics 1.Folder structure and description 1. Individual file description 2. Difference between JavaScript and TypeScript files 2.Component 1. Creating a screen with components in SPA 2. Why does the component name start with a capital letter? 3. component is used like a tag in JSX 4. export and import 5. Return value of function component 6. Function component and class component 7. JSX Grammar and Rules 1. Convert JSX and React.createElement 2. Caution about escaping JSX and HTML insertion 3. Write annotation in JSX 8. Separation and combination of components 3.Condition, branch, repeat processing 1. Conditional Rendering 2. List Rendering 1. List rendering key 3.Component Development 1.Re-rendering timing 2. props 1. data type of props 2. Decomposition of props structure and default value 3. Function props and event processing 4. children 3.state default useState 1. Functional update 2. State immutability 4.Event Handling 1.React events and handlers 2.Event propagation 1. Capture and Bubble Stage 2. Stop propagation with stopPropagation 3.Cancel default action with preventDefault 5.Form 1.Form input value management 1. What is the difference between target and current? 2. Control component 3. Uncontrolled component 2.Example of form implementation according to input elements 1. Managing input elements as state 2. Nested object state update 3. array state update 4. Update nested state with Immer 3. React Hook Form 1. Install 2. Basic usage 6.Hook Utilization 1.useState: state and setter 2.useEffect: Synchronize with external system 3.useRef: Value reference separate from rendering 4.useContext: Passing values ​​to deep components 5.useReducer: Complex state update 6.Performance Optimization Hook 7.useId: Create accessibility ID 8.Prioritized UI updates 9.Action Hook in React 19 7.Embedded Component 1. Fragment 2. StrictMode 3. Profiler 4. Suspense 5.Lazy loading components 6.Import data via network 7.Loading·Error·Empty result processing 8.Style in component development 1. Styled JSX 2. styled-components 3. Emotion 9.React Router 1. SPA 2.Placement of components without a router 3.Deployment using a router 4.Path parameters 5.Go to page with Link 6.Show your current location with NavLink 10.Portal 1.Separating DOM locations with Portal 2.Error Handling rendering errors with Boundary 11.Use the React library 1.Construct UI with MUI Material 2.Developing components in Storybook 3.Manage server status with TanStack Query 12.Test 1.Types of tests 2.Select Test Tool 3.Choosing tests in practice

Create React App (CRA) is the old standard way to create React projects, supporting native JavaScript projects and TypeScript templates. When creating a project, necessary packages are also installed.

This course uses Vite and TypeScript. Vite is a fast and lightweight development server and build tool.

React projects are installed with libraries that create screens and tools that help with development and build. You can check the package and execution command at package.json.

npm installinstalls the package declared in package.json, and package-lock.jsonrecords the installed package version, reducing differences between development environments.

프로젝트/
├── public/              정적 파일 (빌드 과정에서 그대로 복사)
├── src/                 React 애플리케이션 소스
│   ├── assets/          컴포넌트에서 사용하는 이미지 등의 자원
│   ├── App.tsx          최상위 애플리케이션 컴포넌트
│   ├── main.tsx         애플리케이션 진입점
│   └── ...              기능별 컴포넌트와 스타일
├── index.html           브라우저가 처음 받아 보는 HTML
├── package.json         패키지와 npm 명령
├── package-lock.json    설치 패키지 버전 기록
├── tsconfig*.json       TypeScript 설정
└── vite.config.ts       Vite 설정

<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>

public/
├── favicon.ico
├── robots.txt
└── images/
    └── logo.png

<img src="/images/logo.png" alt="로고" />

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

function App() {
  return (
    <main>
      <h1>안녕하세요, React!</h1>
    </main>
  );
}

export default App;

index.html → src/main.tsx → src/App.tsx → 화면에 표시

function Greeting() {
  return <h1>안녕하세요, React!</h1>;
}

function Greeting() {
  return <p>반갑습니다.</p>;
}

function App() {
  return (
    <main>
      <Greeting />
    </main>
  );
}

function Greeting() {
  return <p>안녕하세요!</p>;
}

function App() {
  return (
    <section>
      <h1>인사말</h1>
      <Greeting />
      <Greeting />
    </section>
  );
}

// Greeting.tsx
export default function Greeting() {
  return <p>안녕하세요!</p>;
}

// App.tsx
import Greeting from './Greeting';

function App() {
  return <Greeting />;
}

export default App;

function Profile() {
  return (
    <>
      <h2>홍길동</h2>
      <p>React 학습 중</p>
    </>
  );
}

const title = 'React';

function Welcome() {
  return <h1>안녕하세요, {title}!</h1>;
}

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

function Profile() {
  return (
    <section className="profile">
      <h2>홍길동</h2>
      <label htmlFor="email">이메일</label>
      <input id="email" />
    </section>
  );
}

const element = <h1 className="title">안녕하세요</h1>;

const element = React.createElement(
  'h1',
  { className: 'title' },
  '안녕하세요',
);

const userInput = '<script>alert("hello")</script>';

function Message() {
  return <p>{userInput}</p>;
}

function Article() {
  const html = '<strong>중요한 안내</strong>';

  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

function Notice() {
  // Comments in area JavaScript
  return (
    <section>
      {/* Comments in JSX */}
      <p>공지사항입니다.</p>
    </section>
  );
}

type GreetingCardProps = {
  name: string;
};

function PageHeader() {
  return <header><h1>React 학습 노트</h1></header>;
}

function GreetingCard({ name }: GreetingCardProps) {
  return (
    <section>
      <h2>환영합니다, {name}님!</h2>
      <p>오늘도 React를 함께 배워 봅시다.</p>
    </section>
  );
}

function PageFooter() {
  return <footer>학습을 응원합니다.</footer>;
}

function App() {
  return (
    <main>
      <PageHeader />
      <GreetingCard name="민지" />
      <PageFooter />
    </main>
  );
}

2.3 Condition, branch, repetition processing

2.3.1 Conditional Rendering

Conditional rendering is a method of selecting which JSX to display on the screen based on the results of a condition. JavaScript's if statement can be used outside of JSX, and inside JSX, the ternary operator or &&is often used.

type GreetingProps = {
  isLoggedIn: boolean;
};

function Greeting({ isLoggedIn }: GreetingProps) {
  if (!isLoggedIn) {
    return <p>로그인해 주세요.</p>;
  }

  return <p>환영합니다!</p>;
}

When selecting between two results within JSX, you can use the ternary operator.

function LoginStatus({ isLoggedIn }: GreetingProps) {
  return <p>{isLoggedIn ? '로그인 상태' : '로그아웃 상태'}</p>;
}

function Inbox({ unreadCount }: { unreadCount: number }) {
  return (
    <section>
      <h2>받은 편지함</h2>
      {unreadCount > 0 && <p>읽지 않은 메시지: {unreadCount}</p>}
    </section>
  );
}

Which method to use depends on how complex the condition is and how much content is to be rendered. Complex conditions are easier to read if calculated outside of JSX.

2.3.2 List rendering

When displaying data in an array repeatedly on the screen, each data is usually converted to a JSX element using map(). You can also conditionally handle screens when the list is empty.

type Course = {
  id: number;
  title: string;
};

const courses: Course[] = [
  { id: 1, title: '컴포넌트 기초' },
  { id: 2, title: '조건부 렌더링' },
];

function CourseList() {
  if (courses.length === 0) {
    return <p>강좌가 없습니다.</p>;
  }

  return (
    <ul>
      {courses.map((course) => (
        <li key={course.id}>{course.title}</li>
      ))}
    </ul>
  );
}

filter()and display it as map(). sort()reorders the array itself, so it sorts the copy so that it does not directly sort the state or the original shared array.

const visibleCourses = courses
  .filter((course) => course.title.includes('렌더링'))
  .sort((a, b) => a.title.localeCompare(b.title));

In the example above, filter()creates a new array, and the subsequent call sort()sorts that new array, leaving the original courses array unchanged. Avoid calling courses.sort(...)directly on the original array.

map()If each item in the result consists of multiple JSX elements, you can group them into a Fragment. At this time, the list items are separated bykeyTo specify , the abbreviated grammar<>...</>insteadFragmentUse explicitly.

import { Fragment } from 'react';

function CourseDetails() {
  return courses.map((course) => (
    <Fragment key={course.id}>
      <h3>{course.title}</h3>
      <hr />
    </Fragment>
  ));
}

2.3.2.1 List rendering key

keyis a special value that React uses to distinguish each item in the list from each other and to determine which elements have changed when items are added, deleted, or moved. When rendering a listmap()On the top element this returns:keymust be specified.

Whenever possible, use unique, stable identifiers embedded in your data (such as database IDs). An array index is not an appropriate key in a list where the order of items may change or intermediate items may be added or deleted. In this case, React may incorrectly link the old and new items, leaving inputs or component state in the wrong item. Consider using an index as a key only when the list is fixed and the order and items do not change.

{courses.map((course) => (
  <li key={course.id}>{course.title}</li>
))}

Keys within the same list must be different, and a new random value must not be created and used as a key each time rendering. keyis a value for React to manage the list, so it is not passed as a general prop to the component. If the ID is needed within the component, it is passed separately from key.

3.1 Re-rendering timing

Re-rendering is the process by which React runs the component again to calculate new content to display on the screen. It usually starts when:

1.If the state of the component changes
When you update the value with the state setting function, React re-renders the component. Rendering may be skipped if it is determined that the new value is the same as the old value. 2.If the parent component has been re-rendered
When the parent is re-rendered, the children are also re-rendered by default. At this time, the child receives the props passed by the parent and recalculates the screen. memoallows you to skip rendering of children when the props are the same, but can be re-rendered for other reasons such as state or context changes. 3.If the context value in use has changed
useContext()are re-rendered when the value of the Provider that provides the value changes. How to use Context and useContext()is explained in Section 6.4 “useContext”.

Changing props is not a separate startup cause from parent rendering, but rather a situation where the values ​​passed to the child change when the parent is re-rendered.It's easy to understand. For example, if the parent runs again and the name it passes to the child changes, the child recalculates the screen using the new name.

Re-rendering does not mean recreating the entire screen from scratch. React compares the component's newly calculated results with the previous results and reflects only the actual changes in the browser DOM. In other words, component being re-executed,, and , all elements of the screen being recreated,, are two different things.

type GreetingProps = {
  name: string;
};

function Greeting(props: GreetingProps) {
  return <p>안녕하세요, {props.name}님!</p>;
}

function App() {
  return <Greeting name="민지" />;
}

<UserCard
  name="민지"
  age={20}
  isActive={true}
  hobbies={['독서', '산책']}
  user={{ id: 1, role: 'admin' }}
/>

type GreetingProps = {
  name: string;
};

// It takes a props object as a parameter and destructures the name within it.
function Greeting({ name }: GreetingProps) {
  return <h2>안녕하세요, {name}님!</h2>;
}

function App() {
  // In JSX, pass the name prop to the Greeting component.
  return <Greeting name="민지" />;
}

type GreetingProps = {
  name?: string;
};

function Greeting({ name = '손님' }: GreetingProps) {
  return <h2>안녕하세요, {name}님!</h2>;
}

function App() {
  return <Greeting />;
}

type ActionButtonProps = {
  onAction: () => void;
};

function ActionButton({ onAction }: ActionButtonProps) {
  return <button onClick={onAction}>실행</button>;
}

function App() {
  function handleAction() {
    console.log('버튼을 눌렀습니다.');
  }

  return <ActionButton onAction={handleAction} />;
}

import type { ReactNode } from 'react';

type CardProps = {
  // ReactNode is a type that represents content that React can render.
  children: ReactNode;
};

// The content received through the children prop is displayed in the card.
function Card({ children }: CardProps) {
  return <section className="card">{children}</section>;
}

function App() {
  // <Card>and </Card> are passed as children.
  return (
    <Card>
      <h2>공지사항</h2>
      <p>새로운 소식이 있습니다.</p>
    </Card>
  );
}

import { useState } from 'react';

function Counter() {
  // 0 is the initial state to use for the first render.
  const [count, setCount] = useState(0);

  function handleClick() {
    // Request the next state value as a setter.
    setCount(count + 1);
  }

  return <button onClick={handleClick}>클릭한 횟수: {count}</button>;
}

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

  function increaseFromCurrentRender() {
    // All three times it is calculated based on the same count of the current rendering.
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  }

  function increaseWithUpdater() {
    // Each function inherits and calculates the result of the previous update.
    setCount((current) => current + 1);
    setCount((current) => current + 1);
    setCount((current) => current + 1);
  }

  return (
    <>
      <p>현재 값: {count}</p>
      <button onClick={increaseFromCurrentRender}>현재 값으로 세 번 증가</button>
      <button onClick={increaseWithUpdater}>함수형으로 세 번 증가</button>
    </>
  );
}

type Profile = {
  name: string;
  city: string;
};

function ProfileCard() {
  const [profile, setProfile] = useState<Profile>({ name: '민지', city: '서울' });

  function changeCity() {
    // Creates a new object containing the values ​​to be changed, without modifying the existing object.
    setProfile((currentProfile) => ({ ...currentProfile, city: '부산' }));
  }

  return <button onClick={changeCity}>{profile.name}: {profile.city}</button>;
}

setItems((currentItems) => [...currentItems, newItem]);
setItems((currentItems) => currentItems.filter((item) => item.id !== targetId));

4.1 React events and handlers

An event is a user action in the browser, such as a click, typing, or keyboard operation. In React, you specify event names such as onClickand onChangein JSX elements and process them by passing a function to execute. Event names are written in camel case, and functions are passed without being called.

function SaveButton() {
  function handleClick() {
    console.log('저장 버튼을 눌렀습니다.');
  }

  // Pass a function to be executed to onClick.
  return <button onClick={handleClick}>저장</button>;
}

onClick={handleClick}passes a function to run when clicked. Be careful because if you add parentheses like onClick={handleClick()}, it will be called immediately during rendering. Event information that has occurred is delivered to the event handler, and input values, etc. can be read using this.

4.2 Event propagation

If the element outside the element where the event occurred also has the same event handler, the event can be propagated to the parent element. This is called event propagation. In nested elements, this behavior may cause the parent's handler to also be executed on a child click.

4.2.1 Capture and Bubble Phase

The event goes through the capture stage, which goes down from the outer element to the inner element, and then goes through the bubble stage,, which goes up outward from the actual event target. React's onClickruns by default in the bubble phase, and onClickCaptureruns in the capture phase.

function ClickOrder() {
  return (
    <div
      onClickCapture={() => console.log('부모 캡처')}
      onClick={() => console.log('부모 버블')}
    >
      <button
        onClickCapture={() => console.log('자식 캡처')}
        onClick={() => console.log('자식 버블')}
      >
        클릭
      </button>
    </div>
  );
}

When you click the button, it runs in the order 부모 캡처 → 자식 캡처 → 자식 버블 → 부모 버블 . onClickCaptureis used when there is logic that must be processed first during the capture stage.

Stop propagation with #### 4.2.2 stopPropagation

If you don't want the event to propagate all the way to the parent handler, call event.stopPropagation()in the handler.

function NestedClick() {
  return (
    <div onClick={() => console.log('부모 클릭 핸들러')}>
      <button
        onClick={(event) => {
          // Prevents click events from propagating to parent elements.
          event.stopPropagation();
          console.log('자식 클릭 핸들러');
        }}
      >
        부모 동작 없이 클릭
      </button>
    </div>
  );
}

When I press the button, only the child handler is executed and the parent handler is not executed. stopPropagation()only prevents event delivery, but does not cancel basic browser actions such as moving links.

4.3 Cancel default action with preventDefault

Use event.preventDefault()to prevent actions that the browser performs by default, such as moving a link or submitting a form.

function DetailLink() {
  return (
    <a
      href="/detail"
      onClick={(event) => {
        // Cancels the default movement behavior of a link.
        event.preventDefault();
        console.log('이동 대신 다른 처리를 합니다.');
      }}
    >
      상세 보기
    </a>
  );
}

Clicking this link does not take you to /detail, it only runs the handler. preventDefault()prevents the browser default behavior, and stopPropagation()prevents events from propagating to the parent. The two have different purposes and can be used together when necessary.

A form is a UI that collects, verifies, and submits the values ​​entered by the user. In React, you can use controlled components that manage input values ​​in the state and uncontrolled components that leave input values ​​to the DOM. Which method to choose depends on whether the input value needs to be used immediately on the screen or whether a form library is used.

import { useState } from 'react';

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

  return (
    <label>
      이름
      {/* The value is controlled by the state, and onChange reflects the new input value to the state. */}
      <input
        value={name}
        onChange={(event) => setName(event.currentTarget.value)}
      />
      <p>입력 중: {name}</p>
    </label>
  );
}

import { useRef } from 'react';
import type { FormEvent } from 'react';

function UncontrolledName() {
  // ref points to the actual <input> element, which is initially null as it is not yet connected.
  const nameRef = useRef<HTMLInputElement>(null);

  // The element where the submission event occurred is <form>.
  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    // Prevents the browser from doing the default action of submitting the form and reopening the page.
    event.preventDefault();
    console.log(nameRef.current?.value ?? '');
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름
        {/* defaultValue is the initial input value, and the type of ref is HTMLInputElement. */}
        <input ref={nameRef} defaultValue="민지" />
      </label>
      <button type="submit">확인</button>
    </form>
  );
}

import { useState } from 'react';
import type { FormEvent } from 'react';

type ContactFormState = {
  name: string;
  message: string;
  topic: string;
  agreed: boolean;
};

function ContactForm() {
  const [form, setForm] = useState<ContactFormState>({
    name: '',
    message: '',
    topic: 'question',
    agreed: false,
  });

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    // Prevents the browser's default behavior of refreshing the page after submission.
    event.preventDefault();
    console.log(form);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름
        <input
          value={form.name}
          onChange={(event) =>
            setForm((current) => ({ ...current, name: event.currentTarget.value }))
          }
        />
      </label>

      <label>
        문의 내용
        <textarea
          value={form.message}
          onChange={(event) =>
            setForm((current) => ({ ...current, message: event.currentTarget.value }))
          }
        />
      </label>

      <label>
        문의 종류
        <select
          value={form.topic}
          onChange={(event) =>
            setForm((current) => ({ ...current, topic: event.currentTarget.value }))
          }
        >
          <option value="question">질문</option>
          <option value="feedback">의견</option>
        </select>
      </label>

      <label>
        <input
          type="checkbox"
          checked={form.agreed}
          onChange={(event) =>
            setForm((current) => ({ ...current, agreed: event.currentTarget.checked }))
          }
        />
        개인정보 수집에 동의합니다.
      </label>

      <button type="submit">보내기</button>
    </form>
  );
}

setForm((current) => ({
  ...current,
  address: {
    ...current.address,
    city: '부산',
  },
}));

// Append: Creates an array containing existing and new items.
setItems((current) => [...current, newItem]);

// Edit: Replace only the target item with a new object.
setItems((current) =>
  current.map((item) => (item.id === updatedItem.id ? updatedItem : item)),
);

// Delete: Create a new array containing only the items you want to keep.
setItems((current) => current.filter((item) => item.id !== targetId));

import { useImmer } from 'use-immer';

type Profile = {
  name: string;
  address: { city: string };
};

function ProfileEditor() {
  const [profile, updateProfile] = useImmer<Profile>({
    name: '민지',
    address: { city: '서울' },
  });

  function changeCity() {
    // A draft is a temporary work object that Immer provides to the updater.
    // Any modifications made here will be reflected by Immer as a new immutable state.
    updateProfile((draft) => {
      draft.address.city = '부산';
    });
  }

  return <button onClick={changeCity}>{profile.address.city}</button>;
}

npm install react-hook-form

import { useForm } from 'react-hook-form';

type SignupValues = {
  email: string;
  password: string;
};

function SignupForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<SignupValues>({
    defaultValues: { email: '', password: '' },
  });

  function onSubmit(values: SignupValues) {
    console.log(values);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>
        이메일
        <input
          {...register('email', { required: '이메일을 입력해 주세요.' })}
          type="email"
        />
      </label>
      {errors.email && <p role="alert">{errors.email.message}</p>}

      <label>
        비밀번호
        <input
          {...register('password', {
            required: '비밀번호를 입력해 주세요.',
            minLength: { value: 8, message: '8자 이상 입력해 주세요.' },
          })}
          type="password"
        />
      </label>
      {errors.password && <p role="alert">{errors.password.message}</p>}

      <button type="submit">가입</button>
    </form>
  );
}

6.1 useState: state and setters

useStatecreates a value to persist between renderings, and returns [현재 값, 갱신 함수]. For detailed functional updates and invariants, please refer to Section 3.3.

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

Hooks are called at the top of a component or user-defined hook, and are not called within conditional or loop statements.

6.2 useEffect: synchronize with external system

useEffectis used to synchronize systems and components outside of React, such as timers, event subscriptions, and network connections.

useEffect(() => {
  // Tasks to synchronize with external systems
}, [의존성]);

The first argument is the function to be executed, and the second argument is an array (dependency ship) of responsive values ​​such as props and state used by the function. If you omit the dependencies array, it will run every time rendering is committed, [], it runs after it first appears on the screen and does not run again during normal re-rendering. [value], it will run for the first time and then run again every time the value changes.

The function returned by Effect is the theorem function ****. Cleanup means finishing or unwinding the work started by the Effect. For example, if you started a timer, the cleanup function stops the timer.

useEffect(() => {
  const timer = setInterval(() => setCount((current) => current + 1), 1000);
  return () => clearInterval(timer);
}, []);

React calls the previous cleanup function before running the Effect again, and also calls it when the component is removed from the screen. In the development environment Strict Mode, additional initial setup and cleanup may be run to verify cleanup logic.

import { useEffect, useState } from 'react';

function PageTitle({ title }: { title: string }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `${title}: ${count}`;
  }, [title, count]);

  return <button onClick={() => setCount((current) => current + 1)}>{count}</button>;
}

documentis a DOM API provided by the browser and is a system outside of React components. This example synchronizes the browser tab title (document.title) with React's title prop and count state. We put the two values ​​in the dependency array, so if either of them changes after the first run, the Effect will run again.

6.3 useRef: value reference separate from rendering

useRefreturns a { current } object that persists between renderings. Used to reference DOM elements or to store values ​​that are not displayed on the screen, such as timer IDs. Since currentis not re-rendered even if changed, the value shown on the screen is managed by state. For input ref examples, see Section 5.1.3.

6.4 useContext: Passing values ​​to deep components

Context helps avoid having to keep passing required values ​​as props several levels down. useContextreads the value of the nearest parent Provider, and if that value changes, the component that uses it is re-rendered.

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div className={theme}>도구 모음</div>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

Toolbarreads the "dark" value provided by the parent provider and renders <div className="dark">. Context only passes values ​​and does not apply styles to the class. To display dark background and light text, you need to define CSS rules.

.dark {
  background-color: #222;
  color: white;
}

Context is used for values ​​to be shared at various depths, such as themes or logged in users, and does not unconditionally move all states.

6.5 useReducer: Complex state update

useReducergathers several related state change rules into one reducer function and updates them with dispatch(action). Useful when state transitions are complex or multiple events change the same state; useStateis simpler for simple values.

6.6 Performance Optimization Hook

useMemoreuses the calculation result, and useCallbackreuses the function until the dependency value changes. Use only when necessary, such as for calculations with known performance issues or for passing values ​​to optimized child components. Unnecessary memoization can complicate your code and reduce manual use in projects using the React Compiler.

6.7 useId: Create accessibility ID

useIdis used to create a unique ID to associate input elements and descriptions with htmlFor, id, and aria-describedby. This is not a Hook to create keyin the list.

6.8 Prioritized UI updates

useTransitionand useDeferredValueslow down heavy screen updates such as search results or large lists, allowing urgent UI such as input to respond first. This is a different function from debounce, which delays network requests for a certain period of time.

6.9 Action Hook in React 19

In React 19 and higher, you can manage the result and progress of the action with useActionState, and display optimistic UI before the request ends with useOptimistic. Check the React version of your project and use it if you need the function.

7.1 Fragment

Fragments bundle multiple JSX elements together without adding unnecessary parent elements to the actual DOM. The short notation is <>...</>, and if you need key, you explicitly get and use Fragment.

import { Fragment } from 'react';

function CourseDetails() {
  return (
    <>
      <h2>React 기초</h2>
      <p>컴포넌트와 JSX를 배웁니다.</p>
    </>
  );
}

function CourseRows({ courses }: { courses: { id: string; title: string }[] }) {
  return courses.map((course) => (
    <Fragment key={course.id}>
      <h3>{course.title}</h3>
      <hr />
    </Fragment>
  ));
}

keycannot be specified in abbreviated notation. For the keys in the list, refer to Section 2.3.2.1.

7.2 StrictMode

StrictModeis a React component that performs additional checks to find potential problems in the component during development. This does not affect the behavior or display of production builds. In a development environment, you can additionally render components to find impure rendering, and rerun relevant processing to find missing effects and ref cleanups.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

During development, even if it looks like a log or Effect is running twice, rather than turning off checking, keep the rendering pure and make sure you write the Effect's cleanup function correctly. Strict Mode does not mean running the Effect twice in production.

7.3 Profiler

Profileris a React component that measures the rendering time of the wrapped component tree. It is used to measure areas where performance problems are suspected, and performance optimization is not applied without measurement.

import { Profiler } from 'react';

function CoursePage() {
  return (
    <Profiler
      id="CourseList"
      onRender={(id, phase, actualDuration) => {
        console.log(`${id} ${phase}: ${actualDuration}ms`);
      }}
    >
      <CourseList />
    </Profiler>
  );
}

onRenderis called when rendering of the wrapped tree is committed. actualDurationis the time it took to render the tree for that update. Since measurements have overhead and profiling is disabled in default production builds, you can also leverage the Profiler in React Developer Tools during development.

7.4 Suspense

Suspenseis a border that shows the fallback UI while the child component suspends rendering for loading. Wraps the scope where the loading UI will be displayed, and shows the child screen when it is ready.

import { Suspense } from 'react';

function App() {
  return (
    <Suspense fallback={<p role="status">화면을 불러오는 중입니다...</p>}>
      <LazyCoursePage />
    </Suspense>
  );
}

Suspensedoes not automatically detect all asynchronous operations.lazyIt operates in framework/data loading methods that support components or suspension.useEffectinfetch()does not automatically enable Suspense, in this lesson we handle it directly as a state (Section 7.7). The loading fallback and error screen are also separate, and error handling consists of Error Boundary, etc.

7.5 Lazy loading components

lazy()defers component code to be loaded when it is first rendered. This is useful when dividing and loading code for large screens or functions that are not immediately needed on the initial screen. During lazy loading, a fallback to the nearest Suspense boundary is displayed.

import { lazy, Suspense } from 'react';

const SettingsPage = lazy(() => import('./SettingsPage'));

function App() {
  return (
    <Suspense fallback={<p role="status">설정 화면을 불러오는 중입니다...</p>}>
      <SettingsPage />
    </Suspense>
  );
}

lazy() declaration outside the component. The module returned by dynamic import()must provide a React component with a default export (default export). Since Suspense does not handle errors in which a lazy-loaded module fails to load, a separate error UI is prepared using Error Boundary, etc.

7.6 Import data over network

Network requests are asynchronous operations. Requests for specific actions, such as a user click, can be initiated in an event handler, and requests to synchronize data required for the screen with an external system can be handled by Effect or the framework's data loading function. Effects are not added to retrieve values ​​that can be calculated with props and state.

fetch()is rejected for network errors, but it is not rejected for 404 or 500 responses alone, so you must check response.ok.

async function fetchCourses() {
  const response = await fetch('/api/courses');
  if (!response.ok) {
    throw new Error(`강좌 요청 실패 (${response.status})`);
  }

  return response.json();
}

Since the actual response data is not verified by TypeScript type declarations alone, you must also check the response shape at runtime. Examples including request cancellation, loading, errors, and displaying empty results are covered in the following section 7.7. As your app grows, consider a framework or data request library that provides caching, duplicate requests, and revalidation.

7.7 Loading/Error/Empty Result Handling

Screens that retrieve data from the network should distinguish between Requesting, Request Failed, No Results, and Data Displaying statuses. During loading, it notifies you that it is in progress, and displays a message to distinguish errors from empty results. It also provides retry functionality if needed. The example below assumes that /api/coursesreturns an array of courses of the form { id, title } .

import { useEffect, useState } from 'react';

type Course = { id: string; title: string };
type LoadState =
  | { status: 'loading' }
  | { status: 'error'; message: string }
  | { status: 'success'; courses: Course[] };

function isCourseList(data: unknown): data is Course[] {
  return (
    Array.isArray(data) &&
    data.every(
      (item) =>
        item !== null &&
        typeof item === 'object' &&
        'id' in item &&
        typeof item.id === 'string' &&
        'title' in item &&
        typeof item.title === 'string',
    )
  );
}

function CourseList() {
  const [state, setState] = useState<LoadState>({ status: 'loading' });

  useEffect(() => {
    const controller = new AbortController();

    async function loadCourses() {
      try {
        const response = await fetch('/api/courses', { signal: controller.signal });
        if (!response.ok) {
          throw new Error(`강좌를 불러오지 못했습니다. (${response.status})`);
        }

        const data: unknown = await response.json();
        if (!isCourseList(data)) {
          throw new Error('서버 응답 형식이 올바르지 않습니다.');
        }

        setState({ status: 'success', courses: data });
      } catch (error: unknown) {
        if (controller.signal.aborted) return;
        setState({
          status: 'error',
          message: error instanceof Error ? error.message : '알 수 없는 오류가 발생했습니다.',
        });
      }
    }

    void loadCourses();
    return () => controller.abort();
  }, []);

  if (state.status === 'loading') return <p role="status">강좌를 불러오는 중입니다...</p>;
  if (state.status === 'error') return <p role="alert">{state.message}</p>;
  if (state.courses.length === 0) return <p>등록된 강좌가 없습니다.</p>;

  return (
    <ul>
      {state.courses.map((course) => (
        <li key={course.id}>{course.title}</li>
      ))}
    </ul>
  );
}

LoadStatewas defined as the discriminant union to have only the values ​​required for each screen state. fetch()is rejected for network failures, but it is not rejected for HTTP responses such as 404·500, so check response.ok. The response JSON is received as unknownand its appearance is checked to prevent incorrect data from being used as normal results.

Effect's cleanup function cancels the request with AbortController. After the component disappears, the results are not reflected in the state, and a distinction is made between request failure and cancellation. Real-world services may require retries, caching, redundant request handling, etc., so consider data request library or framework features. Requests made directly inside Effect, like in this example, do not show Suspense's loading screen per se; they render the UI directly based on the state.

Component styles can be written as separate CSS files, CSS Modules, CSS-in-JS libraries, etc. CSS-in-JS is a way to define styles in JavaScript/TypeScript code and manage them with components. Each library has different framework support, server rendering settings, bundle size, and usage syntax, so select one according to your project environment.

8.1 Styled JSX

Styled JSX is a CSS-in-JS tool primarily used by Next.js. If you write CSS at <style jsx>inside a component, it will be applied to the scope of that component. It is not included by default in regular Vite React projects, so separate settings and dependencies are required in environments other than Next.js.

function Greeting() {
  return (
    <section>
      <h2>안녕하세요</h2>
      <style jsx>{`
        h2 {
          color: navy;
        }
      `}</style>
    </section>
  );
}

It is convenient to separate the scope of component styles, but global styles require a separate global style syntax. When using Next.js App Router with server rendering, style registry settings may be required, so check the framework's official documentation.

8.2 styled-components

styled-componentsis a library that writes CSS with tagged template literals and creates React components with attached styles.

npm install styled-components

import styled from 'styled-components';

const Button = styled.button`
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 0.25rem;
  background: #2457a7;
  color: white;

  &:hover {
    background: #173d78;
  }
`;

function SaveButton() {
  return <Button>저장</Button>;
}

Buttonapplies the linked styles while rendering the actual <button>. You can also change the style depending on the state and theme using props or ThemeProvider. Frameworks that use server rendering may require style extraction/injection setup, so follow the installation instructions for those frameworks.

8.3 Emotion

Emotion is a CSS-in-JS library that helps you write CSS in JavaScript. In React@emotion/styledYou can create components similar to styled-components,@emotion/reactofcssYou can also style elements with props. Here the setup is simple@emotion/styledmethod is used.

npm install @emotion/react @emotion/styled

import styled from '@emotion/styled';

const Message = styled.p`
  margin: 0;
  color: #444;
  font-weight: 600;
`;

function Status() {
  return <Message>저장되었습니다.</Message>;
}

Emotion provides several writing methods, including string templates, object styles, and the css prop. The css prop may require JSX conversion settings, so check your project's build tools and Emotion documentation. For environments that use server components and streaming, such as Next.js App Router, you must first check the support status and settings for each library.

All three methods allow you to configure styles on a component-by-component basis, but their syntax and framework integration methods are different. On a project, unless there's a good reason to, try to stay consistent with your existing approach rather than mixing up multiple styling tools.

9.1 SPA

SPA (Single-Page Application) is a method in which JavaScript updates necessary parts of the screen while maintaining the initially received HTML document. React Router connects URLs and React components to switch screens without requesting a new HTML document each time, and supports browser back/forward movement and address sharing. The server must be set to return an app entry document even when accessing the app's path directly.

9.2 Deploying components without a router

Small screens can conditionally render components based on their state.

import { useState } from 'react';

function App() {
  const [page, setPage] = useState<'home' | 'courses'>('home');

  return (
    <>
      <button onClick={() => setPage('home')}>홈</button>
      <button onClick={() => setPage('courses')}>강좌</button>
      {page === 'home' ? <h1>홈</h1> : <h1>강좌 목록</h1>}
    </>
  );
}

With this method alone, the page state is not reflected in the URL, so you must manually implement address sharing or browser back. Apps that need to connect screens to routes use routers.

Deployment using ### 9.3 router

This example uses the declarative API of React Router v7. Install the package and add it to the top of the appBrowserRouterAfter putting ,RoutesConnecting the URL and screen insideRouteDeclare .

npm install react-router

// src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    {/* Wraps the ability to use URL-based routing throughout the app. */}
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
);

// src/App.tsx
import { Route, Routes } from 'react-router';
import { Navigation } from './Navigation';

function App() {
  // Select the route that matches the current URL.
  return (
    <>
      {/* Common navigation is placed outside Routes, which change depending on the route. */}
      <Navigation />
      <Routes>
        {/* Link the home screen to the home path. */}
        <Route path="/" element={<Home />} />
        {/* Connect the list screen to the course list path. */}
        <Route path="/courses" element={<CourseList />} />
        {/* :courseId is the path parameter to read from the URL. */}
        <Route path="/courses/:courseId" element={<CourseDetail />} />
        {/* This is the default path displayed when it does not match the path above. */}
        <Route path="*" element={<p>페이지를 찾을 수 없습니다.</p>} />
      </Routes>
    </>
  );
}

BrowserRouterassociates the browser address with the routing state. Routesfinds a path that matches the current URL and renders the matching Route's element. The * path is the screen to display when there is no matching path. Installation method and import path may vary depending on React Router version, so check the official documentation for your project version.

It is simple to change the screen directly using the state, but if it is not connected to the URL, sharing the screen address or moving the browser back/forward must be implemented separately. To open each screen with a unique URL and link it to your browser history, associate the URL and screen with Route.

9.4 path parameters

The part of the path that begins with a colon, such as :courseId, is a parameter. You can read the value with useParams()and display a detailed screen of the data.

import { useParams } from 'react-router';

const courses = [
  { id: 'react-basics', title: 'React 기초' },
  { id: 'react-hooks', title: 'React Hooks' },
];

function CourseDetail() {
  const { courseId } = useParams();
  const course = courses.find((item) => item.id === courseId);

  if (!course) return <p>강좌를 찾을 수 없습니다.</p>;
  return <h1>{course.title}</h1>;
}

route pattern/courses/:courseIdat:courseIdindicates the place where the actual value will be entered. actual url/courses/react-basicsThere is no colon inuseParams()IscourseIdby value"react-basics"returns . The path parameter is a string, so if it is a numeric ID, it is converted and validated before use.

Go to page with ### 9.5 Link

Linkis a link that moves the route within the app. Clicking it replaces the URL and leaves the move to the router to avoid requesting the entire document again. It does not automatically provide the active style for the current path. For navigation that requires an active state, use NavLink.

import { Link } from 'react-router';

function Home() {
  return <Link to="/courses">강좌 목록 보기</Link>;
}

Use <a>for general browser navigation, such as sites outside the app or downloaded files.

9.6 Show current location with NavLink

NavLinkIsLinkIt is a link that moves like this and also tells you if the current URL and path match. Easy to change style depending on active state, and for accessibility if matchingaria-current="page"is also set. When you clickNavLinkIt does not itself render page components. When the URL changesRoutesmatchesRouteofelementDisplays .

// src/Navigation.tsx
import { NavLink } from 'react-router';

export function Navigation() {
  return (
    <nav>
      <NavLink to="/" end className={({ isActive }) => (isActive ? 'active' : '')}>
        홈
      </NavLink>
      <NavLink to="/courses" className={({ isActive }) => (isActive ? 'active' : '')}>
        강좌
      </NavLink>
    </nav>
  );
}

isActiveis true, class active applies. Home Link's endcorrectly treats only the / path as active, preventing Home Link from being activated on other paths as well. If you want your class to change color or appearance on the screen, you'll also need to define CSS rules.

Official document: React Router Declarative Routing.

10.1 Separating DOM location with Portal

Portal renders the children of the React component tree in different locations in the DOM. This is useful when displaying overflowof a parent element, such as a modal or tooltip, without being obscured by the stacking context. Even when rendering with Portal, it retains the fact that it is a child of the React tree, so you can use the Context, and events are propagated along the React tree rather than the DOM location.

import { createPortal } from 'react-dom';

function Modal({ onClose }: { onClose: () => void }) {
  return createPortal(
    <div className="modal-backdrop" onClick={onClose}>
      <section
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-title"
        onClick={(event) => event.stopPropagation()}
      >
        <h2 id="modal-title">알림</h2>
        <p>Portal로 document.body에 렌더링한 대화상자입니다.</p>
        <button onClick={onClose}>닫기</button>
      </section>
    </div>,
    document.body,
  );
}

createPortal(children, domNode)As the second argument of , the actual DOM node (document.bodyetc.). Clicking on the background causes it to close, and clicking inside the dialog box prevents propagation. The actual modal must also implement accessibility behaviors such as keyboard focus management and escape handling, which Portal itself does not provide automatically.

10.2 Handling rendering errors with Error Boundary

Error Boundary is a boundary that catches errors that occur during the rendering process of child components and displays an alternative UI instead of stopping the entire app. Currently, in React, Error Boundary is implemented as a class component, and the fallback state can be set to getDerivedStateFromErrorand the error can be recorded at componentDidCatch.

import { Component, type ErrorInfo, type PropsWithChildren } from 'react';

type ErrorBoundaryState = { hasError: boolean };

class ErrorBoundary extends Component<PropsWithChildren, ErrorBoundaryState> {
  state: ErrorBoundaryState = { hasError: false };

  static getDerivedStateFromError(): ErrorBoundaryState {
    return { hasError: true };
  }

  componentDidCatch(error: Error, info: ErrorInfo) {
    console.error('화면 렌더링 오류:', error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return <p role="alert">화면을 표시하는 중 문제가 발생했습니다.</p>;
    }

    return this.props.children;
  }
}

Wrap the subarea where you want the error to be isolated with <ErrorBoundary>. Placing boundaries in multiple places helps you break up the scope so that errors on one screen don't displace your entire app.

<ErrorBoundary>
  <CoursePage />
</ErrorBoundary>

Error Boundary handles rendering errors in child components, but does not automatically catch errors raised by event handlers, errors in general asynchronous operations, or errors raised by the boundary itself. These errors are handled in a manner appropriate to where they occurred, such as try/catchor request status processing.

Reference: createPortal official document, Component official document.

The React ecosystem has libraries that help you quickly configure UI, develop components independently, and manage server data. Check and select the required features and React/build tool environment for your project.

11.1 UI composition with MUI Material

MUI Material is a React library that provides a theme system and reusable UI components such as buttons, inputs, menus, and dialog boxes. You can use it to quickly create screens with a consistent design in your project. MUI's default style engine is Emotion.

npm install @mui/material @emotion/react @emotion/styled

import Button from '@mui/material/Button';

function SaveButton() {
  return (
    <Button variant="contained" color="primary" onClick={() => console.log('저장')}>
      저장
    </Button>
  );
}

variantselects the button appearance and colorselects the color role of the theme. MUI components provide accessibility properties and interactions, but screen-appropriate labels and usage flows must be configured in the app. React and React DOM are peer dependencies of MUI, so they must be installed in the project.

Official Documentation: MUI Material Installation, Button.

11.2 Developing components in Storybook

Storybook is a development tool that runs components separately from the rest of the app's screens and checks and documents the UI state according to various input values. Projects using React and Vite run the initialization command from the project root.

npx storybook@latest init

After initialization, Storybook runs the scripts you added to the project. The default setup starts the development server with npm run storybookand builds static output with npm run build-storybook.

Story files export basic information (meta) and individual states (story) of components. The following example assumes that the Button component receives labeland disabled props.

// src/components/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Button } from './Button';

const meta = {
  title: 'Components/Button',
  component: Button,
  args: { label: '저장' },
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: { disabled: false },
};

export const Disabled: Story = {
  args: { disabled: true },
};

argsof each story is passed as component props. You can independently check the state of the component on the Storybook screen, and if Controls are set, you can check its behavior by changing props. Story files are usually not part of the actual app screen, but are used in development and documentation tools.

Official Documentation: StorybookGetting Started, Writing a Story.

11.3 Server status management with TanStack Query

TanStack Query is a server state management library, previously named React Query. Manages requests, caching, synchronization and updates of data retrieved from servers. It has a different purpose from useState, which manages client UI state such as input window value or open status.

npm install @tanstack/react-query

Wrapping your app with QueryClientProviderallows you to use the query function in child components.

// src/main.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createRoot } from 'react-dom/client';
import App from './App';

const queryClient = new QueryClient();

createRoot(document.getElementById('root')!).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
);

useQueryidentifies data as queryKey, and is imported as queryFn. In the example below, we distinguish between request, error, empty result, and success screens.

import { useQuery } from '@tanstack/react-query';

type Course = { id: string; title: string };

async function fetchCourses(): Promise<Course[]> {
  const response = await fetch('/api/courses');
  if (!response.ok) {
    throw new Error(`강좌 요청 실패 (${response.status})`);
  }
  return response.json();
}

function CourseList() {
  const { data, isPending, isError, error } = useQuery({
    queryKey: ['courses'],
    queryFn: fetchCourses,
  });

  if (isPending) return <p role="status">강좌를 불러오는 중입니다...</p>;
  if (isError) return <p role="alert">{error.message}</p>;
  if (data.length === 0) return <p>등록된 강좌가 없습니다.</p>;

  return (
    <ul>
      {data.map((course) => (
        <li key={course.id}>{course.title}</li>
      ))}
    </ul>
  );
}

Request results using the same queryKeycan be cached and reused by QueryClient. Since the shape of the data in the actual API response is not verified by TypeScript declarations alone, we also consider runtime verification. For detailed information on loading, error, and empty result handling and response verification, refer to Section 7.7.

Official document: TanStack Query Overview, Quick Start.

Testing is a way to ensure that your code behaves as required. From unit logic to actual browser user flow, we inspect it at a level that suits your purpose.

12.1 Types of tests

-Unit testing: Checks whether a small function or module produces the expected results. -Integration Test: Checks whether various parts such as components, states, and events work together. -E2E Test: Verify that the user's core flow works in a real browser.

React component testing can also be an integration test because it examines screens and user behavior. Test-level boundaries are not absolute.

12.2 Select test tool

-Jest or Vitest: A framework for running tests and validating the results. You can keep your existing project tools, or choose Vitest from your Vite project. -React Testing Library: A tool that renders components on the screen and helps check them from the user's perspective. -Playwright: An E2E testing tool that inspects user flows in real browsers. Cypress can also be used as an alternative. -Mock Service Worker (MSW): Helps test API success/error situations by mocking network responses.

Official documents: Jest, Vitest, React Testing Library, Playwright, MSW.

12.3 Choosing a test in practice

Unit and integration tests quickly check various operations, and E2E tests verify important user flows in the browser. Rather than examining every action with E2E, select the appropriate level based on importance and risk.

• tests requirements and user-verified results rather than internal implementation.
• Run critical tests on CI to check for regressions due to changes.
• coverage is viewed as a reference indicator and checks whether important operations are properly verified.