개발 공부 일지/React42 [포트폴리오] react-query 캐싱이 안됨 -> re-render시 초기화 문제 나의 포트폴리오 웹에서 그동안 해온 프로젝트 배포 url 의 og image를 가져오는 기능을 구현해두었다. 프로젝트 배포 주소를 url로 받아서 open graph 이미지를 받아오는 비동기 함수인데,목록과 세부 페이지(모달)에서 반복되는 로직이기에 커스텀 훅(▼)으로 분리했다. import { useEffect, useState } from "react";const useGetOpenGraphImage = (url: string) => { const [imageUrl, setImageUrl] = useState(); const [loading, setLoading] = useState(false); const getOpenGraphImage = async () => { try { .. 2025. 2. 22. MVC 패턴과 Flux 패턴 이해하기 Zustand와 Jotai은 같은 개발자에 의해 만들어진 상태관리 라이브러리인데 왜 다른 방식을 채택했을까? 라는 궁금증이 생겨 이에 대해 알아보기 위한 배경 지식을 먼저 정리하고자 한다. 도서관리 어플리케이션을 예시로 각 패턴을 이해해보려고 한다 리덕스가 등장하기 이전 프론트엔드에서 데이터의 흐름을 관리하는 방식은 MVC 패턴이었다. [MVC 패턴]🎁Model은 데이터와 관련된 모든 것을 관리한다. (상태 저장 및 관리) 📊View는 사용자에게 데이터를 보여주는 역할을 한다 🕹️Controller는 모델과 뷰 사이의 중재자 역할사용자 입력을 받아 모델을 업데이트하고 & 모델의 변경 사항을 뷰에 반영한다. 데이터 흐름1. 사용자가 웹 페이지 (뷰)에서 새 책 추가 버튼을 클릭하고 책 정보를 입력2.. 2025. 1. 24. 전역 모달이 필요한 이유 세번째 프로젝트 Linkbrary 에서 내가 구현한 부분은 zustand를 이용한 전역 모달 세번째 프로젝트를 마치고지난 포스팅 두번째 프로젝트 회고 말미에 언급한 세미 프로젝트 회고이다.이제 진짜 내일부터 최종 프로젝트 기간이라 후딱 회고 작성하려고 한다. 코드잇 부트캠프에서 진행하는 정식 프로memoryelim.tistory.com 💣모달을 왜 전역으로 구현했냐는 질문에 💥 어.? 당연히 전역으로 하는거 아니었나?! 음.. 모달이 여러개라서? 여러 모달이 여러 페이지에서 띄워져서? 첫번째 프로젝트를 제외하고 나머지 프로젝트에서 모달을 전역으로 구현했기에 당연스럽게 여기고 있었다. 개발하는데 있어서 배운건 '당연히' 라는게 없다는 것이다.뭐든 이유가 있다. 그런데도 나는 또 아무 생각 없.. 2025. 1. 15. 제어 컴포넌트와 비제어 컴포넌트 (Controlled vs. Uncontrolled) React Hook Form(리액트 훅 폼)은 비제어 컴포넌트 기반으로 성능 최적화를 위한 라이브러리 이다. 그런데 비제어 컴포넌트가 왜 좋은지? 제어 컴포넌트는 무엇인지? 제대로 모르고 있어서 정리해보려고 한다.📖 간략히 개념 정리제어 컴포넌트 : 부모가 자식의 상태를 관리 자식은 부모로부터 prop으로 상태를 전달 받음 비제어 컴포넌트 : 자신이 자신의 상태를 관리. 즉 부모는 자식의 상태를 알지 못함https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components “controlled” and “uncontrolled” aren’t strict technical terms—each compo.. 2025. 1. 10. 리액트 - useReducer useReducer를 이용하면, 기존에 컴포넌트 내에서 하던 상태 관리를 컴포넌트 외부에서 정의할 수 있다. 따라서 코드상에서 컴포넌트가 반환하는 JSX요소를 쉽게 파악할 수 있다. 상태(state) 관리 로직이 복잡하거나, 여러 개의 관련된 상태 업데이트가 필요한 경우, 상태 관리와 로직을 더 명확하고 체계적으로 처리하기 위함 컴포넌트 내부에서는 useReducer를 사용해서 관리할 상태와, dispatch를 선언하고, dispatch가 호출될때 = 상태 변경할 것을 요청실제로 상태 변경을 할 함수를 정의한다. (여기서는 reducer) 리턴문에서 각 요소의 이벤트 핸들러를 할당해주고, 각 핸들러가 reducer함수에게 전달할 액션객체를 dispatch 함수 안에서 정의한다 컴포넌트 외부에서 re.. 2024. 9. 5. 리액트 - 모달 구현 방법 참조 한 서비스에서 모달 개수가 많아졌을때 관리하는 방법 내가 적용한 방식모달을 보여주기위한 state && 조건부 렌더링 버튼 onClick handler 안에서 함수(open() 등 .. )로 관리하면 더 편하다파라미터로 id, type, options 를 받는다 class형 모달을 선언하고 내부에서 메서드로 함수(open, close)를 정의 -> 모달 저장소에 정의한 메소드를 호출 모달에 대한 저장소가 되는 클래스를 정의한다.배열 형태의 DB 역할 (repository)push, pop 메소드를 갖는다 id, type, options 를 받아서 요소를 push입력받은 id 를 받아서 요소를 popclear, getLast, getRefs(깊은 복사)등 return 모든 모달을 렌더>Modal.. 2024. 9. 5. 이전 1 2 3 4 ··· 7 다음
