React
-
리액트 디자인 패턴 - Controlled Pattern과 UnControlled PatternReact.js & Next.js 2024. 6. 30. 13:39
목차Controlled PatternUnControlled PatternControlled PatternReact의 Controlled 패턴은 폼 요소의 상태를 React 컴포넌트의 state로 관리하는 방식입니다. 이 패턴을 사용하면 React가 폼의 데이터를 완전히 제어할 수 있게 됩니다. Controlled 패턴의 주요 특징:상태 관리:폼 요소의 값을 React의 state로 관리합니다.사용자 입력에 따라 state를 업데이트합니다.값 설정:폼 요소의 value 속성을 state 값으로 설정합니다.이벤트 핸들링:onChange 이벤트를 통해 사용자 입력을 감지하고 state를 업데이트합니다.예시 코드:import React, { useState } from 'react';function Contro..
-
리액트에서 다중의 동적 폼 처리하기React.js & Next.js 2023. 6. 15. 20:04
들어가며 프론트엔드로 개발하게 될 경우, 정적으로 사전에 생성된 폼 데이터를 다루기도 하지만, 동적으로 추가하거나 제거 및 수정이 필요한 폼을 만들어야 하는 경우가 생깁니다. 스타일링 코드를 제거하고 자바스크립트 코드 위주로 동적 폼 처리에 대한 기본적인 흐름을 파악합니다. 예시 [wanted] 동적 폼 처리 뷰 코드 import React, { useEffect, useState } from 'react'; function DynamicFormComponent() { const [formFields, setFormFields] = useState([{ name: '', value: '' }]); const handleAddFields = () => { const values = [...formField..
-
다양한 파일 확장자 파일 미리보기 지원하기React.js & Next.js 2023. 4. 5. 21:25
목차 들어가며 text, image, pdf, video 대응하기 리팩터링 with ChatGPT 들어가며 실무에서 폼 양식을 작성할 때, 다양한 타입의 파일을 지원하게 됩니다. 아쉽게도 우리는 단순히 객체로만 파일을 가지고 있는 것이 아닌, UX를 위해 파일의 미리 보기를 요구받을 수 있습니다. 따라서 이번에는 다양한 확장자 파일에 대하여 미리 보기를 지원하는 방법 및 로직을 알아봅니다. text, image, pdf, video 대응하기 import React, { useState } from 'react'; const Test = () => { const [text, setText] = useState(''); const handleFileInputChange = (event: React.Chang..
-
빠르게 시작하는 드래그 앤 드롭React.js & Next.js 2023. 3. 26. 20:15
prerequisites typescript interface react.js useRef useState Props inline-styling conditional render 전체 코드 import React, { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react'; interface IFileTypes { id: number; object: File; } const basicInputStyle = { width: '100%', height: '200px', border: '2px solid', borderRadius: '10px', cursor: 'pointer', transition: '0.12s ease-in', displa..
-
리액트에서 다수의 체크 박스 다루기React.js & Next.js 2022. 9. 13. 22:25
우리는 사용자에게 선택지를 제공할 때 또는 등을 사용한다. radio의 경우 여러 개의 선택지 중 한 가지를 선택해야 할 때 주로 사용하고, checkbox의 경우 여러 개의 선택지 중 중복 선택이 가능할 때 주로 사용된다고 볼 수 있다. 을 통해 유저의 인터렉션(클릭 이벤트)을 캐치하여 데이터를 생성해야 할 때, checkbox는 사용자의 선택을 배열로 관리하여 데이터화한 이후, 서버 또는 데이터 베이스에 저장하기 유용한 자료구조이다. 이번에는 리액트 프레임워크에서 를 통해 체크 여부를 배열 데이터로 관리하는 방법을 배워볼까 한다. 준비 기본적으로 string으로 구성된 더미 배열을 생성한다. jsx 문법 내부에 생성할 경우, 지속적으로 리 렌더링 되며 초기화될 수 있으므로 컴포넌트 윗부분에 작성하도록..
-
리액트 18 > 17 마이그레이션하기React.js & Next.js 2022. 8. 23. 22:42
목차 마이그레이션 이유 기본 패키지 구조 패키지 제거하기 패키지 설치하기 index.js 코드 변경하기 결과 레퍼런스 마이그레이션 이유 CRA(Create React App)로 패키지를 초기화하는 경우, 가장 최신 버전인 18 버전을 설치하게 된다. 현재 우리 서비스의 리액트 버전은 17이고, 사용하고 있는 라이브러리들이 18 버전에 맞춘 마이그레이션이 진행되지 않았다.. lock 파일의 라이브러리 별 의존성 문제가 있기 때문에 쉽게 버전업을 못하고 있는 상황이기 때문에, 사용하고자 하는 라이브러리가 리액트 17 버전에서도 문제가 없는지 확인하기 위해 18 버전의 리액트를 17 버전으로 마이그레이션 한다. 따라서 CRA로 빠르게 패키지를 초기화한 이유 17 버전으로 마이그레이션 한 후 사용하는 방법을 적..