hee-ya07 님의 블로그

:: 리렌더링을 줄이기 위해 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     :: 제어 입력 사용 시(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로..

8. useCallback: 인수로 넘겨 받은 "callBack" 을 캐싱    => 함수에 대한 저장(메모리제이션): 동일한 함수가 계속 재사용되므로 불필요한 리렌더링을 방지const cachedFn = useCallback(fn, dependencies)첫번째 인수로 캐싱할 함수두번째 인수로 의존성 배열: 자식 컴포넌트가 React.memo로 최적화된 경우, 자식으로 함수를 보낼 경우 callback을 통해 렌더링 방지: 자주 되는 함수일 경우 매번 재생성 하지 않고 메모리에 캐싱된 함수를 재사용더보기더보기const ChildComponent = React.memo(({ onClick }) => { console.log('Child component rendered'); return Click M..

6. useLayoutEffect: WB가 re-paint 전 실행되는 useEffect의 일종useLayoutEffect(setup, dependencies?)const Example = () => { useLayoutEffect(() => { console.log('렌더링 후, 화면에 그리기 전에 실행됩니다.'); }, []); // 의존성 배열이 빈 배열이면, 컴포넌트가 처음 렌더링된 후에만 실행 return Example;};: useEffect와 동일하게 생겼고 엇비슷하게 동작함- 차이점특성useEffectuseLayoutEffect실행 시점렌더링 - 페인팅 후렌더링 후 - 페인팅 전 사이에 실행동기 | 비동기비동기동기렌더링에 영향비동기 작업 -> 렌더링에 영향 X화면을 그리기 전 동..