hee-ya07 님의 블로그

0. 개요- 개발할 때, 나만 그런지 모르겠는데대략적 구조 -> 각 기능 분배 및 이슈 설정 -> 개발 -> pr이런 순서로 진행하고 있다. 이 때, 따로 이슈나 pr에 대한 템플릿이 없다면 각 사람마다 다른 구조의 글이 나올 것이다.때문에 git에서는 이것을 공통화할수 있게끔 설정하였는데, 이에 대해 잠시 알아보자..1. github 연결- 이전에 로컬 개발 환경을 만들어놓고 remote에 연결하는 방식에 대해 설명한 적이 있다. [git] git 시작하기0. git 개념구분gitgithub목적분산형 버전 관리 시스템 (VCS)git, 클라우드 기반의 코드 호스팅 및 협업 플랫폼기능로컬 코드 관리 중앙 코드 관리 협업 관리 저장소Local RepositoryRemote Repository인터페이hee-..

:: 리렌더링을 줄이기 위해 use-hook-form을 사용하는데,:: 비밀번호 확인(보이기/숨기기), 포커싱 등을 보면 상태를 사용하거나 난감해하는 문제를 맞이한다..내 이야기. 1. useImperativeHandleuseImperativeHandle(ref, createHandle, dependencies?):: 자식 컴포넌트에서 부모 컴포넌트로 특정 인스턴스 값을 전달할 때 사용:: 주로, ref를 통해 자식 컴포넌트의 내부 메서드나 속성을 부모 컴포넌트에서 사용할 수 있도록 할 때 사용:: 즉, 자식의 인스턴스 값을 부모에게 노출 시킴:: 결합도가 증가함을 인지  useImperativeHandle – ReactThe library for web and native user interfacesk..

1. React-hook-form에서 Props Drilling 방지:: 제어 or 비제어에서 useForm 사용 시, 계층 구조가 만들어짐:: 구조가 커질수록 계층별로 퍼져 각 계층의 자식 인풋을 연결하면, Props Drilling 발생:: + useFormContext() 사용  == useFormContext()  == useContext()1.1  :: 으로 모든 인풋을 관리할 기반 폼 생성:: useForm()을 정의하는 곳에서 과 함께 정의:: useForm()엣 반환된 register, handleSubmit, formState 등을 하위 컴포넌트가 접근할 수 있도록 함function RegistrationForm() { const methods = useForm() const { r..

1.  useForm 사용 - 종료1.1 handleSubmit():: 종료 및 제출// 아래와 동일등록 Ex)export function App() { const { register, handleSubmit } = useForm() return ( console.log(data))}> Submit Button );}1.2 reset():: 종료 및 리셋// 아래와 동일초기화Ex)export function App() { const { register, reset } = useForm() return ( reset()}>Reset Button reset()} value="Reset Button" /> );}참고AS..

1. formState :: 렌더링 성능을 위해 프록시 패턴을 적용 => 리렌더링 X:: 리렌더링 X이므로 formState를 보기 위해서는 이벤트 발생이 필요최초 useForm을 생성 후, 모든 인풋들을 register or control로 일괄 등록 후,아래와 같이 formState로 상태 조회const { formState: { // A. 유효성 관련 errors, // 모든 인풋들의 각각의 유효성 출력 isValid, // 모든 인풋들이 유효한지 여부 isValidating, // 모든 인풋들이 유효성 검사중인지 validatingFields, // 모든 인풋들중 유효성 검사중인것들만 출력 // B. 기본값 대비 입력되었는지 여부 defaultVa..

0. useForm 사용 - 등록/유효성:: register(), control에는 유효성 검증을 위한 기준 파라미터가 있음:: 해당 객체 ref에 태그되는 "name"과 이를 같이 전달하여 등록 및 유효성 검증0.1 Vaildation 유효성 종류 - 대략Validation 유효성 종류내용- required필수 입력 여부- min / max최소 / 최대 값 설정- minLength / maxLength최소 / 최대 문자 길이 설정- pattern정규픽 패턴에 맞는지 검사- validate사용자 정의 유효성 검사 함수 더 많은 vaildation registerPerformant, flexible and extensible forms with easy-to-use validation.react-hook-..

0. useForm 사용 - 시작register() :: 비제어 입력 사용 시control     :: 제어 입력 사용 시(UI 라이브러리의 커스텀 input사용 시) 0.1 register()를 사용하는 경우:: 입력이 비제어 입력을 사용한다면 useForm의 register()를 사용:: 해당 비제어 컴포넌트의 Reference를 register에 등록하여 사용(ref에 연결됨을 의미)// 비구조화 사용function Input({ control, name }) { const { field } = useController({ name, control }); const { value, ref, onChange, onBlur, name = fieldname } = field; return ( ..

0. 입력 값에 대한 관리0.1 제어 컴포넌트 VS 비제어 컴포넌트특성제어 컴포넌트 (Controlled Component)비제어 컴포넌트 (Uncontrolled Component)상태 관리- 상태 기반    :: React State로 관리- DOM기반    :: DOM을 직접 사용하여 관리입력값 추적- 양방향 데이터 바인딩   :: React 상태로 입력값 추적 가능- 단방향 바인딩    ::ref로 DOM에서 입력값을 직접 읽어옴성능- 상태 변화 시 리렌더링 발생- 리렌더링이 발생하지 않음복잡성- 상태 관리 코드 작성 필요- 상태 관리가 필요 없고 간단함유연성- 높은 유연성, 복잡한 폼 및 동적 입력 관리에 유리- 간단한 폼에 적합, 복잡한 유효성 검사에 불편함저장 영역- React 상태 (컴포넌..

1. Redux Middleware1.0 개념기존Middleware 사용Action -> Dispatcher -> Reducer 실행Action -> Dispatcher -> Middleware 전처리 -> Reducer 실행 -> Middleware 후처리:: 한번에 처리:: Reducer 실행에는 Only 상태 변경에 대한 역할 및 책임:: 다른 side-Effect는 Middleware에서 처리proxy 패턴과 유사1) 전처리 :: Action -> Dispatch 후 Middleware가 이후 활동을 가로채고 작업 후 다시 Dispatcher로 반환2) 후처리 :: Action을 받은 Reducer의 store처리 후, Middleware가 활동에 관여하여 작업 처리1.1 제공 파라미터// 미들웨..

0. Flux Architecture0.1 등장 배경 - MVC Architecture을 적용한 React에 대해 SSOT를 유지하기 위해 State Lifting + Props Drilling 등을 적용- 위의 적용 방법으로 인해 아래와 같은 문제점 발생1) 다량의 컴포넌트가 하나의 상태를 구독하는 경우 - 무조건 해당 상태를 가진 부모 컴포넌트의 자식이여야 함2) 상태를 사용하려는 자식 컴포넌트가 부모 컴포넌트와 매우 멀리 떨어져있는 경우 - props Drilling 발생- 이에 대한 해결을 위해 Flux Architecture가 등장 0.2 작동 원리와 구성요소:: 데이터의 흐름을 단방향으로 구성하는 아키텍처 1) Action 발생 -> 2) Dispatcher가 action 관리 및 store로..