1. 페이지네이션 구현페이지네이션은 전체 데이터를 한 번에 불러오는 것이 아니라,페이지 단위로 나누어 데이터를 조회하고 이동하는 방식이다.무한 스크롤과 달리 사용자가 명시적으로 페이지를 이동한다는 특징이 있다. 구현은 크게 두 가지로 나눠서 진행했다.페이지 상태 관리페이지 단위 데이터 조회1.1 페이지 상태 관리현재 페이지를 기준으로 데이터를 조회해야 하기 때문에, 컴포넌트에서 페이지 상태를 먼저 정의해야 한다.const [page, setPage] = useState(0);또한 페이지당 데이터 개수를 상수로 정의한다.const PAGE_SIZE = 10;1.2 데이터 조회 (useQuery)페이지네이션에서는 useInfiniteQuery가 아니라 useQuery + page 상태를 사용한다.다음 훅을 ..

1. 무한 스크롤 구현 무한 스크롤은 사용자가 페이지를 계속 내려도 추가 콘텐츠를 이어서 불러오는 방식이다.구현은 크게 두 가지로 나눠서 진행했다.스크롤 하단 감지데이터 추가 로딩1.1 스크롤 하단 감지페이지 최하단에 감지용 `div`를 두고, 해당 요소가 화면에 보일 때를 기준으로 다음 데이터를 요청한다.이때 Intersection Observer를 사용하면 스크롤 이벤트를 직접 처리하지 않고도특정 요소가 화면에 들어왔는지 여부를 효율적으로 감지할 수 있다.React에서는 `react-intersection-observer`를 사용하면 쉽게 구현할 수 있다.npm i react-intersection-observerreact-intersection-observer에서 제공하는 `useInView` 훅을..

1. 구현 목표OpenAI와 Tanstack Query를 활용해사용자가 입력한 정보를 기반으로, 맞춤형 면접 질문을 생성해주는 기능을 구현했다.기능1)카테고리, 보유 기술, 그리고 다루고 싶은 주제를 입력하면 해당 내용을 반영한 맞춤형 질문이 생성된다.기능2)생성된 질문을 바탕으로, AI 면접관과 실제 인터뷰처럼 대화를 이어갈 수 있도록 한다.생각보다 구현 자체는 어렵지 않았지만, 요청 흐름과 상태를 어떻게 나눌지 정리하는 과정이 까다로웠다.2. OpenAI 설정2.1 OpenAI API KEY 발급OpenAI API를 사용하기 위해 API Key를 먼저 발급한다. https://platform.openai.com/api-keys에 접속한 뒤,우측 상단의 `Create new secret key` 버튼을..

1. 왜 slug가 필요한가?기존 URL의 문제점기존에는 게시글을 UUID 기반 URL로 접근했다.이 방식은 기능적으로는 문제가 없지만, 주소가 지나치게 길고 어떤 내용의 글인지 바로 파악하기 어렵다.또한 검색 엔진 입장에서도 의미 없는 문자열이기 때문에 SEO 측면에서도 불리하다.`slug` 을 활용해 개선이를 개선하기 위해 URL에 `slug`를 활용한다.질문 상세 페이지를 `app/question/[idx]/[slug]/page.tsx` 구조로 구성하면, URL을 다음과 같이 노출할 수 있다.`slug`를 사용하니 주소만 봐도 어떤 질문인지 바로 알 수 있고,제목에 포함된 키워드가 URL에 그대로 드러나 SEO에도 유리하다. 또한 실제 내부 식별자인 UUID를 URL에 노출하지 않기 때문에, 구조..

1. 들어가며이 글은 Next.js, Tanstack Query, Supabase를 사용하여 로그인과 회원가입을 구현할 때참고할 수 있는 기존 포스팅을 정리한 글이다. 사전 지식이 없다면 먼저 아래 글을 확인하는 것을 추천한다.[Auth] 소셜 로그인 OAuth 동작 원리 이해하기[WEB] 인증과 인가: 쿠키, 세션, 토큰(JWT) 정리[TanStack Query] TanStack Query를 활용해 서버 상태 관리하기[React Hook Form] useState 없는 폼 관리: React Hook Form으로 리렌더링 최적화하기[Zod/React Hook Form] React Hook Form에 Zod를 결합해 유효성 검사 분리하기[Zustand] 복잡한 상태관리는 그만, Zustand와 미들웨어 핵..

