본문 바로가기

리액트

(42)

리액트에서 변동 가능성이 없는 변수의 위치는? 함수 내부 VS 함수 외부 함수 내부 인가, 함수 외부인가리액트에서 함수 컴포넌트를 사용하다보면 한 가지 의문이 들 때가 있습니다. 변수는 함수 외부에 두는 것이 좋을까? 아니면 내부에 그대로 두는 것이 좋을까? 에 관해서 입니다. 예를 들어, 다음과 같은 변수가 컴포넌트 내부에 선언되어 있다고 가정해 봅시다.import React from 'react';const MyComponent = () => { const value = 42; return ( The value is: {value} );}; 여기서, value 은 MyComponent 내부에 선언되어 있습니다. 컴포넌트는 함수이므로 상태가 업데이트 될 때 마다 변수는 매번 메모리에 재할당이 됩니다. 그럼 한 가지 생각해볼 수 있습니다. val..

Vite + React 환경에서 test 파일 제외하려면 참고하세요. 보호되어 있는 글입니다.

[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 컨텍스트의 불필요한 리렌더링 문제를 해결하고, 메모이제이션 필요성을 없애며, 선언적 프로그래밍 모델을 유지하면서 시그널과 유사한 개발자 경험을 제공한다. 여기서, 선언적이란 알고리즘을 통해 얻은 결과는 이거야 라고 선언하는 것과 같다. 즉, 결과를 얻기 위해 알고리즘이 어떻게 구현되어야 하는지를 일일이 명시하는 명령..

이전 1 2 3 4 ··· 6 다음

티스토리툴바