form 형식의 페이지에 상태를 관리하는 것은 생각보다 귀찮은 작업이다. form에 개수에 맞춰서 state를 만들어주고, reset이 필요한 경우 state의 개수만큼 값을 초기화해야 한다. 불편한 점은 이것만이 아니다. 값의 검증, 또는 onChange 이벤트 시에도 상태의 수만큼 만들어줘야한다. 결국 유사한 코드가 반복되는 상황이 발생하는 것이다. 이것을 비교적 간단하게 처리해주는 커스텀 훅이 useForm이다. useForm? 앞서 말한 것처럼 쉽게 form을 관리할 수 있는 커스텀 훅이다. npm install react-hook-form 다음과 같은 방법으로 설치할 수 있다. 굳이 useForm을 사용해야 하는 이유를 먼저 설명하자면, 값의 변경, submit, 조회, 오류 검출 등의 기능을 ..

redux는 이미 많은 개발자가 사용하는 상태 관리 라이브러리이다. React의 상태 관리 라이브러리는 한 가지 고려할 점이 있는데, 일반적인 상태와 같이 새로고침 시 상태가 사라진다. 이것을 해결하기 위해서 local 또는 session 을 사용해서 reducer를 저장해서 새로고침 시 데이터를 redux에 가져올 수 있다. 다음과 같은 기능을 redux-persist가 제공해준다. 설치 yarn add @reduxjs/toolkit react-redux redux-persist reduxjs/toolkit과 react-redux는 redux를 사용하기 위해서 설치했고 redux-persist는 따로 설치해야 한다. 만약 타입스크립트를 사용한다면, yarn add -D @types/redux-persi..

Compound Component? Compound Components는 그룹 컴포넌트의 동작과 상태를 포함하고 있지만 렌더링 제어를 외부 사용자에게 제공하는 패턴이라고 할 수 있다. 여기서 핵심은 상태와 동작을 포함하고 있다는 것이다. HTML의 select 태그와 option 태그를 생각하면 이해하기 쉬울 것이다. Volvo Mercedes Audi select 태그는 option 태그와 함께 드롭다운 기능을 수행합니다. UI의 상태 관리를 select가 수행하고 option 은 select가 작동하는 방식에 대해서 구성이 됩니다. React의 Compound Component는 Prop Drilling을 방지하는 데 도움이 되는 선언적 UI 구성 요소를 구성하는데 사용된다. 이러한 Compound ..

// src/context/counter.js const CounterContext = React.createContext() function CounterProvider({step = 1, initialCount = 0, ...props}) { const [state, dispatch] = React.useReducer( (state, action) => { const change = action.step ?? step switch (action.type) { case 'increment': { return {...state, count: state.count + change} } case 'decrement': { return {...state, count: state.count - change} }..

앞서 Context API에 대한 글을 몇개 작성했다. 하지만 결국 Context API를 언제 사용해야 하는지 이런 부분에 대해서는 결론에 도달하지 못했다. Redux vs Context 는 정말 많은 이야기가 있지만 정작 어떤 경우에 어떤 것을 사용해야 좋을지 모른 상태에서 그저 " 사용 " 하고 있었다. 이번에는 근복적인 내용으로 Context와 Redux가 무엇이고 어떻게 사용해야하고, 어떻게 다른지, 언제 사용해야하는지 결론을 정리하려고 한다. React Context란? 일반적인 React 애플리케이션의 데이터는 위에서 아래로 Props를 통해서 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 경우 번거로울 수 있다. context를 사용하면 트리 단계마다 명시적으로 props를..

시스템 설계가 중요한 이유 우리가 프로젝트를 진행할 때 초기에는 기능을 구현하는 것이 수월하게 진행된다. 하지만 6개월이 지나고, 초기 계획 했던 기능 외에도 추가적인 많은 기능을 구현해야 합니다. 이때, 기존 프로젝트에 새로운 기능 또는 변경할 기능을 적용하는 것이 점점 더 어려워집니다. 그리고 어느 시점에서는 구현에 시간이 너무 오래 걸려서 일부 새로운 기능과 변경 사항은 거부하기 시작했다. 이처럼 최초에 설계를 잘해서 구성 요소를 쉽게 변경할 수 있도록 하지 않으면 점차 유지보수에는 어려움이 따라오게 되어있다. 독립 구성 요소 A 와 B가 서로 독립 ( Orthogonal )이면 A를 변경해도 B는 변경되지 않는다. 이는 반대의 경우에도 마찬가지로 이것은 독립성의 개념이다. 무선 장치에서 볼륨과 방..

React 18 버전이 정식 릴리스가 되면서 추가된 Suspense에 대해서 알아보자 Suspense? Suspense는 React에서 컴포넌트의 렌더링을 특정 작업이 끝날 때까지 중단시키고 다른 컴포넌트를 먼저 렌더링 하는 기능이다. 일반적으로 REST API나 GraphQL을 호출하여 네트워크를 통해 비동기로 데이터를 가져오는 경우에 사용하면 유용할 것 같다. 유저의 리스트를 출력하는 UserList 컴포넌트가 있다고 생각해보자. 당연히 컴포넌트를 호출하면 화면에 UserList 컴포넌트가 나타날 것이다. 하지만 아직 비동기 데이터인 유저 정보를 가지고 오지 않았다면 로딩 화면이 출력돼야 할 것이다. import { useState, useEffect } from "react"; function Us..

웹 애플리케이션을 만들 때 어려운 것 중 하나가 상태관리이다. 이번에 Derived State ( 파생 상태 )라고 불리는 것에 대해서 공부할 계획이다. Derived State ? 파생 상태라는 것은 최소한의 데이터를 저장하게 끔 상태를 관리하는 방식이다. 즉, 상태를 최소화 한다는 것이다. 계산할 수 있는 상태에 대해서는 저장하지 않고 계산을 통해 변경 사항이 발생하면 동기화 하는 방식으로 관리한다. 실제 예 각 노래에 대해서 체크박스로 구성된 노래 선택기가 있다고 생각해보자. 이러한 노래는 장르별로 그룹화가 되어있다. 그 이유는 개별 노래를 선택할 수 있고 장르를 선택하면 모든 노래가 선택되길 희망한다. 이런 형식의 페이지를 우리가 개발하다보면 쉽게 접할 수 있다. 이것을 만들기 위해서 가장 첫번째..