1. 들어가며이전 글에서는 보호된 라우트를 통해 인증 여부에 따라 접근 가능한 페이지를 제한하였다. 이번 글에서는 이를 확장하여 관리자 전용 페이지(Admin Page) 를 구현하고,`role` 기반으로 페이지 접근, UI 노출, 데이터 조작 권한을 제어해보자.2. profiles 테이블에 role 필드 추가2.1 Enum 타입 생성 및 컬럼 추가관리자 권한을 구분하려면 사용자 프로필에 역할 정보가 필요하다.이를 위해 `profiles` 테이블에 `role` 컬럼을 추가하였다.Supabase SQL Editor 또는 Table Editor에서 아래 SQL을 실행한다.-- 1. Enum 타입 생성CREATE TYPE user_role AS ENUM ('user', 'admin');-- 2. profiles..

1. 들어가며저번 글에서 인증/인가를 구현하고, Supabase 세션을 Zustand로 전역 상태로 관리하였다.이번 글에서는 앞서 만든 Zustand `useSession` 훅을 활용해,현재 로그인한 사용자의 이메일과 프로필 이미지를 Header에 렌더링하고로그아웃 시 Supabase와 Zustand 스토어를 동시에 업데이트하는 방법을 다룬다.2. Next.js 설정: 외부 이미지 도메인 등록Next.js `next/image`는 외부 이미지 사용 시 도메인을 명시해야 한다.// next.config.tsimport type { NextConfig } from "next";const nextConfig: NextConfig = { images: { remotePatterns: [ { ho..

1. 들어가며웹 애플리케이션에서 인증 여부에 따라 접근 가능한 페이지를 제한하고자 한다. 이때 로그인하지 않은 사용자가 마이페이지, 결제 페이지, 관리자 화면에 접근하지 못하도록 막는 구조를일반적으로 보호된 라우트(Protected Route) 라고 부른다.Next.js 환경에서는 보호된 라우트를 구현하는 방식이 크게 두 가지로 나뉜다.미들웨어(Middleware) 방식ProtectedRoute 컴포넌트 방식이번 글에서는 각각의 구조와 동작 원리를 정리하고, 어떤 상황에서 어떤 방식을 선택해야 하는지 살펴본다.2. 미들웨어(Middleware) 방식 (서버가드)2.1 미들웨어란?미들웨어는 요청(Request)과 페이지(Page) 사이에서 실행되는 서버 코드다.사용자가 어떤 URL에 접근하면 Next.js..

1. 들어가며구현하고자 하는 페이지는 입력 항목이 매우 많아 스크롤이 길어지는 문제가 있다.따라서 스크롤 위치를 실시간으로 감지하고, 클릭 시 해당 위치로 이동하는 Scroll Spy 목차를 도입하기로 했다. 스크롤 위치를 기준으로 활성 섹션을 판단하기 위해 IntersectionObserver를 사용하면,별도의 스크롤 이벤트 처리 없이 동기화를 구현할 수 있다. Intersection Observer API - Web API | MDNIntersection Observer API는 다음과 같은 상황이 발생했을 때 호출되는 콜백 함수를 구성할 수 있습니다. 대상 요소는 기기의 뷰포트 또는 특정 요소와 교차합니다. 특정 요소는 Intersection Observer API의developer.mozilla...

이번 포스팅에서는 Prettier를 기준 포맷터로 설정하고, TailwindCSS를 사용하고 있기 때문에 Tailwind 전용 플러그인까지 함께 적용하는 방법을 알아보자.1. Prettier1.1 Prettier란?Prettier는 설정 옵션을 최소화하고, 정해진 규칙에 따라 코드를 강제로 변환한다.prettier 공식 문서Prettier의 장점시간 절약: 코드를 작성할 때 서식에 신경 쓰지 않고 막 써도 저장 시점에 자동으로 예쁘게 바뀐다.팀 스타일 통합: 팀원 모두가 같은 설정을 공유하면,누가 코드를 수정해도 스타일이 변하지 않아 Git Diff(변경 사항 확인)가 깔끔해진다.1.2 Prettier 설치1. VSCode에 Prettier 확장 프로그램 설치CLI로도 Prettier를 실행할 수는 있지..

