REACT (187) 썸네일형 리스트형 Refactoring React(리팩토링 리액트) : Separate API Layer(API 계층 분리) 대부분의 리액트 프로젝트엔 비동기 데이터 가져오기를 위한 라이브러리가 필요합니다. 해당 API 레이어를 별도의 계층으로 관리하는 방법을 알아봅시다. 해당 게시물은 React Query에 대한 지식을 기본 전제로 합니다. API 레이어를 분리해야 하는 이유 UI 코드와 데이터 레이어 코드의 결합도가 높아집니다. 같은 데이터를 가져오는 코드가 중복되어 분산 존재하게 됩니다. 컴포넌트와 API 레이어 관심사 혼재는 코드 읽기를 어렵게 합니다. 최종 분리 결과 전역 api 폴더 공통 설정을 위한 전역 공유 Axios 인스턴스와 리액트 쿼리 클라이언트 요청을 보내기 위한 fetch 함수 feature/{feature-name}/api 내부적으로 react-query를 사용하지만 구현 세부하항을 캡슐화하는 커스텀 .. Refactoring React(리팩토링 리액트) : Mutation(서버 데이터 변경) 리액트 프로젝트 서버 데이터 변경의 모범 사례를 탐구해 볼까요? 서버 상태 변경 시 고려해야 할 것들 서버 상태와 클라이언트 상태의 동기화와 더 나은 사용자 경험을 위해선 다음과 같은 것들이 필요합니다. 요청 취소 캐시 무효화 낙관적 업데이트 간단한 예시 : useEffect와 Click handler 흔한 구현은 아래와 같습니다. useEffect는 컴포넌트가 리렌더링 될 때마다 적절하게 호출되어 데이터를 페치해 옵니다. 버튼 클릭 시 patch를 통해 해당 데잍커를 업데이트 합니다. useEffect(() => { axios .get("https://prolog-api.profy.dev/v2/issue?status=open", requestOptions) .then(({ data }) => setIs.. Refactoring React(리팩토링 리액트) : Query(서버 데이터 조회) 리액트 프로젝트 서버 데이터 조회 구현의 모범 사례를 탐구해 볼까요? 간단한 서버 조회 구현 with useEffect 가장 흔히 볼 수 있는 구현은 다음과 같습니다. useEffect를 사용하여 렌더링 시마다 효과를 유발합니다. import axios from "axios"; export function IssueList() { useEffect(() => { axios .get("https://prolog-api.profy.dev/issue") .then((response) => console.log(response)); // empty dependency array means this runs only once (at least in production) }, []); ... } 해당 방법의 문제점.. Refactoring React(리팩토링 리액트) : Folder Structure(폴더 구조) 리액트 프로젝트를 위한 최적의 폴더 구조는 뭘까요? 모범 사례 탐구 커뮤니티에서 유명한 추천 사례들은 다음 게시물들에서 잘 소개되고 있습니다. https://www.joshwcomeau.com/react/file-structure/ Delightful React File/Directory Structure How should we structure components and other files in our React apps? I've iterated my way to a solution I'm really happy with. In this blog post, I'll share how it works, what the tradeoffs are, and how I mitigate them. www.j.. Refactoring React(리팩토링 리액트) : 자료구조 적절한 자료구조를 사용하면 리액트 코드를 깔끔하게 짤 수 있습니다. 적절한 자료구조를 활용하여 로직을 리팩토링하여 애플리케이션의 확장성을 향상시켜 봅시다. 해당 게시물의 목표는 다음과 같습니다. 코드를 더 쉽게 읽고 유지보수 쉽게 하기 버그에 덜 취약한 코드 만들기 코드의 복잡성 제거하기 애플리케이션 성능 향상시키기 Map : 해시테이블 (해시) 맵, 해시 테이블 또는 딕셔너리는 기본적으로 키-값 저장소입니다. JavaScript에서 자주 만날 수 있는 다음과 같은 객체입니다. { key1: "value 1", key2: "value 2", key3: "value 3", } 네이티브 Map 객체도 존재합니다. 좀 더 성능에 최적화되어 있으므로, 키 기반 검색 시 좋습니다. 아래와 같이 값들만 배열로 만들.. Refactoring React(리팩토링 리액트) : useState 복잡한 상태는 유지보수를 어렵게 하는 원인입니다. 상태를 리팩토링하여 애플리케이션의 확장성을 향상시켜 봅니다. 해당 게시물의 목표는 다음과 같습니다. 코드를 더 쉽게 읽고 유지보수 쉽게 하기 버그에 덜 취약한 코드 만들기 코드의 복잡성 제거하기 애플리케이션 성능 향상시키기 1. 너무 많은 상태(Redundant State) fullName은 firstName과 lastName으로부터 파생됩니다. const [firstName, setFirstName] = useState(""); const [lastName, setLastName] = useState(""); const [fullName, setFullName] = useState(""); 해당 파생 상태는 의존성을 개발자가 직접 추적하여 업데이트를 같.. styled-components와 flexbox를 이용한 2D 레이아웃 디자인 styled-components의 기본 빌딩 블록인 Box 컴포넌트를 잘 활용하는 방법을 알아봅니다. Flexbox 플렉스박스는 하나의 레이아웃 모드입니다. 플렉스 레이아웃의 기본 아이디어는 사용 가능한 공간을 가장 잘 채울 수 있도록 플렉스 아이템의 너비/높이(및 순서)를 변경할 수 있는 기능을 컨테이너에 제공하는 것입니다 플렉스 컨테이너는 플렉스 아이템을을 확장하여 사용 가능한 여유 공간을 채우거나 항목을 축소하여 오버플로를 방지합니다. 기억해야할 것은, 플렉스 컨테이너는 일반적인 플로우 레이아웃의 인라인, 블록 모드에 따라 렌더링 되지만, 컨테이너 내부에서는 플로우 레이아웃과 다른 배치 알고리즘을 사용한다는 것입니다. 이는 블록 내에 아이템을 채우고 남은 공간을 어떻게 적합하게 채울지에 관한 내용으.. React의 cloneElement API, 기존 엘리먼트를 기반으로 새로운 엘리먼트 생성하는 방법 알아보기 React Beta 공식문서를 통해 학습한 cloneElement API에 대해 정리합니다. cloneElement cloneElement를 사용하면 다른 엘리먼트를 기반으로 새로운 React 엘리먼트를 만들 수 있습니다. const clonedElement = cloneElement(element, props, ...children) 특정 엘리먼트를 기반으로, 전혀 다른 prop과 children을 이용해 새로운 엘리먼트를 만듭니다. import { cloneElement } from 'react'; // ... const clonedElement = cloneElement( Hello , { isHighlighted: true }, 'Goodbye' ); console.log(clonedElement.. 이전 1 2 3 4 5 ··· 24 다음
