Dani's Dev TokTok

들어가며리액트에서 달력을 구현할 수 있는 여러가지 라이브러리 중 react-datepicker 를 이용해서시작 날짜와 종료 날짜를 선택할 수 있는 즉, 날짜를 범위로 선택할 수 있는 달력을 구현해보고자 한다.이것을 이용해서 여행 일정 관리나, 날짜를 선택해야 하는 예약 시스템을 구현할 수 있을거라 생각한다. 달력 만들기 먼저 리액트 프로젝트에서 npm이나 yarn 을 이용해서 date-picker 를 다운로드 한다.npm install react-datepickeryarn add react-datepicker 만약 날짜를 한국어로 설정하고 싶다면  date-fns 에서 해당 기능을 제공하므로 같이 다운로드 한다.npm install date-fnsyarn add date-fns 기본 달력 표시DatePi..

들어가며React 의 특징 중 하나는 Virtual DOM(가상돔) 를 가지고 있다는 것이다.리액트가 가상돔으로 어떻게 렌더링을 하는지 알아볼 것이다 React 의 렌더링 프로세스Virtual DOM (가상 돔)DOM 을 변경하는 작업이 많아질수록, 브라우저는 많은 연산을 수행해야 하고 이는 성능 저하로 이어질 수 있다.React 같은 라이브러리는 가상 DOM 을 사용해서 이 문제를 해결한다.  Virtual DOM(가상 돔) 은 실제 DOM의 복사본으로, JS 객체 형태로 메모리 안에 저장된다.가상돔은 브라우저의 실제 DOM을 조작하기 전에 변경 사항을 미리 계산하고,최소한의 작업만 실제 DOM 에 적용하도록 도와준다.이를 통해서 성능을 최적화하고 빠른 UI 업데이트를 할 수 있게 해준다. React ..

들어가며React Hook Form 은 비제어 컴포넌트를 기반으로 동작하는 폼 관리 라이브러리다.React 에서 form 을 쉽게 관리할 수 있도록 해주며, form의 상태 관리와 유효성 검사를 간단하게 만들어준다. React Hook FormReact Hook Form 은 다음의 커맨드로 설치할 수 있다.npm install react-hook-form React Hook Form 은 useForm 이라는 훅을 통해 폼 상태, 검증 및 제출 로직을 관리한다.import { useForm } from 'react-hook-form' React Hook Form 에서 주로 사용되는 메서드는 아래와 같다.register : 입력 요소에 연결하기 위한 함수. 이 함수를 통해서 입력 요소에 유효성 검사 규칙을 ..

들어가며React 로 form 을 구현할 때 제어 컴포넌트와(Controlled Component) 와 비제어 컴포넌트(Uncontrolled Component) 라는 개념을 접할 수 있다.이 두 방식은 입력 값을 관리하는 방법에서 차이가 있으며, 상황에 따라 적절한 방법을 선택해야 한다.이번 포스팅에서는 이 두 개념을 비교할 것이다. 제어 컴포넌트와 비제어 컴포넌트제어 컴포넌트(Controlled Component)입력 값이 React 의 state에 의해서 제어되는 컴포넌트입력 값이 변경될 때마다 onChange 이벤트로 상태 업데이트하고, 업데이트된 상태로 다시 렌더링 한다. 작동 원리사용자가 input 에 값을 입력하면 onChange 이벤트가 호출된다.이벤트 핸들러가 새로운 입력 값을 React..

들어가며Zustand 는 독일어로 '상태(state)' 라는 뜻을 가진 라이브러리다. 아래의 특징을 가지고 있다.특정 라이브러리에 엮이지 않는다. (그래도 React와 함께 쓸 수 있는 API는 기본적으로 제공한다.)한 개의 중앙에 집중된 형식의 스토어 구조를 활용하면서, 상태를 정의하고 사용하는 방법이 단순하다.Context API를 사용할 때와 달리 상태 변경 시 불필요한 리랜더링을 일으키지 않도록 제어하기 쉽다.React에 직접적으로 의존하지 않기 때문에 자주 바뀌는 상태를 직접 제어할 수 있는 방법도 제공한다. (Transient Update라고 한다.)동작을 이해하기 위해 알아야 하는 코드 양이 아주 적다. 핵심 로직의 코드 줄 수가 약 42줄밖에 되지 않는다. (VanillaJS 기준)Redu..

이전 프로젝트에서 리액트 쿼리를 쓰지 않고 무한 스크롤을 구현했는데리액트 쿼리를 쓰면 더 쉽게 구현할 수 있다고 한다.나중에 수정 예정 참고 영상https://youtu.be/3Gch9RBD7-g?si=UcKD09tyrpmBeGYz

1. 서론전에 프로젝트 할때는 svg 가 복잡하다는 이유로 png 를 사용했었다. 사용하기는 편했지만 png는 일반적으로 파일 크기가 크기 때문에 최적화적인 측면에서 좋지 않았다.그래서 이번에 하는 프로젝트에서 최적화를 위해 아이콘을 png 가 아닌 svg 를 사용하고자 한다.리액트에서 svg 를 불러오는 방법은 여러가지가 있지만이번 프로젝트에서는 카테고리 종류에 따른 아이콘을 보여주기 위해 여러개를 사용하는 법에 대해서만 다루고자 한다. 2. 본론이번 프로젝트에서 카테고리가 대략 6개 정도 되는데 물론 6개 정도라면 svg 를 하나하나 import 를 해도 되지만 뭔가 개발자스럽지 않고 하드코딩같다는 생각이 들어서 여러 개의 svg 를 불러올 수 있는 방법을 구글링 했다.그 중 하나가 svg 를 저장하..

1. 서론리액트의 Context API 는 컴포넌트 트리의 깊이에 관계없이 props 를 전달하지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. Context는 전역 데이터를 관리하는 데 사용한다.이 Context 를 이용해서 웹 애플리케이션에서 다크모드를 구현하고자 한다.(에시는 https://daddda3232.tistory.com/72 여기서 사용했던것을 활용했다) 2. 본론createContext createContext 는 Context 객체를 만든다.const VillagerContext = createContext('light'); createContext 안에는 기본값을 넣어준다여기서는 ligth 모드를 기본값으로 넣어줬다. createContext 함수 호출로 생성된 컨텍스트 객..

1. 서론약 한달 전 프론트엔드 포지션으로 면접을 봤었는데 이런 문제가 나왔다.import React, { useState } from 'react';function App() { const [articles, setArticles] = useState(['남자옷추천', '신발추천', '화장품추천']) const changeItem = () => { const newArr = articles; newArr[0] = '여자옷추천'; setArticles(newArr); } return ( {articles[0]} {articles[1]} {articles[2]} 클릭 );}export default ..

1. 들어가며React 에 Typescript 적용하여 프로젝트 만들기2. Typescript타입스크립트의 개념이나 적용법에 대해서는 전에 포스팅한것이 있어서 여기서는 리액트 프로젝트에어떻게 타입스크립트를 적용시킬 것인지에 대한 것을 포스팅할 예정이다. 우선 타입스크립트를 적용한 리액트 프로젝트를 만드려면 아래 커맨드를 이용해서프로젝트를 만들어주면 된다.npx create-react-app 프로젝트이름 --template typescript 기존 프로젝트에 적용하고 싶다면 아래의 커맨드로 타입스크립트 패키지를 설치하고npm i typescript @types/node @types/react @types/react-dom @types/jestjs나 jsx 파일을 ts나 tsx 파일로 변경한다.  리액트 프..