오늘 Tailwind CSS v4를 처음 적용한 프로젝트에서 아래와 같은 오류가 발생했습니다.

❌ 오류 메시지 예시

Error: Cannot apply unknown utility class: bg-primary-500

이 오류는 Tailwind CSS v4에서 @apply가 글로벌 범위에서 자동으로 적용되지 않기 때문에 발생합니다.

** ✅ Tailwind CSS v4에서 @theme을 활용한 변수 정의 ** Tailwind CSS v4에서는 @theme을 사용하여 CSS 변수 형태로 색상, 폰트, 패딩 등을 정의할 수 있습니다.

🔹 globals.css에서 @theme 정의 예시

@theme {
  --color-primary-50: oklch(0.982 0.018 155.826);
  --color-primary-100: oklch(0.962 0.044 156.743);
  --color-primary-200: oklch(0.925 0.084 155.995);
  --color-primary-300: oklch(0.871 0.15 154.449);
  --color-primary-400: oklch(0.792 0.209 151.711);
  --color-primary-500: oklch(0.723 0.219 149.579);
  --color-primary-600: oklch(0.627 0.194 149.214);
  --color-primary-700: oklch(0.527 0.154 150.069);
  --color-primary-800: oklch(0.448 0.119 151.328);
  --color-primary-900: oklch(0.393 0.095 152.535);
  --color-primary-950: oklch(0.266 0.065 152.934);
}

@theme에서 정의한 변수를 다른 CSS 파일에서 @apply로 사용하려면 단순히 @apply bg-primary-500을 추가하는 것만으로는 동작하지 않습니다.

Tailwind v4에서는 @apply가 글로벌 적용되지 않으므로, 다른 CSS 파일에서 @apply를 사용하려면 @reference를 추가해야 합니다.

🔹 components.css에서 @reference 사용 예시

@reference "./globals.css";  /* Tailwind가 정의된 파일을 참조 */

.btn-primary {
  @apply bg-primary-500 text-white font-bold py-2 px-4 rounded;
}
/* bg-primary-500 같은 @theme에서 정의된 변수들은 @reference를 추가해야 정상적으로 적용됩니다. */

✅ 이제 Tailwind가 @apply bg-primary-500을 정상적으로 인식할 수 있습니다!

1. repeat() 메서드 사용

ES6부터 제공되는 repeat() 메서드는 가장 간단하고 직관적인 방법이다.

function solution(my_string, k) {
    return my_string.repeat(k);
}

// 예시
console.log(solution("string", 3)); // stringstringstring

2. for 반복문 사용

for문을 활용해 반복적으로 문자열을 누적하는 방법이다.

function solution(my_string, k) {
    let result = "";
    for (let i = 0; i < k; i++) {
        result += my_string;
    }
    return result;
}

// 예시
console.log(solution("string", 3)); // stringstringstring

3. Array와 join() 사용

배열과 join() 메서드를 활용해 반복 문자열을 생성하는 방법이다.

function solution(my_string, k) {
    return Array(k).fill(my_string).join("");
}

// 예시
console.log(solution("string", 3)); // stringstringstring

4. 재귀 함수 사용

재귀를 활용한 방식으로 문자열을 반복적으로 더해가는 풀이다.

function solution(my_string, k) {
    if (k <= 0) return "";
    return my_string + solution(my_string, k - 1);
}

// 예시
console.log(solution("string", 3)); // stringstringstring

5. reduce() 사용

Array와 reduce()를 활용해 문자열을 누적하는 방식이다.

function solution(my_string, k) {
    return Array(k).fill(my_string).reduce((acc, curr) => acc + curr, "");
}

// 예시
console.log(solution("string", 3)); // stringstringstring

6. while 반복문 사용

while문을 이용해 반복 횟수만큼 문자열을 더해가는 방법이다.

function solution(my_string, k) {
    let result = "";
    while (k > 0) {
        result += my_string;
        k--;
    }
    return result;
}

// 예시
console.log(solution("string", 3)); // stringstringstring

상황별 선택 가이드

•    가장 간단한 방법: repeat()
•    추가 조건이나 조작 필요: for, while
•    배열과 함수형 스타일 선호: reduce()나 Array와 join()
•    재귀 연습이 필요한 경우: 재귀 함수 사용

코딩테스트에서는 문제의 요구사항과 실행 시간에 따라 적합한 방법을 선택하자. repeat() 메서드가 가장 간단하고 빠르지만, 다른 방법도 상황에 따라 유용하다.

이 포스트는 리액트 라우터의 최신 버전인 V6.16을 기준으로 작성되었다. 그러나 V6.4 버전 이후로 크게 변한 사항은 없고, v6.4 버전이 그전의 버전들와 많이 달라졌기 때문에 지금 보고계신 이포스트는 v6.4 이후 버전의 리액트 라우터 라고 생각하면 된다.

이 포스트는 전편과 연결되어 있지만, 전편을 보지 않아도 충분히 이해할 수 있는 내용을 담고 있다.

오류페이지 처리

웹사이트를 개발하면서 특정 에러 페이지를 처리해야 할 상황이 종종 발생한다. 예를 들어, 사용자가 잘못된 URL로 접근했을 때, 존재하지 않는 페이지를 보여주고 홈페이지로 리다이렉트할 수 있어야 한다. 리액트 라우터 v6.4에서는 이를 errorElement로 처리할 수 있다.

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />} errorElement={<ErrorBoundary />}>
      <Route index element={<Index />} />
      <Route path="about" element={<About />}></Route>
      <Route path="products" element={<Products />}>
        <Route index element={<All />} />
        <Route path="men" element={<Men />} />
        <Route path="women" element={<Women />} />
      </Route>
    </Route>
  )
);

function App() {
  return <RouterProvider router={router} />;
}

맨 외부 레이아웃의 errorElement에는 에러 처리를 위한 컴포넌트를 삽입하면 된다.

간단하게 에러 화면을 구성해봤는데

//ErrorBoundary
import { useNavigate, useRouteError } from "react-router-dom";

function ErrorBoundary() {
  const error = useRouteError();
  const navigate = useNavigate();

  console.error(error);

  function goToHome() {
    navigate("/", { replace: true });
  }

  return (
    <div className="error">
      <h2>Error</h2>
      <p>
        <i>{error.status} </i>
        <i>{error.statusText || error.message}</i>
      </p>
      <button type="button" onClick={goToHome}>
        home
      </button>
    </div>
  );
}

export default ErrorBoundary;

useRouteError는 에러 정보를 반환하고, useNavigate는 페이지 리디렉션을 위한 함수이다.

ErrorBoundary 컴포넌트에서는 error.status와 error.statusText를 화면에 표시한다. 또한 버튼을 클릭하면 홈페이지로 리디렉션된다.

이 포스트는 리액트 라우터의 최신 버전인 V6.16을 기준으로 작성되었다. 그러나 V6.4 버전 이후로 크게 변한 사항은 없고, v6.4 버전이 그전의 버전들와 많이 달라졌기 때문에 지금 보고계신 이포스트는 v6.4 이후 버전의 리액트 라우터 라고 생각하면 된다.

중첩라우트 구성 - 레이아웃

레이아웃은 웹 페이지의 기본적인 구조를 나타내며, 헤더나 푸터 같은 일반적으로 변하지 않는 영역이 종종 있다. 이런 고정된 영역들을 중첩 라우트를 활용해 효율적으로 관리할 수 있다. 중첩 라우트를 사용하면 여러 종류의 레이아웃을 손쉽게 적용하고 변경할 수 있다.

기본적인 레이아웃 구성

먼저 layout 만든다.

//App.jsx
const router = createBrowserRouter(
  createRoutesFromElements(<Route path="/" element={<Layout />}></Route>)
);

outlet

//layout.jsx
import { NavLink, Outlet } from "react-router-dom";
function Layout() {
  return (
    <div>
      <header>
        <ul>
          <li>
            <NavLink to={"/"}>HOME</NavLink>
          </li>
          <li>
            <NavLink to={"/ABOUT"}>ABOUT</NavLink>
          </li>
          <li>
            <NavLink to={"/PRODUCTS"}>PRODUCTS</NavLink>
          </li>
        </ul>
      </header>
      <main>
        <Outlet />
      </main>
      <footer>footer 영역</footer>
    </div>
  );
}

export default Layout;

레이아웃 컴포넌트 안에는 헤더와 푸터가 구성되어 있고, 메인 영역에는 Outlet 컴포넌트가 위치한다. 레이아웃 내에서 Outlet 컴포넌트를 사용하면 자식 라우트를 렌더링할 수 있다. 이 영역이 중첩 라우트가 표시될 구역이다.

NavLink는 현재 라우트와 일치할 때 특별한 스타일이나 클래스를 적용할 수 있는 React Router의 컴포넌트다.

레이아웃의 자식 컴포넌트로 이런 설정을 추가하면 구성이 완료된다.

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />}>
      <Route index element={<Index />} />
      <Route path="/about" element={<About />}></Route>
      <Route path="/products" element={<Products />}></Route>
    </Route>
  )
);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

이제 레이아웃 안에서 라우트 페이지가 제대로 표시되는 것을 확인할 수 있다.

중첩 라우트를 활용한 레이아웃

외부 레이아웃 안에 서브 레이아웃이 필요한 상황은 자주 발생한다. 예를 들면, PRODUCTS 페이지에서는 카테고리를 선택할 수 있는 하위 메뉴가 있고, 해당 하위 메뉴를 선택하면 아래에 그 카테고리에 맞는 상품을 보여주는 구조가 필요할 수 있다. 이럴 때 중첩 라우팅을 통해 페이지를 유연하게 구성할 수 있다.

