코드노트

리액트를 하면서 useRef를 사용하며, 여러개의 Ref를 사용하게 된다면 어떻게 해야할까? 리액트 네이티브를 공부하면서 input을 컴포넌트로 관리하다가 Ref를 사용하여 다음 input으로 넘겨야했다. 하나의 refRef input컴포넌트 내에서 관리중이였고, 외부에서 컴포넌트에 Ref를 또 넘겨주어야했다. Ref를 2개를 사용할 수는? 있다. ForwardedRef를 사용하자. 더군다나 타입스크립트로 작업중이라면 머리가 더 복잡해질 수 있지만 이번에 컴포넌트를 만들면서 어느정도의 개념이 잡힌것 같다. mergeRefs 함수 function mergeRefs(...refs: ForwardedRef[]) { return (node: T) => { refs.forEach(ref => { if (ref &..

리액트를 하면서 항상 고민하게되는 부분은 상태관리인거 같다. 이번 팀 프로젝트를 진행하면서 리덕스를 사용하지않고 ReactQuery와 Zustand를 통해 상태관리를 하기로 하였다. 두 상태관리 라이브러리의 차이와 목적에 대해서 정리해보려고 한다. 프론트엔드에서 상태관리에 있어서 가장 처음 만나게된건 리덕스였다. 리덕스를 하게되면서 전역관리를 알게되고 redux-toolkit, redux-saga, redux-thunk 등등 미들웨어도 사용했다. 리액트 상태관리는 리덕스? - 컴포넌트끼리 상태값을 직접 소통하게된다면 컴포넌트 재사용에 있어서도 좋지 않으며, 불필요한 리렌더링이 발생하거나 코드들도 복잡해지게된다. - 리덕스로 상태관리를 할때 장점도 있었지만 단점들이 있었다. 먼저 리덕스에 대해서 정리해보자..

useEffect - 리액트 컴포넌트가 렌더링이 될 때, 될 때마다 특정 작업을 실행할 수 있는 리액트 hook이다. - mount : 화면에 첫 렌더링 - Update : 리렌더링 - Unmount : 화면에서 사라질 때 이 3개의 상황에서 useEffect 내부에 있는 코드가 실행된다고 생각하면 된다. - useEffect는 2개의 인자를 받는다. - 첫번째는 콜백함수, 두번째는 배열( [], dependency array )을 받는다. 그래서 일반적으로 두가지 사용법이 있다. useEffect(() => { }) - 컴포넌트가 화면에 처음 렌더링 될때, - 컴포넌트가 리렌더링이 될때 useEffect(() => { }, [value]) - 컴포넌트가 화면에 처음 렌디링이 될때, - [value]배열..

useRef - 값을 저장하는 공간 - State와는 다르게 값이 바뀌더라도 새로 렌더링이 되지 않는다. - State가 변화하여 렌더링이 되더라도 Ref의 값은 유지된다. 변경이 될때 값이 유지되어야한다면? useRef를 사용할 수 있다. useRef는 .current 프로퍼티로 전달되어 초기화된 변경 가능한 ref객체를 반환한다. const ref = useRef(value); {current: value} - 컴포넌트가 계속 렌더링이 되더라도 언마운트가 되기 전까지 값을 유지한다. useState 와 useRef의 차이점 See the Pen useState VS useRef by beomjunkwon (@bjkwon) on CodePen. - useState는 값이 변경이될때마다 바로바로 렌더링이..