learnReact

컴포넌트에 props 전달하기 리액트 컴포넌트는 props를 이용해 서로 통신합니다. 모든 부모 컴포넌트는 자식 컴포넌트에게 props를 사용하여 정보를 전달할 수 있습니다. props는 HTML 어트리뷰트를 생각나게 할 수도 있지만, 객체 배열 함수를 포함한 모든 J

React: UI 개발의 강력한 도구 리액트는 사용자 인터페이스(UI)를 구축하기 위한 자바스크립트 라이브러리로, 사용자가 직접 상호작용하는 웹 페이지를 효율적으로 개발할 수 있게 해줍니다. 리액트를 배우는 이유 높은 점유율 리액트는 현재 가장 널리 사용되는 프

🎯 State: 컴포넌트의 기억 저장소 📌 State란? React 컴포넌트는 UI와 상호작용하면서 상태가 변해야 하는 경우가 많습니다. 예를 들어 버튼 클릭 시 값이 변해야 하지만 화면에 즉시 반영되지 않는 문제가 발생할 수 있습니다. state 개념 이미지

🛠️ State 고급 스킬 React에서 객체 상태(state)를 업데이트하는 방법을 배우고, 효율적으로 다룰 수 있는 다양한 기법을 살펴보겠습니다. 1️⃣ 객체 State 업데이트하기 React의 state는 객체를 포함하여 모든 JavaScript 값을 가질

React의 상태 업데이트 로직이 여러 이벤트 핸들러에 분산될 경우, 컴포넌트 관리가 복잡해질 수 있습니다.이 문제를 해결하기 위해 Reducer를 활용하여 상태 업데이트 로직을 단일 함수로 통합해 관리합니다.Reducer는 상태 업데이트 로직을 캡슐화하여 관리하는 함

React에서 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달할 때 props를 사용합니다.하지만 중간에 여러 컴포넌트를 거치는 Prop Drilling 상황이 발생하면 관리가 어렵고 불편합니다.이를 해결하기 위해 React Context API를 활용하여 데이터를 트리

Hooks & 라이프사이클

useRef는 렌더링에 필요하지 않은 값을 참조할 수 있도록 도와주는 React Hook입니다.DOM을 직접 조작하거나, 상태(state)와는 별개로 값을 저장할 때 유용하게 사용됩니다.useRef는 단일 프로퍼티인 current를 가진 객체를 반환합니다.useRef:

TodoList 컴포넌트는 할 일 목록(Todo)을 표시하며, 완료된 항목만 필터링해서 볼 수 있는 기능을 구현한 코드입니다.전체 항목과 완료된 항목 보기 전환 체크박스를 통해 완료된 항목만 필터링해서 볼 수 있습니다. isDone 상태값에 따라 할 일 목록을 필터