products 자식컴포넌트에 이렇게 또 중첩으로 레이아웃을 구성할수 있다.

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />}>
      <Route index element={<Index />} />
      <Route path="about" element={<About />}></Route>
      <Route path="products" element={<Products />}>
        <Route index element={<All />} />
        <Route path="men" element={<Men />} />
        <Route path="women" element={<Women />} />
      </Route>
    </Route>
  )
);

Product 컴포넌트:

//porducts
import { Link, NavLink, Outlet, useMatch } from "react-router-dom";

function Products() {
  const match = useMatch("/products");

  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to={""} className={match && "active"}>
              All
            </Link>
          </li>
          <li>
            <NavLink to={"men"}>men</NavLink>
          </li>
          <li>
            <NavLink to={"women"}>women</NavLink>
          </li>
        </ul>
      </nav>
      <div>
        <Outlet />
      </div>
    </div>
  );
}

export default Products;

서브 레이아웃에서 NavLink가 원하는 대로 작동하지 않는 문제가 있다. 정확한 해결책은 아직 찾지 않았지만, 나는 그냥 Link 컴포넌트를 사용하고 useMatch를 통해 URL을 판단한 뒤, active 클래스를 추가했다. 더 효율적인 해결 방법을 알고 있다면 댓글로 공유해주시면 감사하겠다!ㅜ

이제 화면에서 중첩 레이아웃을 구성한 것을 확인할 수 있다.

동적 세그먼트

지금은 카테고리가 몇 개 없어서 문제가 없지만, 만약 카테고리가 많아진다면 일일이 컴포넌트를 만들어 Products의 자식 컴포넌트로 추가하는 작업은 굉장히 번거로울 수 있다. 그런 상황에서 UI는 거의 동일하고 데이터만 다르다면, 동적 세그먼트를 사용할 수 있다. 여기서 path 안에 콜론(:)은 경로에서 "동적 세그먼트"로 변환하는 특별한 의미를 가진다.

  <Route path="/" element={<Layout />}>
      <Route index element={<Index />} />
      <Route path="about" element={<About />}></Route>
      <Route path="products" element={<Products />}>
        <Route index element={<All />} />
        <Route path=":categoriId" element={<categori />} />
      </Route>
    </Route>

여기서는 따로 동적 세그먼트와 동적으로 컴포넌트를 생성하는 방법에 대해서는 다루지 않을 것이다. 궁금한 분들은 공식 문서에서 자세한 정보를 찾아보는 것을 추천한다.

이 포스트는 리액트 라우터의 최신 버전인 V6.16을 기준으로 작성되었다. 그러나 V6.4 버전 이후로 크게 변한 사항은 없고, v6.4 버전이 그전의 버전들와 많이 달라졌기 때문에 지금 보고계신 이포스트는 v6.4 이후 버전의 리액트 라우터 라고 생각하면 된다.

소개글

이 글은 오로지 리액트 라우터의 최신 버전에 대한 기초적인 사용법에 간략하게 소개한다. 이전 버전과의 차이나 마이그레이션 방법은 다루지 않으므로, 이미 이전 버전을 사용하고 계신 분은 v6.4 이상의 버전에 어떤 변화가 있는지만 간략히 알고 싶다면 이 글을 그냥 참고만 하면 된다 . 마이그레이션에 필요한 자세한 정보는 리액트 라우터의 공식 문서를 보는걸 추천한다.

설치와 사용

리액트 라우터를 사용하려면 먼저 설치해야 한다.

npm install react-router-dom

브라우저 라우터 생성과 첫 라우트 구성

먼저 해야 할 일은 브라우저 라우터를 생성하고, 첫 번째 라우트를 설정하는 것이다. v6.4 버전에서는 새로운 데이터 API를 지원하는 라우터가 도입되었다.

createBrowserRouter는 리액트 라우터 v6.4 이후로 브라우저 라우터를 생성하는 권장되는 방법이다. 이와 달리 <BrowserRouter> 라우터는 새로운 데이터 API를 지원하지 않는다.

v6.4 이후 코드 예시:

//App.jsx
import { RouterProvider, createBrowserRouter } from "react-router-dom";

//객체형 라우트 구성방식
const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

createBrowserRouter를 사용해서 브라우저 라우터를 생성한 후, 이를 RouterProvider에 전달한다. 이렇게 하면 RouterProvider가 생성한 라우터를 사용해서 라우팅을 관리하게 된다.

예전의 방식을 간단하게 살펴 보겠다.

//v6.4 이전 버전 방식 
import {
  BrowserRouter,
  Route,
  Routes,
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<div>Hello world!</div>} />
      </Routes>
    </BrowserRouter>
  );
}

이제는 BrowserRouter 와 Routes 가 필요없게 됐다.

객체 대신 JSX로 사용하여 라우트를 구성하기

대부분, 저 포함,은 JSX를 이용해 라우트를 구성하는 것을 선호한다. 리액트 라우터 공식 문서의 튜토리얼에서는 객체 방식을 사용한 코드 예시가 나와서 조금 헷갈렸던 경험이 있다.

createRoutesFromElements

JSX로 라우트를 설정하려면 createRoutesFromElements 함수가 필요하다. 이 함수는 <Route> 요소를 바탕으로 라우트 객체를 생성해준다.

JSX 라우트 구성 사용:

import {
  Route,
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
} from "react-router-dom";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<div>Hello world!</div>}></Route>
  )
);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

JSX vs 객체 형식의 라우트 구성

리액트 라우터 공식 문서의 튜토리얼에서는 마지막 부분에서 JSX로 라우트를 구성하는 방식도 언급하고 있다. JSX와 객체 형식 사이에는 기능적인 차이가 없다. 이 둘 사이의 차이는 오직 개발자의 스타일과 선호도에 따른 것이다. 따라서 특별히 더 권장하는 방식은 없으며, 자기가 선호하는 방식을 선택해서 사용하면 된다.

Memoization이란?

Memoization은 계산 결과를 메모리에 저장해 두고 동일한 계산이 요청될 때 다시 계산하지 않고 저장된 값을 반환하는 최적화 기법이다. 이를 통해 애플리케이션의 속도를 높일 수 있다.

React.memo의 이해와 활용

React.memo는 React 라이브러리에서 제공하는 고차 컴포넌트(HOC)로, 함수형 컴포넌트의 렌더 결과를 메모이징해 성능을 최적화할 수 있다.

작동 원리

React.memo는 props의 얕은 비교(shallow comparison)를 통해 이전과 현재의 props가 같은지 확인한다. 만약 props가 변경되지 않았다면, 이전에 렌더링된 결과를 재사용한다.

사용법

기본적인 사용법은 아래와 같다.

const MyComponent = React.memo(function MyComponent({ name }) {
  return <div>{`안녕, ${name}`}</div>;
});

여기서 MyComponent는 name props가 변경되지 않는 한 이전 렌더링 결과를 재사용한다.

커스텀 비교 함수

React.memo는 두 번째 인자로 커스텀 비교 함수를 받을 수 있다. 이 함수는 이전 props와 새로운 props를 인자로 받고, 두 값이 같으면 true, 다르면 false를 반환한다.

const areEqual = (prevProps, nextProps) => {
  return prevProps.name === nextProps.name;
};

const MyComponent = React.memo(function MyComponent({ name }) {
  return <div>{`안녕, ${name}`}</div>;
}, areEqual);

주의점

1. 얕은 비교: React.memo는 얕은 비교만 수행하므로, 객체나 배열 같은 참조 타입의 props가 변경될 때 문제가 생길 수 있다.
2. 메모리 사용량: 메모이징은 메모리에 렌더링 결과를 저장하기 때문에 메모리 사용량이 늘어날 수 있다.
3. 불필요한 최적화: 모든 컴포넌트에 React.memo를 사용하는 것은 권장하지 않는다. 성능 이슈가 있는 경우에만 사용하자.

React.memo는 함수형 컴포넌트의 성능을 최적화하기 위한 유용한 도구다. 하지만 사용 시에는 주의점을 고려해야 한다. 성능 이슈가 실제로 발생하는 경우에만 적절히 활용하도록 하자.

React에서 useMemo의 이해와 활용

React 애플리케이션에서 성능 최적화를 고려한다면 useMemo는 중요한 훅 중 하나다. 복잡한 연산이나 빈번한 렌더링이 일어나는 경우, 이 훅을 사용해 성능을 개선할 수 있다.

작동 원리

useMemo는 메모이제이션(memoization)을 통해 연산의 결과값을 저장해 둔다. 이 훅은 의존성 배열이 변경되지 않으면 이전에 계산한 값을 재사용한다.

사용법

기본 사용법은 아래와 같다.

import React, { useMemo } from 'react';

const MyComponent = ({ list }) => {
  const sortedList = useMemo(() => {
    return list.sort((a, b) => a - b);
  }, [list]);

  return (
    <div>
      {sortedList.map((item) => (
        <p>{item}</p>
      ))}
    </div>
  );
};

여기에서 sortedList는 list 배열이 변경될 때만 다시 정렬된다. 그 외의 경우에는 이전에 정렬된 배열을 재사용한다.

의존성 배열

useMemo의 두 번째 인자는 의존성 배열이다. 이 배열 내의 값이 변경되면 useMemo 내부의 코드가 다시 실행된다. 의존성 배열을 잘 관리하는 것이 중요하다.

주의점

1. 복잡한 연산만 최적화: useMemo는 복잡한 연산이나 자주 변경되는 값에 대한 최적화에 적합하다.
2. 메모리 사용량 증가: 메모이제이션은 메모리에 값을 저장하기 때문에 메모리 사용량이 증가할 수 있다.
3. 의존성 배열 관리: 의존성 배열이 잘못 설정되면 예상하지 못한 버그가 발생할 수 있다.