1. 들어가며사용자가 현재 사용 중인 페이지를 직관적으로 파악하기 위해 Header Active Link 처리를 구현해 보자.2. App Router에서 현재 경로 가져오기Next.js App Router는 현재 경로를 문자열로 반환하는 `usePathname` 훅을 제공한다. import { usePathname } from "next/navigation";const pathname = usePathname(); 이 훅과 JS 메서드 `startsWith`를 사용하면 Header 메뉴의 활성 여부를 판단할 수 있다. App Router의 라우팅에 대한 자세한 내용은 여기에서 자세히 확인할 수 있다.3. usePathname와 startsWith로 Active Link 판별하기`startsWith`는 ..

1. 이미지는 어디에 저장되는가?이미지 파일은 용량이 크기 때문에 DB에 직접 저장하지 않는다.대신 Storage(스토리지)라는 별도의 파일 저장소에 업로드한다. 스토리지는 이미지, 동영상과 같은 대용량 파일을 보관하는 공간이다.로컬 컴퓨터처럼 폴더 구조를 만들 수 있고, 스토리지는 업로드된 각 파일은 고유한 URL을 발급해 준다.이 URL만 DB에 저장하면, 브라우저나 서버 어디서든 이미지에 접근할 수 있다.대부분의 웹 서비스가 이 방식을 사용한다.2. 이미지 업로드 구현 방법2.1 문제: 기본적인 방식기본적인 이미지 업로드 방식은 아래와 같다.사용자가 이미지를 스토리지에 업로드한다스토리지에서 이미지 URL을 응답받는다포스트 생성 시 해당 URL을 함께 저장한다하지만 이 방식에는 문제가 있다. 이미지를..

1. 들어가며회원가입만 완료하면 별도의 추가 입력 없이 바로 서비스를 이용할 수 있도록 하기 위해,프로필을 자동으로 생성하는 기능을 구현해 보자.2. DB 트리거 방식 vs 애플리케이션 핸들링DB 트리거란, `users` 테이블에 데이터가 추가되면(Insert),DB가 알아서 `profile` 테이블에도 데이터를 추가하는 방식을 말한다.이런 기능은 DB의 트리거를 이용해 만드는 게 일반적이지만, 이 방식에는 치명적인 단점이 존재한다. 트리거 함수 내부에서 예외가 발생했을 때, 애플리케이션 단에서 이를 감지하고 처리하기가 매우 까다롭다는 점이다.따라서 안전한 방식이라고 확신하긴 어렵다.이러한 이유로, DB 트리거 대신 애플리케이션(클라이언트) 단에서 제어하는 방식을 선택한다.애플리케이션 레벨 프로필 생성 ..

1. 비밀번호 재설정 과정1.1 재설정 전체 흐름단계구분주체 설명1재설정 요청사용자로그인 화면에서 비밀번호 재설정 요청을 수행한다2인증 링크 발송인증 서버요청을 받아 일회성 토큰이 포함된 인증 링크를 이메일로 발송한다3링크 접근 및 검증인증 서버사용자가 링크를 클릭하면, 포함된 토큰을 기반으로 요청의 유효성을 검증한다4리디렉션인증 서버 → 브라우저검증이 완료되면, 미리 지정된 비밀번호 재설정 페이지로 이동시킨다5비밀번호 변경사용자 → 인증 서버사용자가 새 비밀번호를 입력하면, 검증된 요청에 한해 DB에 반영한다1.2 비밀번호 재설정이 가능한 이유비밀번호 재설정이 가능한 핵심 원리는 인증 링크에 숨어 있다.사용자가 이메일로 받는 비밀번호 재설정 링크는 단순한 페이지 이동용 URL이 아니라,재설정 요청을 검..

1. Route Guard란?특정 페이지(e.g., 마이페이지, 피드 작성)는 로그인이 완료된 사용자만 접근이 가능해야 하고,반대로 로그인 페이지나 회원가입 페이지는 이미 로그인한 사용자가 접근할 필요가 없다.이를 제어하는 기능을 라우트 가드(Route Guard)라고 한다.React(SPA) 환경과 Next.js 환경 각각에서 라우트 가드를 구현하는 방법을 알아보자.2. React 라우트 가드 구현하기2.1 글로벌 레이아웃 (GlobalLayout)라우트 가드를 구현하기 전, 전체적인 레이아웃과 라우터 설정을 먼저 잡자 `Outlet`은 자식 라우트의 페이지 컴포넌트가 실제로 렌더링 되는 위치를 지정한다.// src/layouts/GlobalLayout.tsxconst GlobalLayout = () ..

