본문 바로가기

React40

프론트엔드, 함수형 프로그래밍(FP)이 선호 되는 이유 ⚡ 프론트엔드, 함수형 프로그래밍이 선호되는 이유 요즘 프론트엔드 진영에선 함수형 프로그래밍은 더욱 선호되는 추세를 보입니다. 그 이유는 정말 다양하지만 본론에 들어가기 전, 간단하게 요약하자면 “코드를 간결하고 유지보수하기 쉽게 유지하기 위해서”라고 할 수 있습니다. 그럼 왜 프론트엔드 진영에서 FP의 어떤 장점이 부각되어 선호되는지 알아보겠습니다. 📌상태 관리의 용이성 함수형 프로그래밍은 상태 변이를 최소화하여 코드를 더 예측 가능하고 안정적으로 만드는 것이 가능합니다. 그 이유는 각각의 함수들이 순수 함수로 만들어지기 때문입니다. 💡 순수 함수 : 동일한 입력에 대해 동일한 값을 반환하는 함수 순수 함수는 입력값에 대해서만 의존하고, 외부 상태를 변경하지 않는 함수기 때문에 예측 가능하며, 여러 개.. 2023. 5. 16.

[React] Context API와 의존성 주입 📒 Context API란 무엇인가?리액트 공식문서에서는 Context를 다음과 같이 소개하고 있습니다.context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.일반적인 React 애플리케이션에서 데이터는 위에서 아래로(즉, 부모로부터 자식에게) props를 통해 전달되지만,애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우(예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있습니다.context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다.리액트에서는 컴포넌트 간 prop drilling을 방지하기 위해 context를 내놓았습니다. con.. 2023. 5. 8.

[React] 리액트와 Side Effect ⚡ Side Effect(부수효과)란 Side Effect는 함수의 실행으로 함수 외부 상태가 변경되는 것, 함수의 순수성을 해치는 것들을 의미합니다. 반대로 함수에 Side Effect가 없다면 그 함수는 순수함, 즉 순수 함수임을 의미합니다. Side Effect와 순수 함수라는 개념은 뗄레야 뗄 수 없는 관계이기 때문에 순수 함수란 무엇인지 알아보겠습니다. 📌 순수 함수 순수 함수는 함수형 프로그래밍에서 다음과 같은 의미를 갖습니다. 동일 입력에는 항상 같은 값을 반환해야 합니다. 반환되는 값은 외부 데이터의 개입 없이 입력에만 의존해야 합니다. 함수 실행으로 인한 Side Effect가 없어야 합니다. 이런 성질을 갖고 있는 순수 함수는 멱등성을 가지고 있다고도 할 수 있습니다. 🔎 멱등성 연산을.. 2023. 4. 18.

[React] react-query, 리액트 쿼리를 사용해야 하는 이유 📒 react-query를 사용해야 하는 이유 리액트에서 상태 관리를 위한 라이브러리는 무수히 많습니다. 대표적으로 redux, recoil 같은 라이브러리가 있는데, 대부분 이러한 상태 관리 라이브러리를 사용하며 클라이언트 상태와 서버 상태를 함께 담아두고 있는 경우가 대부분이고, 또 그럴 수 밖에 없었습니다. react-query를 사용해 서버 상태를 관리한다면 클라이언트 상태를 분리하여 관리할 수 있기 때문에 직관적이고 효율적인 관리가 가능해집니다. 이 외에도 react-query에서 지원하는 다양한 옵션들을 사용해 캐싱, 에러처리, suspense, refresh, data fetching 조건 설정 등등 기존에 불편하게 느꼈던 부분들을 선언적이고 간편하게 이용할 수 있도록 도와줍니다. 그럼 re.. 2023. 4. 16.

[React] Suspense을 사용해 선언적으로 로딩 화면 구현하기 📒 Suspense을 사용해 선언적으로 로딩 화면 구현하기리액트의 Suspense는 React 16 버전에서 처음으로 선보인 후18 버전으로 오며 추가된 기능을 제공합니다. 이 글에서는 React 18에서의 Suspense를 왜, 어떻게 사용하는지 소개합니다.이번에 메이저 버전이 업데이트 된 react-query v5에서 Suspense가 어떻게 달라졌는지 다음 글로 빠르게 살펴보세요!react-query v5 주요 변경점 알아보기 feat. Suspense, ErrorBoundary📌 Suspense를 사용하는 이유리액트가 함수형 컴포넌트를 도입하며 내세운 가장 강력한 키워드는 선언형 프로그래밍입니다. 우선 본격적인 설명에 앞서 대비되는 명령형 프로그래밍과 선언형 프로그래밍의 차이에 대해 설명드립니.. 2023. 3. 23.

[React] Recoil의 effects를 이용해 localStorage, sessionStorage에 데이터 저장하기 ⚡ 전역 상태 Web Storage에 저장하기 리액트에서 전역 상태 관리를 위해 Recoil을 도입해서 사용했습니다. 여러 컴포넌트에서 사용하는 서버 데이터를 전역으로 저장했지만 새로고침을 하게 되면 데이터가 증발하고 다시 API를 호출해서 웹 스토리지에 데이터를 저장하는 방법을 사용했습니다. 그럼 Recoil Effects를 이용해 Web Storage인 Local Storage와 Session Storage에 자동으로 연동하는 방법을 소개합니다. ⚡ Web Storage Web Storage는 웹 브라우저에 직접 데이터를 저장할 수 있는 기능으로 Local Storage와 Session Storage 두 가지 종류가 있습니다. 쿠키는 4KB의 적은 용량이지만 웹 스토리지는 5MB라는 넉넉한 용량을 사.. 2023. 3. 22.

[React/TypeScript] Debounce, 일정 시간동안 발생한 이벤트 중 마지막만 실행 ⚡Debounce란Debounce란 일정 시간 동안 연속적으로 발생했던 이벤트들 중마지막만 실행시켜 과다한 호출이나 렌더를 막아 최적화하는 기술입니다. 예를 들어 이번 개인 프로젝트 중 입력 시 중복체크를 위해 API를 호출하는데한 글자 타이핑할 때마다 API를 호출하는 것이 부담되어 Debounce를 도입하여 해결했습니다.const debounce = any>(fn: T, delay: number) => { let timeout: ReturnType; return (...args: Parameters): ReturnType => { let result: any; if (timeout) clearTimeout(timeout); timeout = setTimeout(() => { .. 2023. 3. 8.

[React] input 한 글자 입력 시 focus out 되는 현상 ⚡input focus out issue 📌 현상 재현 HTML 삽입 미리보기할 수 없는 소스 📌 원인 반복문으로 컴포넌트 생성할 때 귀찮아서 키 값을 uuid 생성 함수로 부여했더니 다음과 같은 현상이 발생했습니다. input에 한 글자 입력하면 상태 변화로 인한 리랜더링 리랜더링으로 인한 uuid v4() 함수 재실행으로 키 값 변경 키 값 변경으로 인해 다른 요소로 인식해서 focus 유지 안됨 📌 해결 요소가 갖고 있는 고유의 값으로 key 값을 부여해 리랜더링이 일어나도 동일한 key를 유지할 수 있도록 했습니다. 2023. 3. 2.

[React + Craco + TS] Alias 절대경로 + 폴더 index 절대경로 설정 방법 ⚡ Craco + Typescript, Alias로 절대경로 설정하기 이 글을 본다는 것은 상대경로와 절대경로의 차이에 대해 이미 알고 있고, 상대 경로 지옥에 빠져 본 것이라 생각해 그 둘의 차이점을 설명하는 것은 패스하겠습니다. 기존에 절대경로를 설정하는 방법 중 craco+ craco-alias 은 지원이 종료되어 사용할 수 없고 react-app-rewired 는 익숙치 않아 craco만을 이용해 설정하는 방법을 소개합니다. //상대경로 import { ComponentA } from '../../../components/ComponentA' //절대경로 import { ComponentA } from '@components/ComponentA' import { ComponentB } from '.. 2023. 2. 14.

이전 1 2 3 4 5 다음

티스토리툴바