useMemo는 React에서 성능 최적화에 큰 도움을 줄 수 있다. 하지만 언제나 그렇듯, 이 훅도 적절한 상황과 조건에서 사용해야 최대의 효과를 볼 수 있다. 성능 문제가 발생할 때만 고려해서 사용하는게 바람직하다.

React에서 useCallback의 깊은 이해와 활용

useCallback은 React에서 제공하는 훅 중 하나로, 함수를 메모이징해서 성능을 최적화할 수 있는 기능을 제공한다.

작동 원리

useCallback 훅은 주어진 함수와 의존성 배열을 인자로 받아, 메모이징된 함수를 반환한다. 의존성 배열의 값이 변경되지 않는다면 이전에 생성된 함수를 재사용한다.

기본 사용법

useCallback의 기본 사용법은 다음과 같다.

import React, { useCallback } from 'react';

const MyButton = ({ onClick, label }) => {
  return <button onClick={onClick}>{label}</button>;
};

const App = () => {
  const handleClick = useCallback(() => {
    console.log('Button clicked!');
  }, []);

  return <MyButton onClick={handleClick} label="클릭해줘!" />;
};

의존성 배열

useCallback의 두 번째 인자는 의존성 배열이다. 이 배열 내의 값이 변경되면 새로운 함수를 생성하고 메모이징한다. 배열이 비어 있다면 컴포넌트가 처음 마운트될 때 생성한 함수를 계속해서 재사용한다.

const handleClick = useCallback(() => {
  console.log(`Button clicked ${count} times`);
}, [count]);

주의점

1. 오버헤드: useCallback을 무분별하게 사용하면 오히려 성능 문제가 생길 수 있다.
2. 의존성 배열 관리: 의존성 배열을 잘못 관리하면 예상치 못한 동작이나 버그를 유발할 수 있다.
3. 함수 내부 상태: useCallback으로 메모이징된 함수가 클로저를 형성하므로 함수 내부에서 사용하는 외부 변수에 주의해야 한다.

사용 시나리오

• 이벤트 핸들러 최적화
• 자주 발생하지만 연산이 복잡하지 않은 함수 메모이징
• 자식 컴포넌트에 함수를 props로 전달할 때 불필요한 렌더링 방지

useCallback은 React 애플리케이션에서 성능 최적화를 위해 유용하게 사용할 수 있는 훅이다. 하지만 잘못 사용하면 오히려 성능 문제를 유발할 수 있으므로 적절한 상황에서만 사용해야 헌다.

비동기 통신을 위한 redux-middleware

Redux-Thunk를 이해하고 사용하기

Redux는 자바스크립트 앱에서 상태 관리를 위한 라이브러리다. 하지만 Redux 자체는 비동기 작업을 처리하기에는 불편한 점이 있다. 이럴 때 도움이 되는 것이 Redux-Thunk 미들웨어다. 이 포스트에서는 Redux-Thunk가 무엇인지, 왜 필요한지, 어떻게 사용하는지에 대해 알아보자.

Redux-Thunk란?

Redux-Thunk는 Redux의 미들웨어 중 하나로, 비동기 작업을 쉽게 처리할 수 있게 해준다. 기본적으로 액션 생성자가 객체 대신 함수를 반환할 수 있게 한다. 이 함수는 dispatch와 getState 두 개의 인자를 받아 비동기 작업을 수행할 수 있다.

const fetchData = () => {
  return (dispatch, getState) => {
    fetch('some-api')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_SUCCESS', payload: data }));
  };
};

왜 Redux-Thunk가 필요한가?

순수 함수의 제한

Redux의 액션 생성자와 리듀서는 순수 함수여야 한다. 순수 함수는 같은 인자에 대해 항상 같은 값을 반환해야 하고, 외부 상태에 의존하거나 변경하지 않아야 한다. 따라서 API 호출 같은 비동기 작업을 하기 어렵다.

미들웨어의 도입

Redux-Thunk와 같은 미들웨어를 사용하면 액션 생성자 내에서 비동기 작업을 할 수 있다. 미들웨어는 액션이 디스패치되어 리듀서에서 처리되기 전에 중간에 실행되는 코드다.

Redux-Thunk를 활용한 비동기 작업: 상세 예제

프로젝트 구조

my-redux-thunk-app/
├── src/
│   ├── store/
│   │   ├── actions/
│   │   │   └── fetchData.js
│   │   ├── reducers/
│   │   │   ├── dataReducer.js
│   │   │   └── index.js  
│   │   └── index.js
│   ├── App.js
│   └── index.js
└── package.json

필요한 패키지 설치

프로젝트 폴더에서 터미널을 열고 다음 명령어를 실행해 필요한 패키지를 설치한다.

npm install redux redux-thunk react-redux

store/reducers/dataReducer.js: 리듀서 설정

src/store/reducers/dataReducer.js 파일을 생성하고 다음과 같이 작성한다.

const initialState = {
  loading: false,
  data: null,
  error: null,
};

// dataReducer는 액션에 따라 state를 변경하는 함수다.
const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_START':
      // 로딩 시작할 때
      return { ...state, loading: true };
    case 'FETCH_SUCCESS':
      // 데이터 가져오는 것이 성공했을 때
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_ERROR':
      // 에러 발생했을 때
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

export default dataReducer;

store/reducers/index.js: rootReducer 작성

src/store/reducers/index.js 파일을 만들고 다음과 같이 작성해.

import { combineReducers } from 'redux';
import dataReducer from './dataReducer';
// 여러 개의 리듀서를 하나로 합친다.
const rootReducer = combineReducers({
  data: dataReducer,
});

export default rootReducer;

store/index.js: 스토어 설정

src/store/index.js 파일을 생성하고 아래와 같이 작성한다.

// 스토어 생성. 미들웨어로 thunk 사용.
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

store/actions/fetchData.js: 액션 생성자

src/store/actions/fetchData.js 파일을 생성하고 다음과 같이 작성한다.

