반응형 Javascript11 React 완벽 정리 ㉑ — Error Boundary 완벽 이해하기 React 애플리케이션을 개발하다 보면 아무리 코드를 꼼꼼하게 작성해도 예상하지 못한 오류가 발생할 수 있습니다.예를 들어 특정 컴포넌트에서 오류가 발생하면:페이지 렌더링 ↓컴포넌트 오류 발생 ↓화면 일부 또는 전체 렌더링 실패와 같은 상황이 발생할 수 있습니다.특히 실제 서비스에서는 단순히 콘솔에 오류를 출력하는 것만으로는 충분하지 않습니다.사용자에게:문제가 발생했습니다.잠시 후 다시 시도해주세요.와 같은 적절한 오류 화면을 보여주는 것이 필요합니다.React에서는 이런 렌더링 과정에서 발생하는 오류를 감지하고 대체 UI를 보여주는 방법으로 Error Boundary를 사용할 수 있습니다.이번 글에서는 Error Boundary가 무엇인지부터 시작해서 실제 프로젝트에서 어떻게 활용할 수 있는.. 2026. 8. 28. React 완벽 정리 ⑳ — React Form 완벽 정리 React로 웹 애플리케이션을 만들다 보면 반드시 만나게 되는 것이 Form입니다.로그인부터 회원가입, 검색, 게시글 작성, 상품 등록, 댓글 작성까지 대부분의 서비스에서 Form을 사용합니다.예를 들어 로그인 화면은 다음과 같은 구조를 가지고 있습니다.아이디 입력비밀번호 입력 ↓ 로그인 ↓API 요청 ↓성공 / 실패React에서 Form을 구현할 때 중요한 것은 단순히 을 사용하는 것이 아닙니다.입력값을 어떻게 관리할 것인지,언제 검증할 것인지,Submit을 어떻게 처리할 것인지,API에는 어떻게 전달할 것인지까지 함께 이해해야 합니다.이번 글에서는 React Form의 기본 개념부터 시작해서 다음 내용을 하나씩 알아보겠습니다.HTML Form 기본 구조Controlled.. 2026. 8. 28. React 완벽 정리 ⑲ — React Router 완벽 이해하기 React로 간단한 화면을 만들 때는 컴포넌트 하나만 있어도 충분합니다.하지만 실제 웹 애플리케이션을 만들기 시작하면 여러 페이지가 필요합니다.예를 들어:/├── /about├── /products├── /products/1├── /products/2├── /login└── /mypage같은 URL 구조를 만들게 됩니다.사용자가:홈상품 목록상품 상세로그인마이페이지등을 이동할 수 있어야 합니다.이때 필요한 것이 바로 Routing입니다.React에서는 일반적으로 React Router를 이용해서 URL과 화면을 연결합니다.이번 글에서는 React Router의 기본 개념부터 시작해서:BrowserRouterRoutesRouteLinkNavLink중첩 라우트OutletURL 파라미터useParamsQuery.. 2026. 8. 28. React 완벽 정리 ⑯ — useMemo와 useCallback 완벽 이해하기 React를 공부하다 보면 어느 순간 이런 이야기를 듣게 됩니다."불필요한 리렌더링을 줄이려면 useMemo와 useCallback을 사용해야 합니다."그래서 많은 개발자들이 다음과 같이 생각하기 쉽습니다.렌더링이 발생한다 ↓useMemo 사용 ↓렌더링 방지또는:함수가 다시 만들어진다 ↓useCallback 사용 ↓렌더링 방지하지만 정확하게 말하면 이것은 완전히 맞는 설명이 아닙니다.useMemo와 useCallback은 컴포넌트의 렌더링 자체를 막는 Hook이 아닙니다.둘의 핵심 목적은 다음과 같습니다.useMemo→ 계산 결과를 메모이제이션useCallback→ 함수 참조를 메모이제이션즉,useMemo와 useCallback은 "렌더링을 막는 도구"가 아니라 렌더링 과정에서 발생.. 2026. 8. 28. React 완벽 정리 ③ — Props 완벽 이해하기: 컴포넌트 간 데이터 전달 React에서 컴포넌트를 여러 개 만들기 시작하면 자연스럽게 이런 질문이 생깁니다."컴포넌트와 컴포넌트 사이에서 데이터를 어떻게 전달할까?"React에서는 이때 Props를 사용합니다.1편에서는 React의 전체적인 구조를 살펴보면서 Props를 간단하게 소개했고, 2편에서는 State와 useState를 자세히 알아봤습니다.이번 글에서는 Props를 중심으로 다음과 같은 내용을 하나씩 살펴보겠습니다.Props란 무엇인가? ↓Props 전달하기 ↓Props 읽기 ↓여러 종류의 값 전달하기 ↓객체 / 배열 전달 ↓함수를 Props로 전달 ↓children ↓Props는 읽기 전용 ↓Props와 State ↓부모 → 자식 데이터.. 2026. 8. 28. React 완벽 정리 ② — useState와 State 완벽 이해하기 React를 공부하다 보면 반드시 만나게 되는 개념이 있습니다.바로 State입니다.1편에서는 React의 전체적인 구조와 함께 Component, JSX, Props, State 등의 개념을 간단하게 살펴봤습니다.이번 글에서는 그중에서도 React에서 매우 중요한 **State와 useState**를 집중적으로 알아보겠습니다.특히 단순히 useState의 사용법만 알아보는 것이 아니라,"왜 React에서는 일반 변수 대신 State를 사용하는가?"라는 질문부터 시작해 보겠습니다.🤖 AI와 함께하는 React 학습 기록이 글은 React 공식 문서를 기반으로 ChatGPT와 함께 학습하고, 내용을 이해한 후 예제와 함께 재구성한 개인 학습 기록입니다.공식 문서의 내용을 그대로 옮기기보다는 직접 예제를 .. 2026. 8. 28. React 완벽 정리 ⑥ — 리스트 렌더링 완벽 이해하기: map(), filter(), key까지 React로 개발하다 보면 다음과 같은 상황을 자주 만나게 됩니다.상품 10개를 화면에 표시해야 한다.회원 목록을 보여줘야 한다.게시글 목록을 만들어야 한다.Todo 목록을 표시해야 한다.댓글 목록을 렌더링해야 한다.이처럼 같은 형태의 UI를 여러 개 반복해서 표시해야 할 때 React에서는 JavaScript의 배열 메서드인 map()과 filter()를 적극적으로 사용합니다.그리고 React에서 리스트를 렌더링할 때 반드시 이해해야 하는 개념이 하나 더 있습니다.바로 **key**입니다.React 공식 문서에서도 리스트 렌더링을 map(), filter(), key를 중심으로 설명하고 있습니다. map()으로 배열을 JSX 목록으로 변환하고, filter()로 원하는 데이터만 골라낸 다음, 각 리스트.. 2026. 8. 28. React 완벽 정리 ⑤ — 조건부 렌더링 완벽 이해하기: if, 삼항 연산자, &&부터 실전 UI까지 React로 화면을 만들다 보면 다음과 같은 상황을 자주 만나게 됩니다.로그인한 사용자라면 → 마이페이지 표시로그인하지 않았다면 → 로그인 버튼 표시데이터를 불러오는 중이라면 → 로딩 화면 표시데이터를 불러왔다면 → 데이터 표시오류가 발생했다면 → 오류 메시지 표시상품이 품절이라면 → "품절" 표시재고가 있다면 → "구매하기" 표시즉, 현재 상태에 따라 서로 다른 UI를 보여줘야 하는 경우가 많습니다.React에서는 이런 기능을 특별한 React 문법으로 처리하지 않습니다.JavaScript에서 사용하는:ifif...else삼항 연산자 ? :논리 AND &&등을 JSX와 함께 사용해서 조건부 렌더링을 구현합니다.이번 글에서는 React에서 조건부 렌더링을 어떻게 사용하는지 기초부터 실전까지 정리해 보겠습.. 2026. 8. 28. React 완벽 정리 ④ — 이벤트와 State 완벽 이해하기: 사용자 입력부터 화면 업데이트까지 React 애플리케이션은 단순히 데이터를 화면에 보여주는 것만으로 끝나지 않습니다.사용자가 버튼을 클릭하거나,텍스트를 입력하거나,체크박스를 선택하거나,폼을 제출하는 등 다양한 사용자 상호작용에 반응해야 합니다.React에서는 이러한 사용자 동작을 이벤트(Event)로 처리합니다.그리고 이벤트가 발생하면 State를 변경하고, State가 변경되면 React가 새로운 화면을 계산하여 UI를 업데이트합니다.이번 글에서는 이 과정을 하나의 흐름으로 이해해 보겠습니다.사용자 행동 ↓Event 발생 ↓Event Handler 실행 ↓State 변경 ↓Render ↓UI 업데이트이번 글에서는 다음 내용을 다룹니다.① React 이벤트란?② 이벤트 핸들러③ onClick 사용하기④ 이벤트 .. 2026. 8. 28. 이전 1 2 다음 반응형
