print("Today-I-Learned")

수업에서 배운 storybook을 이용해 todo 컴포넌트를 만들어보자!공식문서에 친절하게 todo 컴포넌트를 만들어보는 튜토리얼이 제공된다. 그러나 jsx 파일이 기준이고, 이전 버전이라 최신버전과 tsx를 사용하고 있는 내 작업 환경에서는 수정해야하는 부분이 몇 가지 있었다,, 튜토리얼 참고https://storybook.js.org/tutorials/intro-to-storybook/react/ko/simple-component/ 1.  Task.tsx 와 Task.type.tsx 파일 생성// 공식문서 튜토리얼에서 알려주는 Task.jsx import React from 'react';export default function Task({ task: { id, title, state }, onAr..

📌 탄스택 쿼리서버로부터 데이터 가져오기, 데이터 캐싱, 캐시 제어 등 데이터를 쉽고 효율적으로 관리할 수 있는 라이브러리.React Query라는 이름으로 시작했지만, v4부터 Vue나 Svelte 등의 다른 프레임워크에서도 활용할 수 있도록 기능이 확장되며 TanStack Query라는 이름으로 변경되었다. 1. 탄스택 쿼리의 특징데이터 가져오기 및 캐싱동일 요청의 중복 제거신선한 데이터 유지무한 스크롤, 페이지네이션 등의 성능 최적화네트워크 재연결, 요청 실패 등의 자동 갱신옵션에 쿼리 키(queryKey) 필수!!  2. useQuery가장 기본적인 쿼리 훅, 컴포넌트에서 데이터를 가져올 때 사용const 반환 = useQuery(옵션)   useQuery 를 사용해 JSONPlaceholder..

아무리 생각해도 리액트 공부 시작하면서 코드를 직접 쳐보기 보다는 수업 때 배운거 뜯어보기만 한 것 같아서코드 익힐 연습 겸 아주 기본적인 카운터 (그냥 +1, -1, 리셋만 되는 거)랑 Todo 리스트 (근데 이제 추가와 삭제만 있는...^^ㅎ)를 만들어봤다! 스타일 적용도 없고 그냥 정말 간단하게... 코드 작성 익히는 거에만 초점을 맞췄다 하하  📌카운터 만들기// Counter.tsx import { useState } from 'react';const Counter = () => { const [count, setCount] = useState(0); // useState 훅을 사용해 count라는 변수를 생성하고, 초기값을 0으로 설정 // setCount는 count값을 업데이트하..

📌 Recoil React를 위한 상태관리 라이브러리 💡 상태관리란? 애플리케이션의 상태를 효율적으로 관리하고 업데이트하는 과정을 의미.상태는 사용자의 입력, 서버의 응답, UI의 현재 상태 등 데이터와 관련된 모든 정보를 포함한다.  1. 꼭 Recoil 같은 상태 관리 라이브러리를 써야할까? 리액트에 내장 된 상태관리를 위한 훅인 useState ⇒ props를 이용해 부모 컴포넌트에서 자식 컴포넌트로 값을 전달해야하기 때문에 props drilling이 생길 수 있다.이를 개선하기 위해 만들어진 것이 ➰리액트의 Context API ⇒ Context의 값이 변경되면 이 값을 사용하는 모든 컴포넌트가 리렌더링 됨. 불필요한 리렌더링이 발생할 수 있다. 부모 컴포넌트에서 자식 컴포넌트로 props를..

📌 Context API전역 상태 관리를 간편하게 할 수 있도록 도와주는 리액트의 내장 APIcontext를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터 제공 가능Context: 전역 상태를 저장하고 제공.Provider: 상태를 제공하는 컴포넌트.Consumer: 상태를 소비하고 사용할 컴포넌트. 1. Context, 언제 쓸까?전역 상태 관리: 컴포넌트안에서 전역적으로 공유해야 할 데이터가 있을 때 (e.g. 테마 설정, 언어 설정, 로그인 데이터, 사용자 인증 정보 등..) props drilling 방지: 컴포넌트 뎁스가 많으면 props를 여러 레벨로 전달해야한다.(= props drilling) 이 때 context api를 사용하면 중간 컴포넌트를 거치..

📌 useNavigate()리액트 라우터의 훅 중 하나로, useNavigate를 사용하면 특정 이벤트가 발생 했을 때 다른 경로로 쉽게 이동할 수 있다.URL 변경을 처리하는 프로세스를 간소화 할 수 있다. useNavigate 사용방법import { useNavigate } from "react-router-dom"const 컴포넌트 명 = ()=>{ const navigate = useNavigate() const move = ()=>{ navigate("/이동할 라우터 명") } return { 이동 }} 1. react-router-dom에서 useNative를 import 해온다2. useNati..

📌 중첩 라우팅 (Nested Routing)중첩 라우팅은 리액트 같은 SPA(Single Page Application)에서 여러 페이지 또는 뷰를 구성할 때 사용.복잡한 UI 구조를 효과적으로 관리할 수 있게 해주고, URL 구조에 맞게 컴포넌트를 계층적으로 배치할 수 있게 해준다.공통된 레이아웃이나 기능을 가진 여러 페이지를 쉽게 구성할 수 있다. (코드의 재사용성 증가)  사실 이렇게 설명으로만 들으면 사실 이해하기 어렵고 와닿지 않는다.중첩 라우팅을 하는 이유와 필요성을 쉽게 알기 위해 예제를 통해  중첩 라우팅 하지 않은 경우를 먼저 살펴보자!     만약 메뉴바를 만들고 각 메뉴를 클릭 했을 때, 메뉴바는 고정되어 있고 클릭 한 페이지의 내용만 보여주고 싶다면?// Menu.tsximpor..

📌 children 이란? children은 props의 일종으로, 컴포넌트 사이에 위치한 모든 JSX 요소를 포함한다. 여러 개의 요소를 받을 수 있다. 컴포넌트에 유연성을 제공하며, 내부에 다른 요소나 텍스트를 포함할 수 있게 해준다.  ⇒  children으로 모든 값을 받아서 표시할 수 있음. 일일이 props에 정의해서 사용하지 않아도 됨! // App.tsximport "./App.css";import UserList from "./components/UserList/UserList";import UserProfile from "./components/UserProfile/UserProfile";import { CommunityUser } from "./models/Communityuser..