// 비동기 작업을 위한 액션 생성자다.
export const fetchData = () => {
  return (dispatch) => {
    // 데이터를 가져오기 시작하면 'FETCH_START' 액션을 디스패치한다.
    dispatch({ type: 'FETCH_START' });

    fetch('<https://jsonplaceholder.typicode.com/todos/1>')
     .then((response) => {
        if (!response.ok) {
          // 에러가 발생하면 'FETCH_ERROR' 액션을 디스패치한다.
          throw new Error(`${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        // 성공하면 'FETCH_SUCCESS' 액션을 디스패치한다.
        dispatch({ type: 'FETCH_SUCCESS', payload: data });
      })
      .catch(error => {
        // 에러 발생시 'FETCH_ERROR' 액션을 디스패치한다.
        dispatch({ type: 'FETCH_ERROR', payload: error });
      });
  };
};

App.js: 앱의 메인 코드

src/App.js 파일에서는 다음과 같이 작성한다.

// useDispatch와 useSelector로 리덕스 스토어와 상호작용한다.
import { useDispatch, useSelector } from "react-redux";
import { fetchData } from "./store/actions/fetchData";

const App = () => {
  const dispatch = useDispatch();
  // 스토어의 data 상태를 가져온다.
  const { loading, data, error } = useSelector((state) => state.data);

  const handleClick = () => {
    // 버튼 클릭하면 fetchData 액션을 디스패치한다.
    dispatch(fetchData());
  };

  return (
    <div>
      <button onClick={handleClick}>데이터 가져오기</button>
      {/* 상태에 따른 UI 렌더링 */}
      {loading ? (
        <h1>Loading...</h1>
      ) : error ? (
        <h1>Error: {error.message}</h1>
      ) : (
        data && <h1>{data.title}</h1>
      )}
    </div>
  );
};

index.js: 앱 실행

src/index.js 파일에서는 다음과 같이 작성한다.

//Provider으로 감싸서 리덕스 스토어를 제공한다.
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import store from "./store";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

이제 store 폴더 안에서 액션 생성자와 리듀서, 그리고 스토어 설정까지 모두 관리하고 있다. 이 구조를 따르면 프로젝트 관리가 더 쉬워질 것이다.

결론

Redux-Thunk는 Redux와 함께 사용되어 비동기 작업을 간단하게 처리할 수 있게 해주는 미들웨어다. 이를 통해 액션 생성자는 비동기 로직을 캡슐화하며, 리듀서는 순수 함수를 유지할 수 있다. 비동기 처리가 필요한 경우 Redux-Thunk를 활용해보면 좋을 것이다.

리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 처리되기 전에 특정 작업을 수행할 수 있게 해주는 기능이다. 예를 들어 API 호출, 로깅, 액션 취소 등 다양한 작업을 할 수 있다.

미들웨어가 필요한 이유는 주로 비동기 작업이나 부가적인 처리를 해야 할 때 나타난다. 리듀서는 순수 함수여야 하기 때문에, 그 자체로는 API 호출이나 로깅 등의 부수 효과(side-effects)를 가지는 작업을 할 수 없다.

미들웨어의 주요 역할

1. 액션 객체 검증: 액션 객체의 유효성을 검사해 잘못된 액션을 걸러낼 수 있다.
2. 액션 로깅: 액션의 발생을 로깅해 디버깅을 쉽게 할 수 있다.
3. 비동기 작업 처리: thunk나 saga 같은 미들웨어를 사용해 비동기 로직을 쉽게 관리할 수 있다.

미들웨어 만드는 방법

미들웨어는 보통 아래와 같은 형태로 만든다.

const myMiddleware = store => next => action => {
  // 미들웨어 로직
  return next(action);
};

미들웨어 적용하기

미들웨어를 적용하기 위해선 applyMiddleware 함수를 사용한다.

import { createStore, applyMiddleware } from 'redux';
import myMiddleware from './myMiddleware';

const store = createStore(
  rootReducer,
  applyMiddleware(myMiddleware)
);

미들웨어 예시: 로깅 미들웨어

간단한 로깅 미들웨어를 만들어 볼까? 코드는 아래와 같다.

const logger = store => next => action => {
  console.log('dispatching', action);
  let result = next(action);
  console.log('next state', store.getState());
  return result;
};

비동기 미들웨어: Thunk

Thunk 미들웨어는 함수 형태의 액션을 디스패치할 수 있게 해준다.

const thunk = store => next => action => {
  if (typeof action === 'function') {
    return action(store.dispatch, store.getState);
  }
  return next(action);
};

결론

리덕스 미들웨어는 액션을 디스패치했을 때 추가적인 작업을 할 수 있게 해주는 강력한 기능이다. 미들웨어를 통해 코드의 유지보수성과 확장성을 높일 수 있다.

Redux란 무엇인가?

Redux는 자바스크립트 앱에서 상태를 효율적으로 관리하기 위한 라이브러리다. 주로 React와 함께 사용되지만, 다른 라이브러리나 프레임워크에서도 사용 가능하다.

왜 필요한가?

• 중앙 집중적인 상태 관리: 앱의 크기가 커지면 상태 관리가 복잡해진다. Redux는 이를 중앙에서 관리해 해결한다.
• 시간 여행 디버깅: 이전 상태로 쉽게 되돌릴 수 있다.
• 테스트 용이: 상태를 예측 가능하게 관리할 수 있으므로 테스트가 용이하다.

Redux를 이용한 카운터 앱 예시

1. 설치

먼저 프로젝트에 Redux를 설치한다.

npm install redux react-redux

2. Action 정의

Action 객체를 반환하는 함수를 정의한다.

// src/store/actions/counterActions.js

export const increment = () => {
  return {
    type: "INCREMENT",
  };
};

3. Reducer 생성

Reducer는 상태와 액션을 받아 새로운 상태를 반환한다.

// src/store/reducers/counterReducer.js

const initialState = 0;

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    default:
      return state;
  }
};

export default counterReducer;

4. Root Reducer 만들기

여러 개의 리듀서를 하나로 합치는 Root Reducer를 만든다.

// src/store/reducers/index.js

import { combineReducers } from "redux";
import counterReducer from "./counterReducer";

const rootReducer = combineReducers({
  counter: counterReducer,
});

export default rootReducer;

5. Store 만들기

Store를 생성하고, React 앱에 연결한다.

// src/main.js

import React from "react";
import ReactDOM from "react-dom/client";
import { createStore } from "redux";
import { Provider } from "react-redux";
import App from "./App";
import rootReducer from "./store/reducers";

const store = createStore(rootReducer);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

6. React 컴포넌트에 연결

react-redux의 useSelector와 useDispatch 훅을 사용한다.

// src/App.js

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { increment } from "./store/actions/counterActions";

function App() {
  const count = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  return <button onClick={() => dispatch(increment())}>Count: {count}</button>;
}

export default App;

이제 리덕스를 통해 상태 관리가 가능하다. useSelector로 상태에 접근할 때 state.counter로 접근하는 것에 주의하자. 이렇게 되는 이유는 combineReducers에서 counter로 설정했기 때문이다.

미들웨어와 비동기 작업

미들웨어를 통해 액션을 디스패치하기 전후로 로직을 넣을 수 있다.

Best Practices

• 액션 타입은 상수로 관리한다.
• 리듀서는 순수 함수여야 한다.
• 복잡한 로직은 미들웨어에서 처리한다.

이것은 Redux의 기본적인 개념과 사용 방법에 대한 소개다. 더 자세한 내용은 공식 문서에서 확인할 수 있다.

useState가 React에서 가장 기본적인 상태 관리 도구라면, useReducer는 좀 더 복잡한 상태 로직을 관리할 때 유용하다. 전역 상태 관리에는 Context API나 Redux도 많이 쓰이지만, useReducer도 그에 못지않게 중요한 역할을 한다.

useReducer란?

useReducer는 React에서 제공하는 하나의 훅으로, 액션 객체를 디스패치해 상태를 업데이트하는 방식으로 동작한다. 기본 형태는 다음과 같다.

const [state, dispatch] = useReducer(reducer, initialState);

• state: 현재 상태
• dispatch: 액션을 발생시키는 함수
• reducer: reducer 는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수이다.
• initialState: 초기 상태

왜 useReducer를 쓰는가?

1. 복잡한 상태 로직 관리
2. 읽기 쉬운 코드 구조
3. 재사용 가능한 로직

예시

import { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1 ;
    default:
      return state;
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, 0 );

  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
    </div>
  );
}

useReducer와 Context API를 활용한 전역 상태 관리

1. Context와 Reducer 생성

import { createContext, useReducer } from "react";

export const CountContext = createContext();

const initialState = 0;

function countReducer(state, action) {
  if (action.type === "INCREMENT") {
    return action.payload;
  }
  return state;
}

export function CountProvider({ children }) {
  const [count, dispatch] = useReducer(countReducer, initialState);

  return (
    <CountContext.Provider value={{ count, dispatch }}>
      {children}
    </CountContext.Provider>
  );
}

2. 컴포넌트에서 사용하기

import { useContext } from "react";
import { CountProvider, CountContext } from "./store/CountContext";

export default function App() {
  return (
    <CountProvider>
      <Counter />
    </CountProvider>
  );
}

function Counter() {
  const { count, dispatch } = useContext(CountContext);

  return (
    <div>
      <p>{count}</p>
      <button
        onClick={() => dispatch({ type: "INCREMENT", payload: count + 1 })}
      >
        증가
      </button>
    </div>
  );
}

여기서 CountProvider는 전역 상태를 제공하고, Counter 컴포넌트에서는 그 상태를 사용하고 있다.

이렇게 하면 INCREMENT 액션을 디스패치할 때 payload를 통해 새로운 count 값을 전달할 수 있다.

리액트에서 전역 상태를 관리하는 방법 중 하나는 Context API를 사용하는 것이다. 이 API를 이해하려면 먼저 '상태'라는 개념을 이해해야 한다. 상태는 데이터의 현재 상태를 나타내고, 리액트 애플리케이션에서 여러 컴포넌트 간에 상태를 공유하기 위해 Context API를 사용한다.

Context API의 장점

• Prop drilling 문제를 해결한다.
• 전역 상태 관리가 쉽다.
• 코드의 재사용성이 높아진다.

Context API는 리액트에서 전역 상태를 관리하기 위해 사용되어. 기본적으로는 createContext, Context.Provider, 그리고 useContext 훅을 이용해서 사용하게 된다.

createContext

React에서 새로운 컨텍스트를 생성할 때 사용한다. React.createContext()를 호출하면 Provider와 Consumer 컴포넌트가 생성되며, 이를 통해 상태를 공유할 수 있다.

먼저, context를 만든다:

import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext(null);

Provider

생성된 컨텍스트에 포함된 Provider 컴포넌트는 상태를 공급하는 역할을 한다. value 속성을 통해 전달하고자 하는 상태를 지정할 수 있다.

Provider를 이용해서 상태를 공유하고 싶은 컴포넌트 트리를 감싼다:

function App() {
  const [state, setState] = useState("I'm a shared state!");

  return (
    <MyContext.Provider value={{ state, setState }}>
      <MyComponent />
    </MyContext.Provider>
  );
}

useContext 훅

함수형 컴포넌트 내에서 useContext 훅을 사용하면 해당 컨텍스트의 현재 값을 쉽게 사용할 수 있다. 이 훅은 Provider에서 전달한 value 값을 반환한다.

이제 useContext 훅을 이용해서 하위 컴포넌트에서 이 상태를 사용할 수 있다:

function MyComponent() {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState("New State")}>Change State</button>
    </div>
  );
}

이게 기본적인 Context API의 사용 방법이다. 상태를 공유할 범위에 따라 여러 개의 Context를 만들 수도 있고, 복잡한 로직을 처리하기 위해 여러 Context를 중첩해서 사용할 수도 있다.

결론

Context API는 리액트에서 전역 상태를 효과적으로 관리할 수 있는 강력한 도구이다. 적절히 사용하면 컴포넌트 간의 상태 공유가 더욱 쉬워진다.

Redux Toolkit: Redux Toolkit은 Redux의 공식 도구세트로, 상태 관리를 좀 더 간단하고 효율적으로 할 수 있도록 도와준다. 기본 Redux 설정은 코드가 많고 반복적일 수 있는데, Redux Toolkit은 이런 부분을 최소화해준다.

먼저 store.js 파일을 생성한다. Redux Toolkit의 configureStore API를 가져온다.

아래는 초기 설정된 Redux Store의 예시 코드이다.

store.js

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {},
})

이렇게 하면 Redux Store가 생성된다.

• configureStore는 Redux Toolkit에서 제공하는 API로, Redux store를 쉽게 설정할 수 있게 해준다. 이 함수는 여러 가지 Redux 미들웨어와 DevTools 설정 같은 것들을 자동으로 처리해줘서, 원래 Redux에서는 꽤 번거로웠던 설정을 간단하게 해줄 수 있다.
• reducer: {} 부분은 Redux의 리듀서를 등록하는 곳이다. 리듀서는 액션에 따라 상태를 어떻게 변경할지 정의하는 함수인데, 여기에 {} 이렇게 비어있으면 아무 리듀서도 등록되지 않은 상태라고 보면 된다.

store가 생성되면, React-Redux의 <Provider>를 애플리케이션 주위에 배치하여 React 구성 요소에서 Redux 스토어를 사용할 수 있게 설정할 수 있다. 이를 위해 src/main.js 파일에서 방금 생성한 Redux 스토어를 가져와 <Provider>를 <App> 주위에 배치하고, 스토어를 props로 전달한다. 이렇게 하면 React 구성 요소에서 Redux 스토어에 접근할 수 있게 된다.

main.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { store } from './store/store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

counterSlice.js 이름의 새파일을 추가한다. 해당 파일에서 createSliceRedux Toolkit에서 API를 가져온다.

counterSlice.js

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

createSlice는 Redux Toolkit의 API 중 하나로, 액션 생성자와 리듀서를 쉽게 만들어주는 함수다. 일반적으로 Redux에서 액션 타입, 액션 생성자, 리듀서를 각각 따로 작성해야 하는데, createSlice를 사용하면 이 모든 것을 한 번에 처리할 수 있다.

createSlice 함수는 객체를 인자로 받는데, 이 객체에는 name, initialState, 그리고 reducers 필드가 필요하다.

name은 Slice의 이름, initialState는 초기 상태, reducers는 리듀서 함수들을 객체 형태로 정의한다.

이렇게 하면 counterSlice.actions에는 increment와 decrement 액션 생성자가 자동으로 생성되고, counterSlice.reducer에는 리듀서 함수가 생성된다. 이를 통해 코드를 훨씬 간결하고 관리하기 쉽게 만들 수 있다.

counterSlice라는 이름의 slice를 만들었다면, 이제 Redux Store 애는 이렇게 설정할 수 있다.

Store.js

import { configureStore } from '@reduxjs/toolkit'
import counterSlice from './counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
})

이렇게 하면 counterSlice.reducer가 counter라는 이름으로 store에 등록된다. 이제 이 리듀서는 state.counter로 접근할 수 있게 될 것이다. 이 slice에서 정의한 액션 생성자들로 상태를 변경할 수 있게 될 것이다.

이제 React-Redux의 훅을 사용해 React 컴포넌트가 Redux Store와 상호작용할 수 있다. useSelector를 통해 저장소의 데이터를 가져오고, useDispatch를 통해 액션을 디스패치할 수 있다.

App.jsx

import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement } from './counterSlice';

function App() {
  const dispatch = useDispatch();
  const counter = useSelector((state) => state.counter);

  return (
    <div className="App">
      <h1>Counter: {counter}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default App;

1. useDispatch와 useSelector 훅을 react-redux에서 가져온다. 이 훅들은 Redux store와 상호작용하기 위해 사용된다.
2. increment와 decrement 액션 생성자를 counterSlice에서 가져온다.
3. useDispatch 훅을 사용해 Redux store에 dispatch할 수 있는 함수를 가져온다.
4. useSelector 훅을 사용해 Redux store의 counter 상태를 가져온다.
5. Increment와 Decrement 버튼을 렌더링하고, 각 버튼이 클릭되면 increment 또는 decrement 액션을 dispatch한다.

이상으로 React와 Redux Toolkit을 설정하고 사용하는 방법에 대한 간략한 개요를 마무리하겠다.

전역 상태 관리는 여러 컴포넌트에서 공유해야 하는 상태를 한곳에서 중앙 집중적으로 관리하는 것을 의미한다. 예를 들어, 로그인한 사용자의 정보, 설정 값, 테마 등이 전역 상태에 해당한다. 이러한 전역 상태를 각각의 컴포넌트에서 일일이 관리하는 것은 효율적이지 않다. 따라서 전역 상태 관리는 상태를 효율적으로 관리하기 위한 필수적인 도구다.

왜 전역 상태 관리를 사용해야 하는가?

1. 데이터 일관성: 상태가 여러 곳에서 관리될 경우 데이터 불일치 문제가 발생할 수 있다. 중앙에서 관리하면 이런 문제를 피할 수 있다.
2. 코드 재사용성: 상태 관리 로직을 한 곳에서 관리하므로, 필요한 로직을 재사용하기 쉽다.
3. 유지보수: 상태가 어떻게 변경되고 전파되는지 명확하기 때문에, 디버깅이나 추가 기능 구현이 간단해진다.

전역 상태 관리를 사용하지 않을 경우

전역 상태 관리를 사용하지 않을 경우, 주로 부모-자식 컴포넌트 간에 props를 통해 상태를 전달한다. 아니면, 커스텀 이벤트를 사용해서 상태를 관리할 수도 있다.

어떻게 상태를 전달하나?

1. Props 전달: 상위 컴포넌트에서 하위 컴포넌트로 props를 통해 상태를 내려보낸다.
2. Callback 함수: 하위 컴포넌트에서 상태를 변경할 필요가 있을 경우, 상위 컴포넌트에서 변경을 위한 함수를 props로 전달한다.

불편한 점은?

1. Props 드릴링: 상태를 가장 하위 컴포넌트까지 전달해야 하는 경우, 중간에 있는 모든 컴포넌트들을 거쳐야 한다.
2. 데이터 일관성: 여러 컴포넌트에서 같은 상태를 관리할 경우, 일관성을 유지하기 어렵다.
3. 재사용성: 같은 상태 로직을 여러 곳에서 사용할 경우, 코드를 중복으로 작성해야 할 수 있다.

일반적으로 전역 상태 관리로 관리하는 상태들

1. 사용자 인증 정보: 로그인한 사용자의 정보나 토큰 등
2. 앱 설정: 사용자가 설정한 테마, 언어, 레이아웃 등
3. 캐시된 데이터: 서버에서 가져온 데이터를 재사용할 경우
4. 알림 및 메시지: 알림이나 오류 메시지 등의 전역적인 UI 상태
5. 쇼핑 카트: 온라인 쇼핑 사이트에서 사용자가 담은 상품 목록 등

이렇게 보면 전역 상태 관리가 필요한 상황과 그렇지 않은 상황이 명확히 구분된다. 따라서 상황에 따라 가장 적절한 상태 관리 전략을 선택하는 것이 중요하다.

리액트에서의 전역 상태 관리 도구

1. Context API: 리액트 팀이 공식적으로 지원하는 상태 관리 도구다. useState나 useReducer와 함께 사용하여 상태를 관리한다.
2. Redux: 가장 널리 알려진 상태 관리 라이브러리 중 하나다. 미들웨어 지원, 타임 트래블 디버깅, 커뮤니티와의 호환성 등 많은 이점이 있다.
   • Redux Toolkit: Redux Toolkit은 Redux의 공식 도구세트로, 상태 관리를 좀 더 간단하고 효율적으로 할 수 있도록 도와준다. 기본 Redux 설정은 코드가 많고 반복적일 수 있는데, Redux Toolkit은 이런 부분을 최소화해준다.

다른 전역 상태 관리 라이브러리들

1. MobX: 객체 지향적인 접근으로 상태 관리를 할 수 있다. 데코레이터를 활용하여 코드를 더 깔끔하게 유지할 수 있다.
2. Recoil: 페이스북에서 개발한 상태 관리 라이브러리로, 아토믹 디자인을 통한 세밀한 상태 관리가 가능하다.
3. jotai: 아토믹 디자인 원칙에 기반한 상태 관리 라이브러리다. Recoil과 유사하나 더 경량화되어 있다.
4. zustand: 함수형 프로그래밍 패러다임을 적용한 작은 라이브러리로, 쉽게 상태 관리를 할 수 있다.

각 도구와 라이브러리의 차이, 장단점

1. Context API
   • 장점: 별도의 라이브러리 설치가 필요 없고, 리액트의 내장 기능이므로 학습 곡선이 낮다.
   • 단점: 상태 로직이 복잡해지면 관리하기 어렵다. 또한, 리렌더링 효율이 떨어질 수 있다.
2. Redux
   • 장점: 강력한 미들웨어 지원, 커뮤니티가 활발하므로 다양한 자료와 플러그인이 있다.
   • 단점: 초기 설정과 학습 곡선이 높다. 또한, 간단한 상태 관리에는 오버킬이 될 수 있다.
3. Redux Toolkit
   • 장점:
     1. 보일러플레이트 코드 최소화: 액션 생성 함수, 리듀서, 슬라이스 등을 쉽게 만들 수 있다.
     2. Immer 라이브러리 포함: 불변성을 쉽게 관리할 수 있다.
     3. 미들웨어 기본 설정: Redux Thunk가 기본적으로 내장되어 있다.
   • 단점: 기본 Redux를 모르는 상태에서 Toolkit을 시작하면, 내부가 어떻게 동작하는지 이해하기 어려울 수 있다.
4. MobX
   • 장점: 자유도가 높고, 객체 지향 프로그래밍에 친화적이다.
   • 단점: 리액트와의 통합이 쉽지 않을 수 있다. 디버깅이 어려울 수 있다.
5. Recoil
   • 장점: 아토믹 디자인 원칙을 따라 세밀한 상태 관리가 가능하다.
   • 단점: 아직 실험적이고, 커뮤니티 지원이 부족하다.
6. jotai
   • 장점: Recoil과 유사하게 아토믹 디자인을 지원하지만 더 경량화되어 있다.
   • 단점: 아직 새로운 라이브러리로, 문서와 커뮤니티 지원이 부족할 수 있다.
7. zustand
   • 장점: 함수형 프로그래밍 패러다임을 적용하여 간단하게 상태를 관리할 수 있다.
   • 단점: 대규모 애플리케이션에서는 다른 라이브러리에 비해 관리가 어려울 수 있다.

결론

전역 상태 관리는 복잡한 애플리케이션에서 상태를 일관되게 관리할 수 있게 해준다. 리액트에서는 다양한 도구와 라이브러리가 있어서, 프로젝트의 요구사항과 팀의 선호에 따라 선택할 수 있다. Redux나 MobX, Recoil처럼 잘 알려진 라이브러리부터, jotai나 zustand처럼 더 새롭고 경량화된 라이브러리까지 다양한 옵션이 있다. 이 중 Redux Toolkit은 Redux를 더 쉽고 간결하게 사용할 수 있게 도와주는 유용한 도구세트다.

전역 상태 관리는 복잡한 앱을 구축할 때 필수적인 부분이다. 여러 전역 상태 관리 방법의 장단점을 이해하고, 프로젝트에 가장 적합한 방법을 선택하는 것이 중요하다.

SPA는 Single Page Application의 약자로, 웹 페이지가 단 하나의 HTML 파일로 이루어진 애플리케이션이다. 전통적인 웹 페이지와는 달리, 사용자와 상호작용할 때마다 새로운 페이지를 로드하는 대신, 필요한 데이터만 서버에서 불러와 동적으로 현재 페이지를 갱신한다.

장점

1. 빠른 반응성: 전체 페이지를 새로고침하지 않으므로 사용자 경험이 부드럽다.
2. 서버 부하 감소: 필요한 부분만 업데이트하기 때문에 서버에 부담이 적다.
3. 개발 편리성: 프론트엔드와 백엔드를 분리하여 개발이 용이하다.

단점

1. SEO 문제: Cilent Side Rendering 방식으로 동작해서 검색 엔진 최적화가 어려울 수 있다.
2. 초기 로딩 시간: 앱의 모든 자원을 처음에 로드해야 하므로 초기 로딩 시간이 길 수 있다.

   리액트 라우터

리액트 라우터는 SPA를 만드는 리액트 애플리케이션에서 라우팅을 관리하는 라이브러리다. 라우팅은 사용자의 요청에 따라 다른 뷰를 보여주는 역할을 한다.

리액트에서 컴포넌트의 스타일링은 중요한 작업 중 하나이다. 다양한 방법으로 스타일을 적용할 수 있으며, 각 방법은 다음과 같다.

1. Inline style

Inline style은 객체 형태로 스타일을 정의하고, 컴포넌트의 style 속성에 전달하는 방법이다. 이 방법은 간편하게 스타일을 적용할 수 있으나, 복잡한 스타일링에는 제한적일 수 있다. 그리고 inline style은 보기 안좋다..

const style = {
  color: 'blue',
  fontSize: '16px'
};

function MyComponent() {
  return <div style={style}>Hello, World!</div>;
}

2. className

전통적인 CSS 파일을 사용하고 싶다면 className 속성을 활용해야 한다. CSS 클래스를 정의하고, 해당 클래스 이름을 컴포넌트에 할당하면 된다. className만 CamelCase 뿐이지 일반 HTML class를 작성하는 방법은 똑같다.

.my-class {
  color: red;
}

// JS
function MyComponent() {
  return <div className="my-class">Hello, World!</div>;
}

3. CSS Modules

CSS Modules는 클래스 이름의 중복을 막기 위한 기술이다. 웹팩이나 기타 빌드 도구와 함께 사용되는 CSS 처리 방식 중 하나이다. 이 기술은 전역 범위의 CSS 클래스 이름 충돌을 방지하며, 각 컴포넌트별로 독립적인 스타일을 정의할 수 있게 해준다. CSS 파일을 모듈처럼 불러와 컴포넌트에 적용할 수 있다.

1. 작성 방법

CSS Modules를 사용하려면 .module.css 확장자를 사용해야 한다. 클래스 이름을 작성할 때는 일반 CSS와 동일하나, 해당 CSS 파일을 자바스크립트로 불러올 때 모듈처럼 사용한다.

/* style.module.css */
.myClass {
  color: green;
}

// JS
import styles from './style.module.css';

function MyComponent() {
  return <div className={styles.myClass}>Hello, World!</div>;
}

2. 성능과 유지 보수

CSS Modules는 개발 시에만 로컬 스코핑이 적용되므로 런타임 성능에 영향을 주지 않는다. 또한 컴포넌트별로 독립적인 스타일을 관리할 수 있어 유지 보수가 용이하다.

3. 로컬 스코핑 (Local Scoping)

전통적인 CSS에서는 클래스 이름이 전역 범위에 정의되어, 이름 충돌이 일어날 수 있다. CSS Modules는 이 문제를 해결하기 위해 클래스 이름을 로컬 스코핑하며, 각 컴포넌트가 고유한 스타일을 가질 수 있게 해준다. 그래서 클래스네임을 신경써서 짓지 않아도 된다.

CSS에서 로컬 스코핑이란, 특정 컴포넌트 또는 모듈 내에서만 유효한 스타일 클래스 이름을 정의하는 것을 의미한다. 이로 인해 같은 클래스 이름을 여러 컴포넌트에서 사용해도 서로 영향을 주지 않는다. 예를 들어:

// 컴포넌트 A의 스타일
.button {
  color: red;
}

// 컴포넌트 B의 스타일
.button {
  color: blue;
}

정상적으로 일반 css인 경우 같은 페이지에서 두 컴포넌트가 공존 한다면 클래스 네임 충돌하여 예상치 못한 결과를 초래할 수 있다.

CSS Modules를 사용하면 작성할 땐.button이지만 개발자 도구로 해당 컴포넌트의 요소를 보면

컴포넌트 A 클래스 네임은 _button_7oxvs_33 컴포넌트 B는 _button_7oxvs_53 이런 식으로 유니크한 클래스 네임을 새롭게 만들어줘서 중복되지 못하도록 한다.

CSS Modules는 SCSS 도 사용할수 있다. 같이 사용하면 엄청 편해지는걸 채감할수 있다.

4. CSS in JS

CSS in JS는 스타일을 자바스크립트 내에서 작성하는 패러다임이다. 여러 라이브러리가 이 방식을 지원하며, JS와 CSS의 경계를 허문다.

styled-components (라이브러리)

import styled from 'styled-components';

const MyDiv = styled.div`
  color: orange;
`;

function MyComponent() {
  return <MyDiv>Hello, World!</MyDiv>;
}

결론

리액트에서 컴포넌트 스타일링은 다양한 방법으로 할 수 있다. 프로젝트의 요구사항과 팀의 코딩 스타일에 맞게 적절한 방법을 선택하는 것이 중요하다. 각 방법은 그 자체의 장단점이 있으니, 상황에 맞게 잘 고려해 사용하면 될 것이다.

합성은 리액트에서 컴포넌트를 작성하는 기본 패턴 중 하나로, 하나 이상의 컴포넌트를 결합하여 새로운 컴포넌트를 생성하는 방식이다. 이를 통해 코드의 재사용성을 높이고 유지 보수를 간소화한다.

2. Props로 컴포넌트 전달하기

리액트에서 합성을 구현하는 기본적인 방법은 props를 통해 컴포넌트를 전달하는 것이다.

function Dialog(props) {
  return (
    <div className="dialog">
      {props.title}
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <Dialog title="Welcome!">
      <p>Hello, User!</p>
    </Dialog>
  );
}

3. Container 컴포넌트와 Presentational 컴포넌트

합성을 이용하면 로직을 처리하는 Container 컴포넌트와 UI를 렌더링하는 Presentational 컴포넌트로 나눌 수 있어, 관심사의 분리가 이루어진다.

4. Higher-Order Component (HOC)

HOC는 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수로, 로직을 공유하고자 할 때 유용하다.

5. Render Props

Render Props는 children props로 함수를 전달받아 컴포넌트의 렌더링 방식을 사용자가 결정하게 한다. 이를 통해 더 유연한 컴포넌트 작성이 가능하다.

결론

리액트의 합성은 컴포넌트 구조를 깔끔하고 유지 보수가 쉽게 만드는 데 있어 중요한 역할을 한다. 컴포넌트의 재사용성을 높이고, 관심사의 분리를 통해 가독성과 유지 보수성을 향상시킨다. 다양한 패턴과 함께 적절히 활용하면 리액트 애플리케이션의 효율과 품질을 높일 수 있다.

Ref 란

Ref는 "reference"의 약자로, 리액트에서 특정 DOM 엘리먼트나 컴포넌트 인스턴스에 접근하는 방법을 제공한다. Ref를 이용하면 직접적인 DOM 조작이 가능해져 특정 요소에 포커스를 주거나, 크기 또는 위치를 계산 하는 일이나, 미디어의 재생을 제어하는 등의 작업을 할 수 있다.

함수형 컴포넌트에서는 useRef 훅을 사용해 Ref를 생성하고 관리한다. 이 훅은 렌더링 사이에서 Ref 객체의 current 값을 유지해주기 때문에, 렌더링이 일어나더라도 Ref 값은 변하지 않는다.

예를 들어, 입력 필드에 사용자가 클릭한 시점에 자동으로 포커스를 주고 싶다면 다음과 같이 useRef를 사용할 수 있다:

사용 예시

import React, { useRef } from 'react';

function MyComponent() {
  const myInput = useRef();

  const handleClick = () => {
    myInput.current.focus();
  };

  return (
    <div>
      <input ref={myInput} />
      <button onClick={handleClick}>Focus the input</button>
    </div>
  );
}

위 예제에서 useRef 훅은 입력 엘리먼트에 대한 참조를 저장하고, 버튼이 클릭되면 해당 참조를 통해 입력 엘리먼트에 직접 포커스를 준다. Ref는 사용하기 쉬운 동시에 강력한 기능을 제공하므로, 적절한 상황과 케이스에서 활용해야 하며 그렇지 않으면 복잡도를 높일 수 있다는 점을 유념해야 한다.

forward Ref

forward Ref는 리액트에서 Ref를 직접 다루기 보다, 자식 컴포넌트로 Ref를 "전달"하기 위한 기능이다. 즉, 부모 컴포넌트가 자식 컴포넌트의 내부 DOM 엘리먼트에 직접 접근할 필요가 있을 때 사용할 수 있다.

forward Ref를 사용하는 것은 큰 컴포넌트 트리에서 특정 자식 컴포넌트의 DOM 엘리먼트에 접근해야 할 때 유용하다. 이를 통해 부모 컴포넌트가 자식 컴포넌트의 내부 구조나 동작 방식을 알 필요 없이 필요한 작업을 수행할 수 있다.

리액트의 React.forwardRef 함수를 사용하면 forward Ref를 생성할 수 있다. 아래 예시는 MyInput 컴포넌트가 ref를 받아서 내부의 input 엘리먼트로 전달하는 모습을 보여준다.

const MyInput = forwardRef((props, ref) => (
  <input ref={ref} type="text" {...props} />
));

function ParentComponent() {
  const inputRef = useRef();

  return (
    <div>
      <MyInput ref={inputRef} />
     <button
        onClick={() => {
          alert(inputRef.current.value);
          inputRef.current.value = "";
          inputRef.current.focus();
        }}
      >포커스</button>
    </div>
  );
}

이 예제에서 React.forwardRef를 사용해 MyInput 컴포넌트는 받은 ref를 내부 input 엘리먼트에 전달한다. 부모 컴포넌트는 MyInput 컴포넌트의 내부 구조나 동작을 알 필요 없이 input 엘리먼트에 직접 접근할 수 있다.

forward Ref는 컴포넌트 설계에서 중요한 역할을 하며, 컴포넌트 간의 느슨한 결합을 유지하면서도 필요한 경우 특정 DOM 조작을 할 수 있게 해준다.

mutable object Ref

mutable object Ref는 React의 useRef 훅을 사용하여 만들 수 있으며, 이 객체는 .current 프로퍼티를 가지고 있다. 이 프로퍼티는 변경 가능하며, 컴포넌트 렌더링 사이에서 값을 유지한다. 이는 값을 저장하고 관리하고 싶을 때 유용하다.

다음은 mutable object Ref를 사용하는 간단한 예시다.

import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(0); // 초기값 설정

  const handleClick = () => {
    myRef.current += 1; // current 값 변경
    console.log(myRef.current); // 변경된 값 로깅
  };

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

여기서 useRef를 사용하여 myRef라는 mutable object Ref를 생성하고, .current 프로퍼티를 통해 값에 접근하고 수정한다. myRef.current의 값은 컴포넌트가 다시 렌더링되어도 유지되므로, 컴포넌트의 상태나 생명 주기와 독립적인 값을 관리하고 싶을 때 사용할 수 있다.

이런 성질 때문에 mutable object Ref는 DOM 요소의 참조뿐만 아니라, 타이머 ID, 외부 라이브러리의 인스턴스 등과 같이 컴포넌트 렌더링과 무관한 값을 관리하는 데 사용될 수 있다.

mutable object Ref를 사용하면 값의 변경이 컴포넌트의 재렌더링을 유발하지 않기 때문에, 렌더링과 무관한 값을 효율적으로 관리할 수 있다는 장점이 있다.

이 방법은 리액트에서 값을 다루는 또 다른 유연한 방식으로, 상황에 맞게 적절하게 활용할 수 있어야 한다.

callback Ref

callback Ref는 리액트에서 Ref를 다루는 또 다른 방법으로, 함수를 사용하여 컴포넌트의 특정 DOM 요소에 대한 참조를 얻는다. 이 방식은 리액트의 생명 주기와 연동되어, 특정 작업을 더욱 세밀하게 제어할 수 있다.

callback Ref는 함수형 컴포넌트 뿐만 아니라 클래스 컴포넌트에서도 사용할 수 있다. 아래 예시처럼 ref 속성에 함수를 전달하여 사용한다.

function MyComponent() {
  const myInputRef = useCallback(node => {
    if (node !== null) {
      node.focus();
    }
  }, []);

  return <input ref={myInputRef} />;
}

위 예제에서 useCallback을 사용하여 Ref 함수를 만들고, input 요소의 ref 속성에 할당한다. 이 함수는 컴포넌트가 마운트되거나 언마운트될 때 호출되며, 인자로 해당 DOM 요소 또는 null을 받는다.

이 방식은 더 많은 제어를 원할 때 유용하다. 예를 들어, 컴포넌트가 언마운트될 때 특정 작업을 수행해야 한다면 callback Ref가 적합하다.

callback Ref의 장점 중 하나는 Ref 객체를 직접 다루지 않아도 된다는 것이다. 이는 코드의 간결성과 유지보수의 편리성을 증가시킨다.

또한, callback Ref는 특정 조건이 충족될 때만 Ref를 설정하고 싶을 때도 유용하다. 함수 내에서 로직을 추가하면, 특정 조건에 따라 Ref를 설정하거나 무시할 수 있다.

callback Ref는 리액트의 Ref 시스템 중 매우 유연한 부분이며, 특별한 상황에서 Ref를 다룰 필요가 있을 때 효과적인 해결책을 제공한다.

마무리

Ref는 리액트에서 DOM 엘리먼트나 컴포넌트 인스턴스에 직접 접근할 수 있는 매우 유용한 기능이다. 다양한 사용 방법과 케이스에 따라 선택할 수 있는 ref 유형이 있으므로, 상황에 맞게 적절한 방법을 선택하면 된다.

HTML 폼 element는 폼 element 자체가 내부 상태를 가지기 때문에, React의 다른 DOM element와 다르게 동작한다. 웹 애플리케이션에서 폼은 사용자로부터 정보를 입력받는 중요한 요소이다. 리액트에서는 폼을 더 쉽게 다루고 제어할 수 있는 도구를 제공한다.

리액트에서 폼을 다룰 때, 주로 두 가지 방법이 사용되는데, 제어 컴포넌트와 비제어 컴포넌트이다. 두 방법 모두 각자의 장단점이 있다.

제어 컴포넌트

리액트에서 폼 요소를 제어 컴포넌트로 만들면 값이 리액트의 상태에 의해 제어된다. 이렇게 하면 값의 변경을 감지하고 다루기가 훨씬 수월하다. HTML에서 <input>, <textarea>, <select>와 같은 폼 요소는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트된다.

제어 컴포넌트 예시

import React, { useState } from 'react';

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

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

  return (
    <form>
      <label>
        이름:
        <input type="text" value={name} onChange={handleChange} />
      </label>
    </form>
  );
}

setName을 사용하여 입력값을 변경하면 리액트가 컴포넌트를 다시 렌더링하고 최신 값이 입력 필드에 반영된다.

폼 제출

폼의 제출은 사용자가 입력한 데이터를 서버에 보내거나 다른 컴포넌트로 전달할 때 주로 사용된다.

function FormSubmit() {
  const [value, setValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`입력값: ${value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
      <button type="submit">제출</button>
    </form>
  );
}

onSubmit 이벤트 핸들러를 사용하면 폼 제출을 캡처할 수 있다.

textarea 태그

HTML에서 <textarea> 요소는 텍스트를 자식으로 정의한다.

<textarea>
  Hello there, this is some text in a text area
</textarea>

React에서 <textarea>는 value 어트리뷰트를 대신 사용한다.

 const [value, setValue] = useState('');
<textarea value={value} onChange={handleChange} />

select 태그

HTML에서 <select>는 드롭 다운 목록을 만든다. 예를 들어, 이 HTML은 과일 드롭 다운 목록을 만들고 있다.

<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

React에서는 selected 어트리뷰트를 사용하는 대신 최상단 select태그에 value 어트리뷰트를 사용한다. 한 곳에서 업데이트만 하면되기 때문에 제어 컴포넌트에서 사용하기 더 편하다.

<select value={value} onChange={handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>

전반적으로 <input type="text">, <textarea> 및 <select> 모두 매우 비슷하게 동작한다. 모두 제어 컴포넌트를 구현하는데 value 어트리뷰트를 허용한다.

리액트는 웹 폼을 다루는 강력한 도구를 제공한다. 상태 관리와 이벤트 핸들링을 통해 폼 입력과 제어, 유효성 검사를 쉽게 수행할 수 있다. 제대로된 구조와 패턴을 사용하면 사용자 경험을 향상시키고 개발 효율성을 높일 수 있다.

리액트에서 다중 입력 제어하기

다중 입력 필드를 가진 폼은 사용자로부터 여러 정보를 동시에 수집해야 할 때 흔히 사용된다. 리액트에서는 여러 입력 필드를 효율적으로 제어하는 방법을 제공하며, 상태를 사용해 여러 입력을 관리하는 방법을 살펴보자.

다중 입력 상태 사용하기

여러 입력 필드를 가진 폼의 경우, 각 입력 필드에 대한 상태를 따로 관리할 수도 있지만, 객체를 사용해 한 번에 관리하는 것이 더 효율적일 수 있다.

다중 입력 예시

import React, { useState } from 'react';

function MultiInputForm() {
  const [form, setForm] = useState({
    name: '',
    age: '',
    email: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm({
      ...form,
      [name]: value
    });
  };

  return (
    <form>
      <label>
        이름:
        <input type="text" name="name" value={form.name} onChange={handleChange} />
      </label>
      <label>
        나이:
        <input type="number" name="age" value={form.age} onChange={handleChange} />
      </label>
      <label>
        이메일:
        <input type="email" name="email" value={form.email} onChange={handleChange} />
      </label>
    </form>
  );
}

handleChange 함수에서 이벤트 객체의 name과 value를 가져와서 상태를 업데이트한다. 이렇게 하면 코드를 간결하게 유지하면서 여러 입력 필드를 효과적으로 관리할 수 있다.

리액트에서 다중 입력 제어는 상태를 통해 간단하게 구현할 수 있다. 한 객체 내에서 여러 입력 값을 관리함으로써 코드의 재사용성과 유지보수성을 높일 수 있다. 이를 통해 사용자로부터 여러 정보를 효율적으로 수집하고 처리할 수 있게 된다.

비제어 컴포넌트

리액트에서는 폼을 다루는 방식 중 하나로 비제어 컴포넌트를 사용할 수 있다. 비제어 컴포넌트는 리액트 컴포넌트가 폼의 상태를 관리하지 않고, 폼 입력을 DOM 자체에서 처리한다.

대부분 경우에 폼을 구현하는데 제어 컴포넌트를 사용하는것이 좋다.

특징

비제어 컴포넌트는 ref를 사용하여 폼 요소에 직접 접근할수 있다. 따라서, 리액트의 상태를 사용하지 않고, 폼 요소의 값을 직접 읽을 수 있다. 리액트에서는 useRef와 createRef라는 두 가지 방법으로 ref를 만들 수 있다. 함수형 컴포넌트에서는 useRef를, 클래스 컴포넌트에서는 createRef를 사용한다.

useRef 사용 예시

import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('A name was submitted: ' + inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">제출</button>
    </form>
  );
}

이 코드에서 inputRef를 사용하여 입력 요소에 직접 접근하고 있다. handleSubmit ****이벤트 핸들러에서 inputRef.current.value 으로 input 폼요소의 값을 읽고 있다.

제어 컴포넌트 과 비제어 컴포넌트 비교

제어 컴포넌트

제어 컴포넌트는 폼의 입력값이 리액트 컴포넌트의 상태에 의해 제어되는 컴포넌트를 말한다. 입력값이 변할 때마다 상태를 변경하고, 상태가 변경될 때마다 컴포넌트가 다시 렌더링된다.

비제어 컴포넌트

비제어 컴포넌트는 폼의 상태를 직접 관리하지 않고, DOM에서 값을 직접 가져오는 방식이다. ref를 사용해서 DOM 노드에 직접 접근한다.

비제어 컴포넌트는 폼을 다룰 때 코드를 간결하게 유지하려는 경우나 리액트 외부와의 통합이 필요한 경우에 효과적이다. 하지만, 복잡한 상태 관리나 로직 구현이 필요한 경우에는 제어 컴포넌트를 사용하는 것이 더 적절할 수 있다.

• React의 이벤트는 소문자 대신 캐멀케이스(camelCase)를 사용한다.

이벤트 핸들러를 인라인으로 정의하려면 다음과 같이 익명 함수로 작성하면 된다.

<button onClick={() => alert('You clicked me!')}>

컴포넌트에서 이벤트 처리

이벤트 핸들러 정의하기

리액트에서 이벤트를 처리하려면 이벤트 핸들러 함수를 작성하고, 해당 함수를 특정 이벤트 핸들러 속성(예: onClick, onSubmit)에 전달할 수 있다.

function handleInputChange(e) {
  console.log(e.target.value);
}

이벤트 전달하기

• JSX를 사용하여 이벤트에 전달되는 함수는 호출되는 것이 아니라 전달되어야 한다.

함수 전달(올바른 방식)에서는 handleClick 함수가 이벤트 핸들러로 onClick에 전달된다. 이는 React에게 해당 함수를 기억하고, 사용자가 버튼을 클릭했을 때만 호출하도록 지시한다. 링크

다른예시:

• 이벤트를 원하는 요소에 연결.

<input type="text" onChange={handleInputChange} />

이제 사용자가 input에 입력을 하면, handleInputChange 함수가 호출된다.

기본 동작 방지

일부 브라우저 이벤트에는 기본 동작들이 있다. 예를 들어 <form>제출 이벤트는 버튼을 클릭할 때 발생하며 기본 동작으로 전체 페이지를 다시 로드한다.

e.preventDefault()이벤트 개체를 호출하여 브라우저 기본동작을 발생하지 않도록 할 수 있다.

function Signup() {

    function handleSubmit(e){
   e.preventDefault();
      alert('Submitting!');
}

  return (
    <form onSubmit={handleSubmit}>
      <input />
      <button>Send</button>
    </form>
  );
}

이벤트 전파

이벤트 전파는 자바스크립트 포스트에 다뤘기 때문에 상세하게 다루지 않을꺼다. 링크

리액트 공식문서를 보면 이벤트가 부모 요소에 전파하는 것을 방지하려면, 전파 중지를 e.stopPropagation(); 을 해당 이벤트 핸들러에 작성하면 된다.

리액트에서 이벤트 핸들링은 웹 앱의 사용자 인터랙션을 다루는 중요한 부분이다. 이 포스트에서는 리액트에서 이벤트 핸들러를 정의하고 사용하는 방법, 이벤트 객체의 사용, 기본 동작 방지 및 이벤트 전파와 같은 주제를 다뤘다. 이러한 기초를 통해 사용자와의 상호작용을 원활하게 만들 수 있으며, 더욱 풍부하고 반응적인 경험을 제공할 수 있다.

리액트 공식 문서

컴포넌트 반복하기

리액트에서 배열의 데이터를 컴포넌트로 변환하는 작업은 자주 발생하는 일이다. 이렇게 여러 개의 컴포넌트를 반복적으로 렌더링하려면 배열의 map 메서드를 활용할 수 있다.

map 메서드 사용하기

자바스크립트의 배열 메서드인 map은 배열의 각 요소에 대해 함수를 실행하고, 그 결과로 새로운 배열을 생성한다. 리액트에서는 이를 활용해 배열 데이터를 컴포넌트로 변환할 수 있다.

예시:

const fruits = ['Apple', 'Banana', 'Cherry'];
const fruitItems = fruits.map((fruit) => <li>{fruit}</li>);

return (
  <ul>{fruitItems}</ul>
);

filter 메서드 사용하기

리액트에서 리스트를 다룰 때, map사용하는 것이 일반적이지만, 조건에 따라 특정 컴포넌트만 렌더링하고 싶다면 filter 메서드도 함께 사용할 수 있다.

1. 렌더링할 리스트 데이터

const users = [
  { id: 1, name: 'Alice', isActive: true },
  { id: 2, name: 'Bob', isActive: false },
  { id: 3, name: 'Charlie', isActive: true },
];

1. Filter 메서드로 조건에 맞는 데이터 선택

isActive 값이 true인 사용자만을 렌더링하고 싶다면, filter 메서드로 해당 조건의 데이터만 선택할 수 있다.

const activeUsers = users.filter(user => user.isActive);

1. Map 메서드로 컴포넌트 생성하기

map 메서드를 사용해 선택된 데이터로 컴포넌트를 생성한다.

const userList = activeUsers.map(user => <User key={user.id} user={user} />);

4. 렌더링

마지막으로 생성된 컴포넌트 리스트를 렌더링하면 된다.

return (
  <div>{userList}</div>
);

컴포넌트로 분리하기

코드의 재사용과 관리를 더 쉽게 하기 위해, 리스트 아이템을 별도의 컴포넌트로 분리할 수 있다.

예시:

function FruitItem({ fruit }) {
  return <li>{fruit}</li>;
}

const fruits = ['Apple', 'Banana', 'Cherry'];
const fruitItems = fruits.map((fruit) => <FruitItem fruit={fruit} />);

return (
  <ul>{fruitItems}</ul>
);

Key

리액트에서 리스트를 렌더링할 때 key는 매우 중요한 역할을 한다. key는 리액트가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 데 도움을 준다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.

key의 필요성

리액트는 렌더링 성능을 최적화하기 위해 가상 DOM을 사용한다. 배열을 렌더링할 때 각 요소에 고유한 key를 할당하면 리액트는 변화가 있는 요소만 효과적으로 식별하고 업데이트할 수 있다.

key가 없다면 배열의 모든 요소를 다시 렌더링해야 하므로 성능이 저하될 수 있다.

key 사용하기

key는 각 리스트 항목의 고유한 문자열로 할당되어야 한다. 가능한 한 항목의 고유한 값을 사용하는 것이 좋다.

예시:

const fruits = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
];

const fruitItems = fruits.map((fruit) => <li key={fruit.id}>{fruit.name}</li>);

인덱스를 key로 사용하는 문제점

배열의 인덱스를 key로 사용하는 것은 쉽고 간편할 수 있지만, 배열의 순서가 변경될 가능성이 있다면 문제가 발생할 수 있다. 이는 리액트의 성능 최적화에 방해가 될 수 있으므로, 가능한 한 고유한 값을 사용해야 한다.

고유한 값을 사용하는 방법

1. 데이터의 고유한 값을 사용하기

가장 간단하고 안전한 방법은 이미 고유한 값을 갖고 있는 데이터의 특정 필드를 키로 사용하는 것이다. 예를 들어, 데이터베이스에서 가져온 객체가 id 필드를 갖고 있다면 이를 키로 사용할 수 있다.

const listItems = items.map(item => <li key={item.id}>{item.name}</li>);

1. 라이브러리 사용하기

JavaScript에는 고유한 키를 생성할 수 있는 라이브러리들이 있다. 예를 들어, uuid 라이브러리를 사용하면 매우 고유한 문자열을 생성할 수 있다.

import { v4 as uuidv4 } from 'uuid';

const myKey = uuidv4(); // '6c84fb90-12c4-11e1-840d-7b25c5ee775a'

1. 키 생성 함수 만들기

필요에 따라 고유한 키를 생성하는 함수를 직접 만들 수도 있다. 예를 들어, 타임스탬프와 랜덤 값을 조합하는 방법이 있다.

function createUniqueKey() {
  return `${new Date().getTime()}-${Math.random()}`;
}

key와 컴포넌트

리스트를 렌더링하는 컴포넌트 안에서 key를 정의해야 한다. key는 특별한 속성으로, 컴포넌트 내부에서 props.key로 접근할 수 없다.

리액트에서 key는 컴포넌트의 배열 렌더링을 최적화하는 데 중요하다. 고유한 값을 사용하고, 적절한 위치에서 정의함으로써 리액트의 렌더링 성능을 향상시킬 수 있다.