2025/05/23 4

리액트 공부하기 - 전역 상태 관리 라이브러리 Zustand

context API는 익혔으니 뭔가 실무적으로 사용할 만 한 전역 상태관리를 공부 해보려고 하는데리덕스.. 는 쳐다만 봐도 동기를 잃어서,,, 조교님이 추천해주시기도 하고, 요즘 핫하다는 zustand 공부하기 진짜 공부해보니까 정~말 간단하고 좋으네욥. 우선 공식 문서 읽어보기 ! GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub.github.com똑똑한 곰돌이.Zustand는 정말 배우기 쉬운 ..

리액트 공부하기 - context API 복습. custom hook을 쓰는 이유

간단하게 전역으로 상태를 관리할 수 있는간단하고도 쉬운 context API 다시 공부하기 ! 개념은 이해가 됐었는데 왜 사용하는 부분(useContext)를 custom hook으로 만들어 만드는지 어려웠는데 해당 게시글에서 자세히 다뤄봤다 ✨ 해당 게시글은 context API 개념 리액트 공부하기 - 전역 상태 관리 context API후.. 여행 후, 현생 복귀란 쉽지 않네요하지만,, 다시 제 자리에서 집중 ! 상태관리에서 createContext, Provider, useContext 이런 것들은 React에서 컴포넌트끼리 데이터를 공유하기 위해 사용하는 도구🐰creamymood.tistory.com 핵심 개념 정리1. createContext()컨텍스트를 생성하는 함수.보통 null이나 {..

Studying/React 2025.05.23

mini project - 보완하기 : 로딩관련 로직 넣어보기 /스피너

지금 내 영화 페이지에서, 로딩 관련해서 구현해보고 싶은데api로 데이터 받아올 때, 살짝 늦을 때를 대비해서. 어떤 로직으로 해야할까 ? 고민해봤다. 또 컴포넌트 분리는 어떻게 해야할지도..짜잔~생각한 구현 로직은 크게 다음과 같다. 1. 로딩 공통 컴포넌트 따로 만든다.2. api 호출 하는 부분에, 로딩 상태 만들어서, 호출 함수 전에 우선 로딩중 (데이터 받는중~) 이 상태의 초기값을 true로써 상태 만들어준다.3. jsx return 부분에서도 조건부 렌더링으로 로딩중이라면 > 로딩중 보여주고, 데이터 다 받아왔다면 > 영화 보여주는 걸 한다.구현 단계 중 1. 로딩 공통 컴포넌트 따로 만든다. Loading.jsx (폴더는 컴포넌트 폴더)import React from "react";con..

리액트 공부하기 - React Router 리액트 라우터 심화공부

모야.. 실무에서 쓰려니까 뭐 더 많이 알아야 하잖아?프로젝트에서 페이지는 아주 많아질테니.. 라우터 추가 공부 필요하겠잖아 ? 라우터의 기초 내용은 아래 링크에서 볼 수 있다. 리액트 공부하기 - React Router 리액트 라우터1. 리액트 라우터란?2. 리액트 라우터 사용하는 법3. 궁금증 두가지. (왜 설치를 따로해야하는가? 주소를 이동하는건데 새로고침이 안된다고 ?!)4. 리액트 라우터 주요 컴포넌트5. 리액트 라우터 주creamymood.tistory.com 1. useNavigate() 이런 훅을 쓸 때, 바로 쓰진 못하고 변수에 할당에서 쓰더라.이유는 ? ↓더보기useNavigate() 같은 훅을 바로 호출해서 못 쓰고 변수에 할당해서 쓰는 이유는?const navigate = useN..

Studying/React 2025.05.23