1. 기존 세션 관리 방식의 문제점기존에는 로그인된 사용자의 세션 데이터를 단순히 쿠키나 로컬 스토리에 보관했다.이 방식에는 다음과 같은 한계가 존재한다.쿠키에서 세션 데이터를 매번 직접 꺼내와야 한다. (`getCookie`로 읽고, `setCookie`로 갱신의 반복..)세션 데이터 변경을 감지하기 어렵다.컴포넌트 간 세션 상태 공유가 불편하다.이러한 문제를 해결하기 위해, 세션 데이터를 Zustand와 같은 전역 상태 관리 도구에 보관하여모든 컴포넌트에서 손쉽게 접근할 수 있도록 하자. Zustnad 사용 방법은 여기서 확인할 수 있다.2. Session Store 구현가장 먼저 세션 데이터를 담을 스토어를 생성하자.Supabase의 `Session` 타입을 활용하며, Zustand의 `combin..

1. 문제: 인증 에러 메시지가 영어로 출력이전 글에서 에러 발생 시 toast 메시지를 띄우는 기능 구현을 마쳤다. 현재 인증 실패 시 에러 처리는 다음과 같은 형태다.onError: (error) => { toast.error(error.message, { position: "top-center", }); setPassword("");},이 방식은 동작에는 문제가 없지만,`error.message`는 Supabase 서버에서 내려준 영문 메시지이기 때문에 UX면에서 아쉽다.따라서 에러 메시지를 직접 번역해서 출력할 필요가 있다 이번 글에서는 Supabase가 내려주는 인증 에러의 구조를 분석하고,에러 코드를 기반으로 한국어 메시지로 매핑하여 변환하는 방식을 정리한다.2. Supabase 에..

1. 들어가며기능을 정상적으로 동작하게 만드는 것만큼이나,실패했을 때 어떻게 처리할지(Error Handling)를 설계하는 것은 중요하다.로그인 기능을 예로 들어보자.사용자가 비밀번호를 틀렸을 때, 아무 일도 일어나지 않는다면 사용자는 당황할 것이다. 이번 글에서는 Tanstack Query의 Mutation을 사용할 때, 이러한 에러 처리를 어디서,어떻게 하는 것이 구조적으로 좋은지 알아보자.2. 기본적인 에러 흐름`mutationFn` 내부에서 에러 발생 (`throw error`)mutation의 `onError` 이벤트 핸들러 호출`onError`의 매개변수로 에러 객체 전달해당 시점에서 에러 로깅, 메시지 출력 등의 처리가 가능이 구조를 기반으로 에러 메시지를 출력하면 된다.3. 문제: mut..

1. 들어가며지난 글에서살펴봤듯 인증은 크게 세션 방식과 토큰 방식으로 나뉜다. Supabase는 두 방식을 모두 지원하지만,세션 방식은 사용자 수가 증가할수록 DB 및 서버 부하가 누적될 수 있어 무료 요금제에서는 기능이 제한다. 이번 프로젝트에서는 접속자 수 카운트, 동시 접속 제한 등 세션 기반 상태 관리 기능이 필요하지 않았기 때문에,서버 부하를 줄이고 확장성에 유리한 토큰 기반 인증 방식을 채택하여 구현을 진행하였다.Supabase Auth⚡ 사용 배경Supabase 클라이언트의 강점 중 하나는 인증 토큰(Access Token, Refresh Token)을 자동으로 관리해 준다는 점이다. 기본 클라이언트를 사용할 경우 토큰은 브라우저의 localStorage에 저장되며,`@supabase/ss..

1. 소셜 로그인이란?소셜 로그인 이미 가입된 외부 플랫폼(Google, GitHub, Kakao 등)의 계정을 연동하여서비스에 로그인하는 기능을 의미한다.사용자는 새로운 계정을 만들 필요 없이 이미 사용 중인 외부 서비스 계정을 이용해 로그인할 수 있어,오늘날 대부분의 서비스가 기본 기능으로 제공한다.2. OAuth는 인가 프로토콜이다.소셜 로그인은 OAuth(Open Authorization) 프로토콜을 기반으로 동작한다.인증(로그인) 기능을 구현하는데 왜 인가 프로토콜을 사용할까? OAuth는 원래 로그인을 위한 인증(Authentication) 목적이 아니라,권한을 위임받는 인가(Authorization)를 위해 만들어진 프로토콜이기 때문이다.예시노션 캘린더가 구글 캘린더 데이터를 읽어오려면,사용..

