Carrot

React 4

[React] React의 불변성

목차 1. 불변성이란? 2. React의 state가 불변성을 가져야 하는 이유 3. 어떻게 하면 불변성을 가질 수 있을까? 4. state를 직접 변경하지 않고 setState를 써야하는 이유 1. 불변성이란? : 값, 상태를 변경할 수 없는 것 ✅ 자바스크립트의 불변성 메모리 영역의 값이 변하지 않는다 = 불변성 (1) 원시타입 let a = "data1"; a = "data2"; 위 코드에서 변수 a의 값을 변경할 때, 실제로 “data1”이 있는 기존 콜스택 값은 그대로 유지된 채, “data2”를 새로운 콜스택 영역에 할당하고 그 주소로 변수 a가 바라보게 한다. 즉 메모리 영역에서 기존의 데이터가 대체되는 것이 아니라 새로운 영역을 할당하는 것으로, 원시타입은 메모리 영역의 값이 변경되지 않아..

Front-end/React 2023.11.12

[Tanstack Query] API 함수를 조건부 호출하기

React Query(지금은 Tanstack Query가 공식 명칭이지만 React Query로 부르는게 익숙해졌다💦)로 조건부 query를 할 수 있는 방법을 알아본다. 우리 프로젝트에서 사용하는 react query를 이용한 API 훅 프로젝트에서 사용한 useQuery문의 예시이다. 요약하자면 axios의 get 함수를 정의한 getCheckNotification 함수로 useQuery문을 작성한 뒤, 훅으로 빼뒀다. // api/notification.ts import { useQuery } from "@tanstack/react-query"; // api 함수 const getCheckNotification = async () => { const response = await axios.get(..

Front-end/React 2023.10.31

[Web] Flux 디자인 패턴이란? (feat. MVC 아키텍처 패턴)

목차 1. Flux 디자인 패턴의 등장 (feat. MVC 아키텍처 디자인 패턴) 2. Flux 패턴의 개념 3. Flux 패턴의 장단점 1. Flux 디자인 패턴의 등장 (feat. MVC 아키텍처 패턴) 페이스북 컨퍼런스에서 발표된 아키텍처로, client side 웹 애플리케이션(백엔드의 server side 웹 애플리케이션의 디자인 패턴과 상반되는 개념으로 표현)에 사용되는 디자인 패턴 기존의 MVC(Model, View, Controller)는 애플리케이션 규모가 커질수록 Model(데이터를 저장) ↔ view(사용자에게 보여지는 곳)의 데이터 양방향 흐름 때문에 복잡한 데이터 흐름을 갖게 된다. 결국엔 데이터 변화 예측이 힘들어진다는 단점이 있다. 따라서 페이스북은 이 문제의 해결 방안으로 단..

CS/Web 2023.10.12

[React] 드롭다운 헤더 클릭 시 popover 사라지게 만들기 (feat. useOutsideClick)

작업 내용 이번 next.js 프로젝트에서 "앨범 카드"라는 컴포넌트를 만드는 역할을 맡았다. 간략히 설명하자면, 위처럼 앨범 카드 컴포넌트가 있고, kebab 아이콘 버튼을 눌렀을 때, 카드 내용을 수정하기 / 삭제하기 버튼을 누를 수 있는 Popover를 띄우는 기능을 만들었다. 이 기능을 만들면서 나는 다음과 같은 로직으로 제작했다. Popover 노출 여부를 나타내는 isPopoverOpen 상태를 관리한다. kebab 버튼을 클릭하면 isPopoverOpen이 true로 설정되어 Popover 컴포넌트를 렌더링한다. 다시 kebab 버튼을 클릭하면 false가 되어 popover가 사라진다. useOutsideClick 커스텀 훅을 사용하여 Popover 컴포넌트의 외부를 클릭해도 Popover..

Front-end/React 2023.08.12