본문 바로가기

리액트

(48)

[React] 테스팅의 친구, userEvent 이해하기 with 예제 코드 포스트 목적 userEvent 를 빠르게 이해하고, 테스트에 적용하기 위한 목적으로 userEvent 가 가지는 핵심 메서드에 대해 정리 하였습니다. 예시는 최대한 공식문서의 내용을 참고해서, 이러한 예시로 사용할 수 있겠구나 싶은 것으로 작성해 보았습니다. userEvent.click(element, [options]) 주어진 엘리먼트를 클릭합니다. 옵션 객체를 제공하여 Shift, Ctrl 및 Alt 키와 같은 수정자를 추가할 수 있습니다. import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; test('Clicking a button', () => { con..

[React] React 혹은 Next 에서 forwardRef 타입에 대한 참조를 확인하는 방법 및 지정법 오늘의 명언? 포스트 작성 목적 forwardRef 의 타입을 지정할 때 어디서 내용을 참조해야 명확한 타입을 지정을 할 수 있는지 정리해본다. 다음 컴포넌트가 있다고 가정해보자 다음 컴포넌트가 있다고 가정해보자. 예시 컴포넌트는 대댓글 쓰기 Form 컴포넌트로서 기능을 수행한다. Form 의 action (전송 작업) 이 이루어지고 나면 해당 form 의 textarea 의 value 을 비우는 동작을 수행하기 위해 ref 를 사용해야 하는데, 해당 ref 를 참조해서 동작을 수행하는 함수는 ReplyForm 의 상위 컴포넌트에 있다. 현재 컴포넌트는 아무런 타입이 지정되어 있지 않으므로 __ 이 표시되는 것을 볼 수 있는데, 여기서 인터넷을 검색하지 않고 어떻게 타입을 지정해야 하는지 확인하려면 어떻..

[React] useId | 고유한 id 값을 생성해주는 리액트 훅 useId() useId() 훅을 사용하면 컴포넌트가 렌더링될 때 마다 고유한 id 를 생성하여 반환해준다. 따라서, 이를 활용한다면, 같은 컴포넌트를 동일한 부모 컴포넌트에서 재사용하는 경우 서로 id 값이 같아서 충돌이 날 수 있는 문제를 사전에 예방할 수 있다. 예를 들어 유저의 이메일을 입력 받은 동일한 컴포넌트를 하나의 부모 컴포넌트에서 여러 번 재사용하는 경우를 가정해보자. // 이메일을 입력받는 자식 컴포넌트 import { useState } from 'react'; function EmailInput({ onChange }) { const [email, setEmail] = useState(''); const handleInputChange = (e) => { const { value }..

[개인 정리]프론트엔드 상태관리 라이브러리 비교(redux, recoil, zustand) 보호되어 있는 글입니다.

[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가 필요하다. 예를 들어 배..

이전 1 2 3 4 5 6 다음

티스토리툴바