1. 페이지 라우팅(Page Routing)이란?페이지 라우팅이란, 경로(URL)에 따라 그에 알맞은 페이지(컴포넌트)를 렌더링 하는 과정을 말한다.e.g., `/new` 접속 시 `New` 페이지 컴포넌트 렌더링작동 원리React는 SPA(Single Page Application) 방식을 채택하여,페이지 이동 시 서버로부터 새 페이지를 받는 것이 아니라 필요한 요소만 교체하여 효율적으로 업데이트한다. 아래 링크를 통해 자세히 확인할 수 있다. 미야옹 — meowowmeowow 기술 블로그. 오늘의 배움을 내일의 기록으로 남깁니다.meowow.tistory.com2. React router 설치2.1 react-router 라이브러리react-router은 리액트 애플리케이션에서 페이지 이동을 구현할..

1. 개발 환경 세팅1.1 프로젝트 생성Next.js 최신 버전을 설치합니다.npm create next-app@latest .1.2 스타일링 설정Tailwind CSS와 Prettier 설정을 마친 후, UI 컴포넌트 라이브러리인 shadcn/ui를 추가합니다.🔗 [Tailwind] Tailwind CSS 설치 및 플러그인 추천🔗 [shadcn/ui] Tailwind 기반 디자인 시스템 shadcn/ui 사용하기2. 레이아웃 및 UI 구성시맨틱 태그를 활용하여 웹 표준을 지키는 구조적인 레이아웃을 잡습니다. 퍼블리싱이 번거로운 경우, 미리 준비된 layout 브랜치를 clone하여 활용할 수 있습니다.git clone -b layout https://github.com/MyNameSieun/Next..

1. 시맨틱 태그(Semantic Tag)1.1 시맨틱 태그란?시맨틱 태그란 “이 요소가 어떤 역할인지”를 명확하게 설명해 주는 HTML 태그를 의미한다.``와 같은 비시맨틱(Non-semantic) 태그는 아무런 의미를 갖지 않지만,``, ``, `` 같은 시맨틱 태그는 구조 자체에 의미를 가진다. (태그만 봐도 헤더인지, 본문인지 알 수 있음)1.2 코드 예시 (Before & After)비시맨틱 태그헤더 영역메뉴 본문 영역푸터시맨틱 태그 블로그 로고 홈 소개 시맨틱 태그란 무엇인가? 작성일: 2024.05.21 1. 시맨틱 태그의 정의 ..

React는 대표적인 SPA(Single Page Application) 방식의 라이브러리다.그렇다면 왜 React는 전통적인 MPA(Multi Page Application) 구조 대신 SPA 방식을 채택했을까?이 이유에 대해 알아보자1. 전통적 웹 서비스 구조, MPA1.1 MPA란?MPA(Multi Page Application) 방식은 서버가 각 URL에 대응하는 HTML 파일을 미리 준비해 두고,브라우저가 해당 URL을 요청하면 그 HTML을 그대로 반환하는 구조다.서버는 `/home`, `/blog`, `/login`처럼 다양한 경로의 HTML 파일을 모두 보관한다.브라우저는 특정 URL(e.g., `/blog`)을 요청하면 서버가 제공한 HTML을 받아 화면을 통째로 다시 렌더링 한다.동작..

1. useContext 개요1.1 React Context 등장 배경React에서 컴포넌트 간 데이터를 전달하는 가장 기본적인 방식은 props이다.하지만 props는 부모 → 자식 방향으로만 전달되기 때문에 컴포넌트 구조가 깊어질수록 다음과 같은 문제가 생긴다.prop drilling의 문제데이터를 실제로 사용하지 않는 중간 컴포넌트가 불필요하게 props를 전달하게 됨props가 여러 단계를 거치면 데이터의 출처를 추적하기 어려움중간 컴포넌트에서 props 이름이 변경되면 전체 트리를 수정해야 함오류 발생 시 어느 단계에서 문제가 생겼는지 찾기 어려움이러한 구조적 문제를 해결하기 위해 등장한 기능이 React Context API이다.1.2 Context란?Context는 데이터를 저장하는 전역 보..

