728x90

[React] Context API를 이용한 합성 컴포넌트 만들기 - 컴파운드 패턴

컴파운드 패턴이란? Compound PatternCreate multiple components that work together to perform a single taskwww.patterns.dev컴파운드 컴포넌트(Compound Component) 패턴은 서로 관계가 있는 여러 개의 컴포넌트가 하나의 상위 컴포넌트를 통해 연결되고 이 상위 컴포넌트가 공통된 상태나 메서드를 제공한다. 사용자는 상위 컴포넌트만 사용하면서도 하위 컴포넌트들이 자연스럽게 상호작용하도록 할 수 있다. 보통 셀렉트 박스나 드롭다운 컴포넌트, 메뉴 항목과 같은 곳에서 이런 패턴을 볼 수 있다. 컴파운드 컴포넌트 패턴은 이러한 컴포넌트들이 함께 작동하여 특정 작업을 수행할 수 있게 해준다. 컴파운드 패턴 구현 예시컴파운드 패턴..

  • format_list_bulleted Frontend/React
  • · 2024. 11. 1.
  • textsms
[React] Hooks - useForm을 사용한 로그인 폼 예제

[React] Hooks - useForm을 사용한 로그인 폼 예제

useForm이란?useForm은 react-hook-form 라이브러리에서 제공하는 커스텀 훅으로 폼의 상태와 유효성 검사를 간편하게 관리할 수 있게 해준다. 이 훅은 form 데이터를 처리하는 데 필요한 다양한 기능을 제공하며 기존의 React 상태 관리 방식보다 가볍고 효율적으로 폼을 관리할 수 있도록 도와준다. 설치 방법npm install react-hook-form useForm의 장점성능 최적화: react-hook-form은 DOM 렌더링을 최소화하여 폼의 성능을 높인다.간결한 코드: register와 handleSubmit을 통해 필요한 코드량을 줄여주고 직관적으로 작성할 수 있다.유연한 유효성 검사: 필수 항목부터 비동기 검증까지 다양한 유효성 검사 옵션을 지원힌다.훅 기반 구조: us..

  • format_list_bulleted Frontend/React
  • · 2024. 11. 1.
  • textsms

[React] Hooks - useNavigate

useNavigate란 무엇인가?React의 useNavigate는 react-router-dom에서 제공하는 훅으로 페이지 간의 탐색을 쉽게 구현할 수 있게 도와준다다. 사용자가 특정 이벤트(예: 버튼 클릭)를 트리거하면 해당 이벤트가 발생한 후 다른 경로로 이동해야 할 때 useNavigate를 사용할 수 있다. 예를 들어 로그인 성공 후 대시보드로 이동하거나 특정 데이터를 서버에 전송한 후 결과 페이지로 리다이렉트할 때 유용하다.왜 useNavigate를 사용할까?기존의 HTML 방식에서는 페이지 전환 시 전체 페이지가 리로드되지만 React는 싱글 페이지 애플리케이션(SPA) 특성상 페이지 리로드 없이 화면이 부드럽게 전환된다. useNavigate는 이러한 SPA에서 라우팅을 프로그래밍적으로 처..

  • format_list_bulleted Frontend/React
  • · 2024. 10. 7.
  • textsms
[React] Vite로 react 프로젝트 시작하기

[React] Vite로 react 프로젝트 시작하기

Vite란?Vite 공식 사이트에 의하면 Vite는 차세대 프론트엔드 툴로 빠른 개발 서버와 빠른 번들링을 제공한다고 소개하고 있다. 특히 Vite는 개발 환경에서 모듈을 ES Module 방식으로 로드하기 때문에 새로고침 속도가 빠르고 빌드 시간이 짧다는 장점이 있다. 이 외에도 여러가지 장점이 존재하여 최근 리액트 프로젝트는 CRA(Create-React-App)이 아닌 Vite를 사용하는 편이다.CRA에서 Vite를 지향하는 이유?CRA에서 Vite를 지향하는 이유에 대해 알아보기 위해 둘의 차이점을 비교해본다면 아래와 같다.아래 예시 외에도 Vite를 사용하는 이유는 다양하기 때문에 프로젝트를 시작하기 전에 vite 공식 페이지를 참고하는 것도 좋은 방법이다. ViteVite, 차세대 프런트엔드 ..

  • format_list_bulleted Frontend/React
  • · 2024. 9. 29.
  • textsms

[React] Hooks - useReducer

useReducer란 무엇인가?React의 useReducer Hook은 상태(state) 관리를 위한 Hooks으로 복잡한 상태 로직을 처리하거나 여러 상태 값을 다뤄야 할 때 유용하다. useState와 비슷한 역할을 하지만 상태 업데이트 로직이 복잡해질수록 useReducer는 훨씬 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있게 해준다. useReducer는 리듀서 패턴에 따라 상태와 상태를 변경하는 함수(reducer)를 함께 관리하여 useState보다 더 복잡한 상태 변화를 효율적으로 처리할 수 있도록 설계되었다. useState vs useReduceruseReducer와 useState는 모두 상태를 관리하는 데 사용되지만 사용 사례가 다를 수 있다.useState: 간단한 상태 관리에..

  • format_list_bulleted Frontend/React
  • · 2024. 9. 29.
  • textsms

[React] Hooks - useRef

useRef란 무엇인가?React의 useRef Hook은 참조(ref)를 통해 DOM 요소나 컴포넌트 상태 값을 유지하는 데 중요한 역할을 한다. useRef는 주로 DOM 요소에 직접 접근, 불필요한 재렌더링 방지, 상태 값 유지 등의 상황에서 유용하게 사용된다.useRef는 변경 가능한 객체를 반환한다. 이 객체의 .current 프로퍼티에 값을 저장할 수 있으며 이는 컴포넌트가 다시 렌더링되더라도 값이 유지된다. 일반적으로 DOM 요소에 접근하거나 렌더링 사이에서 값을 기억하는 데 사용된다.ref 객체: useRef는 { current: null } 형태의 객체를 반환하며 이 객체는 렌더링 사이에서 값이 유지된다.DOM 접근: ref는 DOM 요소에 직접 접근할 때 주로 사용된다. ref를 통해 ..

  • format_list_bulleted Frontend/React
  • · 2024. 9. 29.
  • textsms
728x90