FE/React 썸네일형 리스트형 FE/React React.lazy()와 React.Suspense * React.lazy() 메서드의 쓰임새와 작성 방법 * suspense의 쓰임새와 작성 방법 React는 현재도 계속해서 업데이트가 되고 있는 오픈소스 라이브러리이다. React가 버전 18로 업데이트가 되면서 많은 부분이 바뀌었는데, 가장 빠르게 알아볼 수 있는 변화는 콘솔 창에 이전에 보이지 않던 경고문이 보인다는 점이다. 해당 경고문은 이제 React 18 버전은 더 이상 ReactDOM.render를 지원하지 않는다는 내용이다. 물론 버전이 18보다 낮은 앱에서는 해당 경고문은 보이지 않는다. 그러나 계속해서 업데이트가 되고 있는 라이브러리이니만큼 해당 이슈는 알아둬야 할 것이다. React 18이전의 index.js const rootElement = document.getElementByI.. FE/React 코드 재사용을 도와주는 Custom Hooks Custom Hook을 쓰는 이유 Custom Hook은 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다. 여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용 한다. 이를 이용하면 상태관리 로직의 재활용이 가능하고 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있으며 함수형으로 작성하기 때문에 보다 명료하다는 장점이 있다. (e.g. useSomething) 예를 들어 이런 컴포넌트가 있다고 보자. (React 공식 문서에 있는 컴포넌트) //FriendStatus : 친구가 online인지 offline인지 return하는 컴포넌트 fun.. FE/React React의 렌더링 최적화를 도와주는 useCallback useMemo와 useCallback의 차이 React Hook은 렌더링 최적화를 위한 Hook이 존재한다. useCallback과 useMemo가 바로 그 역할을 하는 Hook이다. useCallback이란? useCallback 또한 useMemo와 마찬가지로 메모이제이션 기법을 이용한 Hook이다. useMemo는 값의 재사용을 위해 사용하는 Hook이라면, useCallback은 함수의 재사용을 위해 사용하는 Hook이다. 아래의 Calculator 컴포넌트 내에는 add라는 함수가 선언이 되어 있는 상태 이다. 이 add 함수는 props로 넘어온 x와 y 값을 더해 태그에 값을 출력한다. 이 함수는 해당 컴포넌트가 렌더링 될 때마다 새롭게 만들어진다. function Calculator({x,.. FE/React React의 렌더링 최적화를 도와주는 useMemo 컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링을 하는 구조로 이루어져 있다. 그러나 너무 잦은 리렌더링은 앱에 좋지 않은 성능을 끼친다. React Hook은 함수 컴포넌트가 상태를 조작하고 및 최적화 기능을 사용할 수 있게끔 하는 메서드이다. 그중 렌더링 최적화를 위한 Hook도 존재한다. useCallback과 useMemo가 바로 그 역할을 하는 Hook이다. useMemo란? useMemo은 특정 값(value)을 재사용하고자 할 때 사용하는 Hook이다. 다시 말해, 메모이제이션(Memoization) 개념을 이용한 Hook이다. 예를 들어 아래의 컴포넌트는 props로 넘어온 value값을 calculate라는 함수에 인자로 넘겨서 result 값을 구한 .. FE/React React의 Hook의 개념과 사용 규칙 * 함수 컴포넌트와 클래스 컴포넌트의 차이 * 함수 컴포넌트에서 Hook을 사용하는 이유 * Hook의 개념 및 사용 규칙 React Hooks는 React 16.8 버전부터 추가된 기능으로, React에는 다양한 Hook이 존재하고 있다. Hook이란, 클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서 더 직관적인 함수를 이용하여 작업할 수 있게 만든 기능이다. 뛰어난 재사용성과 직관성을 갖는 함수형 컴포넌트와 훅은 사용률이 매우 높은 편 이다. Class Component & Function Component Hook은 함수 컴포넌트에서 사용하는 메서드이다. 함수 컴포넌트 이전에는 클래스(class) 컴포넌트가 있었다. Class Component 아래.. FE/React React Diffing Algorithm - 상태변화를 감지할 수 있도록 하는 React의 비교 알고리즘 React의 가상 DOM 비교 알고리즘 React가 기존 가상 DOM과 변경된 새로운 가상 DOM을 비교할 때, React 입장에서는 변경된 새로운 가상 DOM 트리에 부합하도록 기존의 UI를 효율적으로 갱신하는 방법을 알아낼 필요가 있었다. 즉 하나의 트리를 다른 트리로 변형을 시키는 가장 작은 조작 방식을 알아내야만 했다. 알아낸 조작 방식 알고리즘은 O(n^3)의 복잡도를 가지고 있었다. O(n^3) 복잡도는 입력 크기에 대해 세제곱 비례로 증가하는 복잡도를 의미한다. 알고리즘의 성능을 분석하기 위해 복잡도를 계산하는 것은 중요한 과정이다. 이를 통해 알고리즘의 효율성을 평가하고, 큰 입력에 대해 얼마나 잘 처리할 수 있는지 예측할 수 있다. 일반적으로 좋은 알고리즘은 작은 복잡도를 가지며, 큰 입.. FE/React [React] Virtual DOM * Virtual DOM이 나오게 된 배경 * Virtual DOM의 개념 * React가 DOM 트리를 탐색하는 방법 * DOM 엘리먼트의 타입이 같을 때와 다를 때의 React 동작 방식 Virtual DOM이 나오게 된 배경 Virtual DOM은 Real DOM의 가벼운 사본과 같다. Real DOM은 Browser에서 생성되는 Document Object Model을 가리키는 용어이며, Virtual DOM과 구분하기 위해 이 용어를 사용한다. Real DOM (DOM) DOM은 Document Object Model의 약자로, 뜻을 그대로 풀자면 문서 객체 모델을 의미한다. 여기서 문서 객체란 브라우저가 JavaScript와 같은 스크립팅 언어가 , , 와 같은 태그들에 접근하고 조작할 수 있.. FE/React [JS] useEffect 용례 * 레퍼런스 - 리액트 공식문서 : useEffect - React Hooks에 취한다 - 유튜브 미리 알고 있어야 하는 개념 useEffect(setup, [dependencies]) 컴포넌트의 최상위 수준에서 useEffect를 호출하여 Effect를 선언한다. useEffect는 undefined 값을 반환한다. Mount & Unmount useEffect의 setup & cleanup useEffect가 작동하는 과정은 다음과 같다. (예: 채팅 외부시스템을 가져와서 웹 화면에 구현) 컴포넌트가 마운팅되면, (페이지에 추가) setup 코드가 작동한다. (예: '과일' 주제의 채팅창 열기) 종속성 배열 인자의 값이 변할 때마다 컴포넌트는 리렌더링 된다. (예: 종속성 배열 인자는 채팅창의 주제(.. FE/React 쇼핑몰 앱에서 Redux를 이용한 상태 관리 (2) 본격적으로 본론에 들어가기 전에, npm trends를 살펴보면 상태 관리 라이브러리 중에서도 redux(하늘색)가 가장 많이 쓰이고 있는 것을 알 수 있다. 따라서, 비교적 간편한 Redux toolkit을 쓰기 전에, 기존 Redux 코드를 작성해보며 데이터 흐름을 숙지하고, 개념을 확실히 이해하고 넘어가야 할 필요가 있다. 장바구니 추가, 삭제 등 기본적인 쇼핑몰 기능을 구현한 이전 포스팅 에서 더 나아가, 두 번째 포스팅에서는 해당 앱에서 구현한 또 다른 Reducer인 notificationReducer 등에 대해 다뤄보겠다. 결과 화면 장바구니에 없는 물건을 '장바구니 담기'를 눌렀을 때 -> "장바구니에 ~~이(가) 추가되었습니다." 메시지가 뜬다. 장바구니에 이미 있는 물건을 또 '장바구니.. FE/React 쇼핑몰 앱에서 Redux를 이용한 상태 관리 (1) * Redux의 설계(원리와 구조) 파악하기 - Action, Dispatch, Reducer, Store 작성하고 연결하여 사용하기 - Redux hooks(useSelector, useDispatch)를 사용해 Store 업데이트 하기 즉, React Hooks에서의 상태 변경 로직(이전 포스팅)이 Redux에서 어떻게 컴포넌트로부터 분리되는 지를 파악하는 것이 목적이다. React 애플리케이션을 개발할 때 Redux를 사용하면 React 컴포넌트 간의 복잡한 데이터 흐름을 따라갈 필요가 없어진다. 특히 컴포넌트가 많아지고 애플리케이션의 구조가 고도화될수록 Redux를 활용한 상태 관리는 빛을 발한다. 그동안에는 상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있는 경우가 많았다. .. FE/React Redux로 간단한 Count 기능 구현하기 Redux를 사용하기 위해서는 redux와 react-redux를 설치해야한다. 설치를 하고 나면, DEPENDENCIES redux, react-redux가 설치되어 있는 것을 확인할 수 있다. . . . "dependencies": { "@types/react": "^16.8 || ^17.0 || ^18.0", "@types/react-dom": "^16.8 || ^17.0 || ^18.0", "react": "^18.1.0", "react-dom": "^18.1.0", "react-native": ">=0.59", "react-redux": "^8.0.2", "redux": "^4" }, . . . index.js import React from 'react'; import { createRoot .. FE/React 상태 관리 라이브러리 Redux [프론트엔드 개발에서 상태 관리를 보다 더 효율적으로 할 수 있는 방법] * 컴포넌트와 상태를 분리하여 전역에서 상태 관리를 해줄 수 있게 해주는 상태 관리 라이브러리 Redux - 컴포넌트와 상태를 분리하는 패턴 - Redux에서 사용하는 Action, Dispatcher, Reducer 그리고 Store의 의미와 특징 - Redux의 3가지 원칙 React 애플리케이션을 개발할 때 Redux를 사용하면 React 컴포넌트 간의 복잡한 데이터 흐름을 따라갈 필요가 없어진다. 특히 컴포넌트가 많아지고 애플리케이션의 구조가 고도화될수록 Redux를 활용한 상태 관리는 빛을 발한다. 그동안에는 상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있는 경우가 많았다. 그러나 상태 변경 로직을 컴.. FE/React 쇼핑몰 애플리케이션에서 Hooks를 이용한 상태 관리 * React Hooks를 사용한 상태 관리 방법 - 컴포넌트끼리 상태 주고받기 결과 화면 파일(컴포넌트) 구조 루트 컴포넌트 : 내비게이션 바 "상품리스트" , "장바구니" 버튼 또는 : 물건 목록이 나열된 쇼핑몰 메인 화면 또는 장바구니 화면 (Pages) : map으로 렌더링 : 각 물건의 이름, 가격, '장바구니 담기' 버튼 등 : map으로 렌더링 : 각 물건의 이름, 가격, '장바구니에서 삭제하기' 버튼 등 : 주문 합계, 총 아이템 개수 등 상태 상품 목록 (items) : 개별 상품에 대한 정보를 담은 객체 (배열의 형태) { "id": 1, "name": "노른자 분리기", "img": "../images/egg.png", "price": 9900 } 장바구니 목록(cartItems) :.. FE/React Props Drilling이란? Props Drilling이란? [Props Drilling] 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상이다. 위 그림처럼 컴포넌트 A의 state를 컴포넌트 D로 전달하기 위해선 사이에 있는 컴포넌트 B, C를 거쳐야 한다. Props Drilling의 문제점 Props의 전달 횟수가 5회 이내로 많지 않다면 Props Drilling 은 큰 문제가 되지 않는다. 하지만 규모가 커지고 구조가 복잡해지면서 Props의 전달 과정이 늘어난다면 아래와 같은 문제가 발생한다. 코드의 가독성이 매우 나빠지게 된다. 데이터의 출처를 쉽게 파악할 수 없어서 코드의 유지보수 또한.. FE/React [React] 전역 상태의 필요성 * (프론트엔드에서의) 상태 관리의 개념과 필요성 * 로컬 상태와 전역 상태의 차이점 * 전역 상태의 필요성 * 상태 관리 라이브러리의 필요성 상태 관리 React는 상태 관리를 위한 라이브러리가 아니다. 그러나 상태 관리의 주요 원칙을 배우고 이를 따라간다면, 컴포넌트 간 서로 느슨하게 결합된(loose coupled), 구조적으로 아름다운 코드를 작성할 수 있다. 상태는 변하는 데이터이다. 특별히 UI, 프론트엔드 개발에서는 "동적으로 표현되는 데이터"이다. 여기에 쇼핑몰에서 흔하게 볼 수 있는 장바구니 화면이 있습니다. 여기에는 다양한 상태가 존재한다. "장바구니에 담기"와 같은 버튼을 눌러, 해당 물품을 장바구니에 추가할 수 있다. 동적인 데이터이므로 이것은 상태이다. 상단에 [일반구매/정기배송.. FE/React Styled Components로 ClickToEdit 만들기 * React, Styled-Component, Storybook을 활용한 UI 컴포넌트 개발 * Styled Components를 활용해 ClickToEdit 커스텀 컴포넌트를 구현 ClickToEdit Component 완성 예시 ClickToEdit 컴포넌트는 input 창을 클릭하면 수정이 가능하고, input 창이 아닌 다른 곳을 클릭하면 수정한 내용이 반영되는 기능을 가진 컴포넌트이다. 필요한 컴포넌트 InputView (div) : Tab 상위바에서 메뉴를 선택할 수 있는 구역 -- label : '이름', '나이' l -----------------> clickToEdit 컴포넌트 (부모) MyInput : 실제로 이름, 나이 값을 입력할 수 있는 박스 ------ InputBox ---.. FE/React Styled Components로 Tag 만들기 * React, Styled-Component, Storybook을 활용한 UI 컴포넌트 개발 * Styled Components를 활용해 Tag 커스텀 컴포넌트를 구현 Tag Component 완성 예시 Tag UI 컴포넌트는 레이블 지정을 통해 구성이나 분류에 도움이 되는 키워드 집합을 만들 때 사용된다. 필요한 컴포넌트 TagInput (div) : Tag 최상위 박스 ul id "tags" li className "tag" : 각각의 tag 박스 (나열) span className "tag-title" span className "tag-close-icon" input className "tag-input" : tag를 입력하여 추가하는 구역 state Tag 컴포넌트는 아래와 같은 state.. FE/React Styled Components로 Tab 만들기 * React, Styled-Component, Storybook을 활용한 UI 컴포넌트 개발 * Styled Components를 활용해 Tab 커스텀 컴포넌트를 구현 Tab Component 완성 예시 Tab UI 컴포넌트는 동일한 메뉴 라인에서 뷰를 전환할 때 사용한다. 필요한 컴포넌트 TabMenu (ul) : Tab 상위바에서 메뉴를 선택할 수 있는 구역 li ClassName "submenu focused" 또는 "submenu" (조건부 스타일링) Desc (div) : 선택한 Tab에 따라 넣어둔 텍스트를 담는 컴포넌트 state Tab 컴포넌트는 아래와 같은 state가 존재한다. currentTab state : 현재 tab의 index를 확인 토글 버튼 제어를 위한 핸들러 함수 s.. FE/React Styled Components로 Toggle 만들기 * React, Styled-Component, Storybook을 활용한 UI 컴포넌트 개발 * Styled Components를 활용해 Toggle 커스텀 컴포넌트를 구현 Toggle Component 완성 예시 Toggle UI 컴포넌트는 두 가지 상태만을 가지고 있는 스위치이다. 예를 들어, 한번 누르면 불이 들어오고 한번 누르면 불이 나가는 스위치를 Toggle Switch라고 할 수 있다. 필요한 컴포넌트 ToggleContainer (div) : Toggle을 구현하는데 필요한 컴포넌트를 감싸주는 컨테이너 div ClassName "toggle-container" : Toggle 바깥쪽 테두리 div ClassName "toggle-circle" : Toggle 안쪽 원 도형 (Toggle.. FE/React Styled Components로 Modal 만들기 * React, Styled-Component, Storybook을 활용한 UI 컴포넌트 개발 * Styled Components를 활용해 Modal 커스텀 컴포넌트를 구현 * Storybook을 사용 한 컴포넌트 관리 Modal Component 완성 예시 Modal UI 컴포넌트는 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌, 레이어를 까는 것을 말한다. 팝업 창: 현재 열려있는 브라우저 페이지에 또 다른 브라우저 페이지를 띄우는 것 (브라우저에서 이 창을 열고 닫기 제어가 가능) 모달 창: 현재 열려있는 브라우저 페이지에 레이어를 까는 것 (기존의 페이지와 부모-자식의 관계로 브라우저의 새 창 제어 옵션에 전혀 영향을 받지 않는다.) -> 팝업 창은 기존의 웹 페이지와 분리된 상태에서 작.. ⬆︎ 이전 1 2 다음
