프로그래밍/React
-
[React] 고차 컴포넌트 (HOC, High Order Component)프로그래밍/React 2024. 1. 20. 16:09
고차 컴포넌트 하나의 개발 패턴으로 컴포넌트를 인자로 받아서 새로운 컴포넌트로 변환해 반환하는 방식으로 인자로 넘긴 컴포넌트에게 추가되길 원하는 로직을 HOC에서 가지고 있다가 로직이 적용된 엘리멘트를 반환하게 된어 횡단 관심사 문제를 해결하는 역할을 한다. 횡단 관심사란? 대표적인 예시로 인증 & 인가 서비스, 로깅, 트랙젝션 처리, 에러처리 등등이 있으며 계층 분리를 통해서 기능을 분리한다고 하여도 중복된 코드가 생길 수 밖에 없는 경우가 있다 이러한 계층에 상관없이 공통적으로 필요한 관심사가 있는데 이것이 횡단 관심사이다. 즉 어플리케이션 전반에 공통적으로 필요한 문제를 횐단 관심사라고 부를 수 있다. // 이렇게 관심사 분리를 통해서 분리를 해도 공통적으로 필요한 로직이 있는 경우가 있다 언제 사..
-
[Vite] 절대경로 설정프로그래밍/React 2024. 1. 3. 14:14
Vite + Typescript 를 사용한 프로젝트에서 절대경로를 설정하는 방법 tsconfg.json 과 vite.config.json 모두 고쳐줘야한다. >tsconfig.json { "compilerOptions": { "baseUrl": "src", ... "path": { "pages/*": ["pages/*"], "components/*": ["components/*"], } } 아래의 설정을 하지 않아서 경로를 제대로 찾지 못하는 에러가 발생했었음. import { defineConfig } from "vite"; import react from "@vitejs/plugin-react-swc"; // https://vitejs.dev/config/ export default defineCon..
-
[React] useState의 동작원리프로그래밍/React 2023. 12. 16. 11:36
개요 기본개념 useState 동작 원리 헷갈리는 useState 결론 React에서 많이 사용되는 useState 왜 const로 선언이 되고 어떻게 변화를 시키는지 알아보자!! 기본 개념 Functional Component에서 상태) 불변성의 특징을 통해 사용하는 값을 예측 가능하게 만들어준다. 함수의 반환 값으로 컴포넌트가 나타나고 컴포넌트가 가진 값, 클로저 등의 정보는 기본적으로 변하지 않는다. Class Component는 this가 바인딩 된 것, 내부 상태값의 변화 등의 문제로 메서드 실행시점의 값을 예측하는 것이 쉽지 않다. 리랜더링이 필요한 시점에서 새롭게 호출을 하여 새로 만들어버린다. 초기 시점에 불변성을 활용하는 부분에 어려움이 있어 Class Component가 많이 사용되고 ..
-
[React] react-hook-form (Basic)프로그래밍/React 2023. 12. 8. 11:17
개요 react-hook-form을 도입하계 된 계기 react-hook-form 마무리 제어 컴포넌트에서 벗어나 비제어 컴포넌트 방식으로 form을 관리한다? react-hook-form 도입 라이브러리 없이 제어 컴포넌트로 form을 다루자) React에서 제어컴포넌트란 React를 통해서 제어하게 되는 컴포넌트이다. 간단하게 이름과 아이디, 비밀번호, 전화번호, 이메일을 받는 form을 만들 때 state를 통해서 값을 관리할 것이다. 제어컴포넌트로 form을 다룰 시에 나올 수 있는 모습이다 더보기 import React, { useState } from "react"; import InputText from "../component/InputText"; import { Label, Row } f..