본문 바로가기

반응형

리액트

(44)
[React lib] 리액트에서 유효성 검사 라이브러리 4가지 간략 소개 및 링크 정리 보통 회윈가입 form 을 제출하기 전에 사용자가 입력한 데이터가 사이트에서 요구하는 조건을 만족하는지(유효성) 검사를 실시한다. 요구되는 사항 자체가 단순한 경우에는 바닐라 자바스크립트나 HTML form 을 구성하는 요소가 내부적으로 가지는 속성으로 간단하게 처리할 수 있지만, 요구되는 사항이 복잡한 경우에는 이 모든 것을 일일이 다루기에는 코드가 너무 길어져서 가독성이나 재사용성 등에 있어서 그리 좋은 처리는 아닐 수 있다. 따라서 언제든지 사항에 따라 활용할 수 있도록 오늘은 강력하면서도 단순하게 유효성을 체크할 수 있는 유효성 검사 라이브러리에 대한 간략한 소개와 사이트 링크에 대한 정보를 정리해두고자 한다. React Hook Form React Hook Form은 React Hook을 사용하..
[react ] Jotai, Recoil, Zustand, Valtio | Jotai (1) Jotai Jotai는 원자(atom) 단위로 전역 React 상태 관리를 수행하는 라이브러리이다. 즉, 상태를 작은 단위인 atom으로 분리하여 관리하고, 렌더링은 자동으로 최적화된다. 쉽게 말해서, 의존 관계에 놓여 있지 않은 atom(원자) 간에는 서로 영향을 미치지 않는다는 것을 의미한다. 예를 들어, A라는 원자 변하더라도, B라는 원자는 아무런 영향을 받지 않는다. 이는 React 컨텍스트의 불필요한 리렌더링 문제를 해결하고, 메모이제이션 필요성을 없애며, 선언적 프로그래밍 모델을 유지하면서 시그널과 유사한 개발자 경험을 제공한다. 여기서, 선언적이란 알고리즘을 통해 얻은 결과는 이거야 라고 선언하는 것과 같다. 즉, 결과를 얻기 위해 알고리즘이 어떻게 구현되어야 하는지를 일일이 명시하는 명령..
[React.v18 ] useTransition 과 논블로킹 useTransition useTransition 은 리액트 18 버전 이상에서 새롭게 등장한 훅으로, 논블로킹을 구현한 훅이다. 논블로킹이란 어떤 스레드의 실패 또는 중단이 다른 스레드의 실패 또는 중단을 유발하지 않도록 작업에 대한 요청은 순서대로 받아들이지만, 처리는 우선순위가 높게 책정된 즉, 우선 완료된 스레드 부터 이루어지도록 하는 것을 의미한다. 쉽게 말해, 논블로킹은 기존 작업의 실행이 후에 들어오는 작업의 실행을 막지 않는다. 반면에 블로킹은 이전 작업의 실행이 이후에 들어오는 작업의 실행을 막는다. 즉, 특정 스레드가 아무리 오래 걸린다고 하더라도, 다음 스레드의 작업이 먼저 끝난다면 다음 스레드의 작업 부터 우선 처리해주므로, 사용자가 오래 걸리는 작업을 하던 도중에도 다른 작업을 즉..
[react] 리액트에서 key 의 용도와 중요성 - 리액트 공식문서 기반으로 이해한 내용을 정리한 포스트 입니다. - key 속성은 React에서 동적으로 생성되는 엘리먼트 목록을 렌더링할 때 사용되는 중요한 속성이다. 여기서 몇 가지 주요 용도를 살펴보자. 유일성 보장 React에서는 동적으로 생성되는 엘리먼트에 `key` 속성을 제공해야 한다. 이는 React가 각 엘리먼트의 유일성을 보장하고, 어떤 엘리먼트가 추가, 수정, 또는 삭제되었는지 정확히 파악할 수 있게 해준다. 재사용 가능한 상태 유지 `key`는 리액트가 어떤 컴포넌트를 다시 렌더링해야 하는지 식별하는 데에도 사용된다. 키가 변경되면 리액트는 해당 키에 해당하는 컴포넌트를 다시 만들고 상태를 유지한다. 성능 최적화 효율적인 업데이트와 재렌더링을 위해 key가 필요하다. 예를 들어 배..
[react] 리액트에서 상태에 대한 정리(3) - 배열 - 리액트 공식 문서 기반으로 이해한 내용을 정리한 포스트 입니다. - 리액트에서 배열의 상태 또한 읽기 전용으로 취급한다. 자바스크립트에서 배열은 직접 변경이 가능하지만, 리액트에서 state 로 취급될 때에는 변경이 불가능한 것으로 취급해야 한다. 즉, 객체와 마찬가지로 상태의 복사본을 만든 후 , 새 배열이 기존 상태를 대체하도록 해야한다. 예를 들어, array[1] = 5 와 같이 배열의 요소에 값을 직접 변경하거나, push(), pop(), splice() 와 같이 원본 배열의 상태를 직접적으로 변경하는 일체의 행위는 리액트에서는 불가능한 것으로 취급해야 한다. 이는 반대로, map(), slice(), filter() 와 같이 원본 배열의 상태를 변경시키지 않고, 새로운 배열을 생성하는 메..
[react] 리액트에서 상태에 대한 정리(2) - 객체 - 리액트 공식문서를 읽고 이해한 부분을 정리한 포스트 입니다. - 리액트에서 객체의 상태는 읽기 전용으로 취급해야 한다. 리액트에서는 상태(state) 는 불변해야 한다. 이는 리액트의 최적화 전략과 관련된다. 리액트는 이전 프로퍼티나 상태가 다음 프로퍼티나 상태와 동일한 경우에는 작업을 건너뛰는 방식을 채택한다. 이는 리액트의 가상돔 방식과도 이어지는 것으로 리액트는 변경 이전의 값과 변경 이후의 값이 일치하지 않으면 업데이트를 실행하고, 그게 아니라면 업데이트를 건너 뛴다. 이는 객체를 취급할 때도 마찬가지다. 예를 들어, 다음 코드가 있다고 가정 해보자 import { useState } from 'react'; export default function MovingDot() { const [po..
[react] 리액트에서 상태에 대한 정리(1) - 상태 - 본인이 이해한 react의 state에 대하여 정리한 글 입니다. - 리액트에서 상태(state)와 상태관리(state management) 리액트에서 상태란 컴포넌트 별로 기억해야하는 데이터이다. 이 데이터는 이미지도 될 수 있고, 고객이 장바구니에 담아둔 물품정보 일수도 있다. 즉, 리액트에서 상태관리란 이러한 데이터를 효율적으로 관리하는 것이라 이해할 수 있다. 컴포넌트 간에 데이터를 전달하는 방법과 업데이트하는 방식을 간소화하고, 어플리케이션의 상태를 일관성있게 유지하는 모든 것이 상태관리라고 볼 수 있다. 리액트에서 상태는 스냅샷으로 관리된다. 앞서 정리한 상태를 다시 정리해보면 상태는 스냅샷으로 관리된다. 풀어서 설명하자면, 상태는 카메라로 찍은 사진처럼 보관(-> 리액트의 특정한 메모리 ..
[react] window.scroll 를 이용한 무한 스크롤 구현 시 문제되는 코드를 개선한 내용을 저장한 포스트 리팩토링 전 간략하게 정리해보면, 리팩토링 전의 코드는 스크롤 이후 추가적으로 불러오는 데이터를 카운트할 때 부모 컴포넌트로 부터 props 를 전달받아와서 사용했고, 이를 JSX 내에서 slice 를 활용해 중복으로 데이터를 불러오도록 하고 있다. 누가 봐도 전체적으로 성능 문제를 일으킬 수 있고, props 로 전달받은 데이터가 변동될 때 마다 컴포넌트가 전체적으로 리렌더링되는 등 문제가 많은 코드로 작성되어 있다. 그리고 아래 코드에서는 나오지 않았지만, 부모 컴포넌트에서 window.scroll 를 이용해 모든 자식 컴포넌트에서 불필요한 이벤트 호출이 발생하고 있다. 그리고 데이터가 추가적으로 로딩이 되는 경우 사용자는 데이터가 로딩되고 있는지 확인이 불가능했다. 아래 코드를 처음 작성했을 때는 ..

반응형