1. 렌더링과 최적화1.1 리-렌더링의 발생 조건컴포넌트 내부의 `state`가 변경되었을 때컴포넌트가 전달받은 `props`가 변경되었을 때 부모 컴포넌트가 리렌더링 될 경우, 자식 컴포넌트도 함께 리렌더링 됨1.2 최적화 (Optimization)최적화란 웹 서비스의 성능을 향상하기 위한 모든 행위를 말한다.일반적인 웹 서비스 최적화 방법: 서버 응답 속도 개선이미지·폰트·코드 파일 등 정적 리소스 로딩 최적화불필요한 네트워크 요청 감소리액트에서의 최적화 방법:리액트에서는 특히 불필요한 리렌더링을 줄이는 것이 핵심 최적화 대상이다.컴포넌트의 불필요한 리렌더링 방지 (`React.memo` -> 컴포넌트 결과를 캐싱)컴포넌트 내부의 불필요한 연산 방지 (`useMemo` -> 연산된 값을 캐싱)컴포넌트..

1. useReducer란?`useReducer`는 컴포넌트 내부에서 새로운 state를 생성하고 관리할 수 있게 해주는 React Hook이다.모든 useState는 useReducer로 대체 가능하며, 특히 상태 관리 로직이 복잡해지는 상황에서 더 유용하다.기존 useState를 사용하면 컴포넌트 내부에 상태 변경 로직을 직접 작성해야 한다.그러나 컴포넌트의 본래 목적은 UI를 렌더링 하는 것이므로,상태 관련 코드가 지나치게 길어지면 가독성이 떨어지고 유지보수가 어려워진다.반면 useReducer는 상태 관리 코드를 컴포넌트 외부로 분리할 수 있다.컴포넌트 내부에서는 단순히 `state`와 `dispatch`만 선언하고, 실제 상태 변경 로직은 `reducer` 함수에 별도로 정의한다.즉, UI 코드..

1. 컴포넌트 구조 정의프로젝트는 아래 세 가지 컴포넌트로 구성한다.아래 레포에서 레이아웃 및 결과물을 clone할 수 있다.퍼블리싱이 번거로운 경우, 아래 레포를 clone하여 바로 활용하면 된다. GitHub - MyNameSieun/React-TodoListContribute to MyNameSieun/React-TodoList development by creating an account on GitHub.github.com2. MockData 구성하기초기 렌더링 테스트를 위해 아래와 같은 mockData를 준비한다.// src/mockData.tsexport const mockData = [ { id: "0", isDone: false, content: "React 공부하기",..

1. 라이프 사이클 (LifeCycle)1.1 라이프 사이클이란?라이프사이클은 말 그대로 생애주기를 뜻한다.사람에게 탄생 → 변화 → 죽음의 과정이 존재하듯,React 컴포넌트도 생성되고, 업데이트되고, 화면에서 사라지는 일련의 생명주기 과정을 가진다. 사람처럼 태어나고, 변화하고 죽는 것이다.1.2 라이프사이클의 3단계단계설명작업 예시Mount (생성)컴포넌트가 처음으로 DOM에 삽입되어 화면에 나타나는 단계컴포넌트가 마운트 됐을 때 백엔드 서버에 네트워크 요청을 보내 데이터 불러오기Update (업데이트)state 또는 props가 변경되어 리렌더링이 발생하는 단계컴포넌트가 업데이트 될 때 변경된 값이 무엇인지 콘솔에 출력Unmount (제거)컴포넌트가 DOM에서 제거되는 단계컴포넌트가 언마운트 됐..

1. Custom hooks1.1 Custom hooks 등장 배경Custom Hook은 클래스 컴포넌트에서 사용하던 기능들을함수형 컴포넌트에서도 사용할 수 있도록 도와주는 메커니즘을 의미한다.2017년 이전에는 React 컴포넌트를 class 문법으로만 작성할 수 있었고,함수 컴포넌트는 단순히 UI만 렌더링 하는 용도로 제한되었다.하지만 클래스 컴포넌트는 코드가 복잡하다는 문제를 가지고 있었다. 따라서 더 간단한 함수 컴포넌트에서도 상태 관리와 Lifecycle 기능을 사용하고 싶다는개발자들의 요구를 해결하기 위해 React 팀은 React Hooks를 도입한다. 클래스 컴포넌트의 기능을 마치 낚아채듯이 가져와서문법이 훨씬 간결한 함수 컴포넌트에서도 사용할 수 있게 해주는 기능이다.오늘날에는 특별한 이..