fromfavor

React Router v7 소개React 애플리케이션은 싱글 페이지 애플리케이션 기반 --> 페이지가 한 개 URL 경로에 따라 동적인 애플리케이션 화면을 보여주기 위해서는 React Router 사용ㄴ 라이브러리이면서 프레임워크의 성격을 가짐 https://reactrouter.com/ React Router Official Documentation4,048,871,903 Downloads on npmreactrouter.com React Router 모드Declarative가장 기본이 되는 모드배우기 쉽고 적용하기 쉬움Data선언적 모드에 데이터 로딩, 패칭 기능이 추가된 형태페이지 전환 시 필요한 데이터를 자동으로 로드하거나 에러 로딩 상태를 처리해주는 기능 탑재Framework데이터 모드에 폼..

모달(Modal)✔️ 모달이란?모달 : 기존 화면 위에 겹쳐서 나타나는 대화 상자나 팝업 창을 의미 ✔️ 모달 vs 팝업모달 모달 창을 닫거나, 내부에서 확인 또는 취소 액션을 하기 전까지는 원래 보던 화면(부모)을 건드릴 수 X팝업팝업 : 원래 보던 화면과 완전히 독립되어 띄워지는 새로운 창팝업 창이 떠있어도 사용자는 뒤에 있는 화면을 클릭하거나 스크롤할 수 O ✔️ 모달 구현하기 // src/App.tsximport { useState } from "react";import Modal from "./components/Modal";import ModalContent from "./components/ModalContent";import ModalContent2 from "./components/Mo..

useTransition(fetch) 소개useTransition : 상태 업데이트를 낮은 우선 순위의 트랜지션으로 처리, 비동기 함수도 처리할 수 있도록 기능이 확장 ㄴ 리액트가 더 중요한 작업이 끝나고 여유가 있는 상태에서 처리한다는 의미 useTransition 훅의 기본적인 문법 형태const [isPending, startTransition] = useTransition()isPending실행 중인 트랜지션이 있으면 true, 없으면 falsestartTransition코드를 트랜지션으로 실행할 수 있게 해주는 함수 == 해당 함수로 작성한 코드는 낮은 우선순위로 처리 (여유가 있을 때 처리) useTransition + 데이터 패칭 실전// App.tsximport axios from "ax..

https://motion.dev/ Motion: JavaScript & React animation libraryMotion (prev Framer Motion) is a fast, production-grade animation library for React, JavaScript and Vue. Build smooth UI animations at a tiny footprint.motion.dev ✔️ Framer Motion의 핵심 속성initial시작 상태애니메이션이 처음 등장할 때의 초기 스타일 x축 위치, 투명도 등animate목표 상태컴포넌트가 최종적으로 도달해야 하는 스타일transition움직임의 방식애니메이션의 지속 시간(duration), 효과(spring, ease), 지연 시간(..

Zustand란?Zustand : 전역 상태 관리 라이브러리 ㄴ Redux Toolkit, Context API보다 적은 코드와 직관적인 방식으로 상태 관리 가능 공식 홈페이지https://zustand-demo.pmnd.rs/ Zustand zustand-demo.pmnd.rs Zustand 사용하기패키지 설치npm install zustand 명령어를 사용하여 다운로드폴더 구조 설계src/store/ 하위에 ts 파일로 생성 store 파일 생성 및 기본 뼈대 정의store : 애플리케이션의 전역 상태(State)와 이를 변경하는 비즈니스 로직(Action)을 한데 모아 관리하는 보관소store에서 사용할 데이터와 함수의 타입 설계도를 interface로 정의Zustand의 create 훅을 사용하여..

데이터 패칭 기초 개념데이터 통신 : 컴포넌트가 서버에 외부 데이터를 요청하고, 그 응답을 받아 상태로 반영하여 UI를 업데이트하는 과정 API(Application Programming Interface) : 클라이언트가 서버와 통신하기 위한 통신 규칙REST APIGraphQL REST API : 주소로서 데이터를 구분하는 API 설계 방식ex) https://api.example.com/user/1?lang=ko- 전체적인 주소 : URL- https:// : 프로토콜- api.example.com : 도메인- user, 1 : path, 세그먼트- lang=ko : Query String HTTP(S) 통신 : 내부적으로 메소드를 활용하여 데이터 통신의 역할을 구분 GET데이터 요청POST데이터 ..

전역 상태 관리가 필요한 이유CounOutside, CountDisplay, CountButton에서 사용할 상태를 정의ㄴ 공통 부모 컴포넌트인 App 컴포넌트 내부에 정의 Count, CountGroup 컴포넌트는 상태값을 사용하지 않지만 props를 받아서 하위 컴포넌트로 전달해야 함 ㄴ props drilling props drilling 해결 방법Context APIRedux ToolKitZustand Context API먼저 Context 객체를 생성한 후에 해당 객체를 통해 데이터의 공유 범위와 공유할 데이터를 설정--> Context 객체의 공유 범위에 포함된 다른 컴포넌트들은 공유하는 데이터를 가져와서 사용할 수 있음 Context 객체를 받을 변수는 대문자로 시작 ㄴ 컴포넌트처럼 사용할..

Toggle Switch // App.tsximport { useState } from "react";function App() { const [hide, setHide] = useState(false); const handleHideMode = (hide: boolean) => { setHide(() => !hide); }; return ( ... );}// src/components/HideCompletedToggleButton.tsxexport default function HideCompletedToggleButton({ hide, handleHideMode,}: { hide: boolean; handleHideMode: (hide: ..

Context를 사용해 데이터를 깊게 전달하기보통의 경우, 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 정보를 전달ㄴ 그러나 중간에 많은 컴포넌트를 거쳐야 하거나, 애플리케이션의 많은 컴포넌트에서 동일한 정보가 필요한 경우에는 props를 전달하는 것이 번거롭고 불편할 수 OContext는 부모 컴포넌트가 깊이에 상관 없이, 트리 아래에 있는 모든 컴포넌트에 정보를 명시적으로 사용할 수 있게 해줌 ✔️ Props 전달하기의 문제점Props 전달하기 : UI 트리를 통해 해당 데이터를 사용하는 컴포넌트에 명시적으로 데이터를 전달하는 방법 Props drilling : 데이터가 필요한 여러 컴포넌트의 가장 가까운 공통 조상이 트리 상 높이 위치하여 높게까지 state를 끌어올리는 것 ✔️ Contex..

useId웹 접근성(Web Accessibility) : 모든 사용자가 어떤 신체적, 기술적 조건에 구애받지 않고 웹사이트의 모든 정보에 동등하게 접근하고 이해할 수 있도록 보장하는 것 의 id 속성과 의 htmlFor 속성을 동일한 값으로 매칭하여 참조관계 생성 스크린 리더가 인풋창을 읽을 때 라벨 텍스트를 함께 읽어줌라벨 텍스트를 클릭해도 인풋창에 자동으로 포커스 --> UX 향상 useId 훅 : 컴포넌트 내부에 고유하고 독립적인 id 값을 생성하기 위한 리액트 내장 훅 --> 컴포넌트가 여러 번 렌더링되어도 리액트가 알아서 서버와 클라이언트 모두에서 겹치지 않는 안전한 고유 ID 문자열을 뱉어줌 // App.tsximport Checkbox from "./components/Checkbox";..