린캔버스란? 린캔버스(Lean Canvas)는 스타트업과 같은 신생 기업이 비즈니스 모델을 빠르게 정리하고 검증할 수 있도록 도와주는 비지니스 모델 프레임워크 린캔버스 구성 요소 문제(Problem) : 고객이 겪는 주요 문제들을 명확하게 정의 고객 세그먼트(Cust

Tailwind CSS Tailwind CSS란 무엇인가? TailwindCSS는 유틸리티 클래스 기반의 CSS 프레임워크로, 개발자가 HTML 클래스 속성에 클래스 명을 작성 함으로써 바로 스타일을 적용할 수 있도록 도와줍니다. 이로 인해 CSS 파일을 작성할 필

React Router는 React 애플리케이션에서 클라이언트 측 라우팅을 관리하는 라이브러리입니다. 이를 통해 사용자가 애플리케이션 내에서 페이지 간에 원활하게 이동할 수 있도록 도와줍니다. React Router를 사용하면 페이지 리로드 없이도 다양한 컴포넌트를 렌

React Icons는 다양한 아이콘을 쉽게 사용할 수 있게 해주는 라이브러리입니다. 설치 명령어는 다음과 같습니다:헤더의 기본 레이아웃을 설정하는 CSS 파일입니다.분석:.nav 클래스는 Flexbox를 사용하여 자식 요소들을 수평으로 배치하고, justify-con

목적: CanvasItem 컴포넌트는 개별 린캔버스 항목을 카드 형태로 표시합니다.구성:Link 컴포넌트를 사용하여 클릭 시 해당 린캔버스의 상세 페이지로 이동합니다.Tailwind CSS 클래스를 활용하여 카드의 배경색, 모서리 둥글기, 그림자, 호버 시 확대 효과

헤더 UI React Icon 설치 React Icons는 다양한 아이콘을 쉽게 사용할 수 있게 해주는 라이브러리입니다. 설치 명령어는 다음과 같습니다: 헤더 UI 1. src/components/Header.css 헤더의 기본 레이아웃을 설정하는 CSS 파일

설명:추가된 임포트:Note 컴포넌트를 임포트하여 각 CanvasCard 내에 메모를 추가할 수 있게 했습니다.useState와 uuidv4를 임포트하여 메모의 상태 관리와 고유 ID 생성을 가능하게 했습니다.상태 관리 (notes):notes 상태를 도입하여 각 Ca

json-server는 간단한 JSON 파일을 사용하여 RESTful API를 빠르게 구축할 수 있는 도구입니다. 프론트엔드 개발 시 실제 백엔드가 준비되지 않았더라도 API를 모킹(mocking)하여 개발을 진행할 수 있어 매우 유용합니다. 이번 섹션에서는 json-

이번 포스트에서는 검색 기능 구현과 관련된 내용을 다루고, json-server 라이브러리의 버전 변경에 대해 알아보았습니다. 교안을 바탕으로 코드의 주요 변경사항과 그에 대한 설명을 포함하여 오늘 배운 내용을 정리해보겠습니다.json-server 라이브러리의 버전을

삭제기능 구현 🗑️✨ 이번 포스트에서는 삭제 기능 구현에 대해 다루었습니다. 교안을 바탕으로 코드의 주요 변경사항과 그에 대한 설명을 포함하여 내용을 정리해보겠습니다. 실습 🛠️ src/api/canvas.js 수정 📄 deleteCanvas 함수를 추가하

이번 포스트에서는 린캔버스 애플리케이션의 데이터 관리와 사용자 인터페이스 향상을 위해 다양한 수정 사항을 구현했습니다. db.json 데이터베이스 파일의 구조 변경부터 시작하여, React 컴포넌트의 세부 기능 추가 및 개선에 이르기까지, 각 단계별로 코드 변경 사항을

이번 포스트에서는 린캔버스 애플리케이션의 사용자 경험을 더욱 향상시키기 위해 노트 추가 및 삭제 기능을 구현하고, 한글 입력 이슈를 해결하는 과정을 다룹니다. 각 파일별로 코드 변경 사항을 상세히 설명하며, 이러한 변경이 애플리케이션에 미치는 영향을 분석하겠습니다.이벤

이번 포스트에서는 Custom Hook을 만들어 React 컴포넌트에서 API 요청 로직을 효율적으로 관리하는 방법을 다룹니다. 기존의 Home.jsx 컴포넌트를 리팩토링하여 API 요청을 커스텀 훅으로 분리함으로써 코드의 재사용성과 가독성을 향상시켰습니다. 또한, 한

React Query는 서버 상태 관리를 위한 강력한 라이브러리로, 데이터 fetching, 캐싱, 동기화, 업데이트 등의 작업을 간편하게 수행할 수 있도록 도와줍니다. 복잡한 서버 데이터 로직을 효과적으로 관리하며, 다양한 API 호출 및 상태 관리 작업을 간소화하여

React 애플리케이션에서 사용자 경험을 향상시키기 위해 검색 필터 기능을 리뉴얼하였습니다. 이번 섹션에서는 검색 이벤트 변경과 함께 카테고리 필터를 추가하여 보다 정교한 데이터 필터링을 구현하는 방법을 소개합니다.기존의 검색 기능을 개선하고, 카테고리 필터를 추가함으

React 애플리케이션에서 서버 데이터를 간편하게 관리하고자 할 때, json-server는 빠르고 효율적인 솔루션을 제공합니다. 특히, json-server-vercel을 활용하면 JSON 서버를 Vercel 플랫폼에 손쉽게 배포하여 클라우드 환경에서 API를 운영할

React의 내용을 다시 상기시키기 위해서 복습하려고 합니다. React 공식 홈페이지 (틱택도게임)