roqkf

✨ Intro 다음과 같은 구조를 가진 React 애플리케이션이 있다고 가정했을 때, 컴포넌트 3, 컴포넌트 6에만 사용되는 상태가 있다. 이 상태는 어느 컴퓨넌트에 위치시켜야 할까? 답은 React 데이터 흐름은 단방향으로 흐르기 때문에 최상위 컴포넌트에 위치시키는 것이 적절하다. 하지만 이런 상태 배치는 다음과 같은 이유로 비효율적이라고 느껴질 수 있다. 컴포넌트 1, 2는 해당 상태를 사용하지 않는데 상태 데이터를 가짐 상태 끌어올리기, Props 내려주기를 여러 번 거침 애플리케이션의 복잡성에 따라 데이터 흐름도 복잡해짐 컴포넌트 구조 변동 시, 현재 데이터 흐름을 바꿔야 할 수도 있음 [React 사용했을 때의 데이터 흐름] [Redux 사용했을 때의 데이터 흐름] 두 데이터 흐름을 비교해 보면..

❤️‍🔥 Props Drilling 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트를 거치면서 데이터를 전달하는 현상 아래의 그림처럼 컴포넌트 A의 state를 컴포넌트 D로 전달하기 위해서 사이에 있는 컴포넌트 B, C를 거쳐야 한다. 🤔 Props Drilling의 문제점 Props로 전달하는 횟수가 5회 이내로 많지 않다면 Props Drilling은 큰 문제가 되지 않지만 그 이상으로 많아지거나 규모와 구조가 복잡해 지면서 Props의 전달 과정이 늘어난다면 다음과 같은 문제가 발생한다. 코드의 가독성 ↓ 코드의 유지보수의 어려움 state 변경 시, Props 전달 과정에서 불필요하게 관여된 컴포넌트..

📘 [TODO] 쇼핑몰 애플리케이션의 주요 기능 구현 [장바구니 담기] 버튼을 이용해 장바구니에 해당 상품이 추가 장바구니 내 [삭제] 버튼을 이용해 장바구니의 상품이 제거 장바구니 내에서 각 아이템 개수를 변경 장바구니의 상품 개수의 변동이 생길 때마다, 상단 내비게이션 바에 상품 개수가 업데이트 ✨ Intro | 컴포넌트 구조와 데이터 흐름 파악을 위한 그림 그리기 🖥️ App.js import React, { useState } from 'react'; import Nav from './components/Nav'; import ItemListContainer from './pages/ItemListContainer'; import './App.css'; import './variables.css'..

❤️‍🔥 상태관리 상태: UI에 동적으로 표현될 데이터, 변하는 데이터 Side Effect: 함수 입력 외에도 함수의 결과에 영향을 미치는 요인 ex) 네트워크 요청, API 호출 Side Effect를 최대한 배제하여 컴포넌트를 만들자! 💥상태의 두 가지 구분 로컬 | 특정 컴포넌트 안에서만 관리되는 상태 컴포넌트 내에서만 영향을 미치는 상태 다른 컴포넌트와 데이터를 공유하지 않는 from 데이터는 대부분 로컬 상태이다. ex) input box, select box 등 전역 | 프로덕트 전체 or 여러 컴포넌트에서 관리되는 상태 다른 컴포넌트와 상태를 공유하고 영향을 미치는 상태 데이터 로딩 여부 상태와 같을 때 앱 전반에 영향을 미치므로 전역 상태라 볼 수 있음 서로 다른 컴포넌트가 동일한 상태를..

Side Effect 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기한다. React에서는 컴포넌트 내에서 fetch를 사용해 API를 가지고 오거나 이벤트를 활용해 DOM을 직접 조작할 때 Side Effect가 발생했다고 말한다. 전역 변수 foo를 bar라는 함수가 수정하는 예제 let foo = 'hello'; function bar() { foo = 'world'; } bar(); // bar는 Side Effect를 발생시킵니다! 위와 같은 예제에서는 bar라는 함수 내에서 함수 외부에 있는 foo라는 전역변수에 영향을 끼치고 있기 때문에 Side Effect가 있다고 할 수 있다. Pure Function 순수 함수란, 오직 함수의 ..

Intro... React의 개발 방식 중 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 것이다. 프로토타입에서 컴포넌트를 찾아내어 각 컴포넌트를 만들어 가면서 페이지를 만들어 나간다. 즉 상향식으로 프로토타입 앱을 만든다는 것이다. 페이지를 만들기 전에 컴포넌트를 먼저 만들고 이를 조립하며 페이지를 완성시켜 나간다는 것의 장점은 테스트가 쉬우면서도 확장성이 좋다. 그래서 기획자, PM, UX 디자이너로부터 앱 디자인(프로토타입)을 전달받고 나면 컴포넌트 계층 구조로 나누는 것을 가장 먼저 해야 한다. React 데이터 흐름 그림과 같은 형태의 컴포넌트를 디자인한다고 가정해 보자. 그림과 같이 컴포넌트를 분류한 이유는 하나의 컴포넌트는 한 가지 일을 한다는 단일 책임 원칙에 따른 것이다..