React 애플리케이션에서 과도한 최적화는 최악의 상황을 나타낸다. 몇몇의 개발자들은 useMemo와 useCallback을 개발에서 기본 사항으로 넣어서 모든 곳에 사용한다. 하지만 useMemo는 오히려 애플리케이션의 속도를 저하시킬 수 있다. 명심해야할 것은 메모이제이션은 공짜가 아니다! 우리는 왜 useMemo를 사용할까? useMemo는 컴포넌트의 리렌더링 사이에서 계산 결과를 캐시에 저장하는 Hook이다. React.memo, useCallback, 디바운싱, 동시 렌더링(Concurrent Rendering) 등과 함께 사용해서 성능상 이점을 준다. 이것이 특정 상황에선 정말 도움이 되고 중요한 역할을 하는 것은 맞지만, 대부분은 부적절한 방법인, 모든 변수를 useMemo로 래핑한다. 당연..

React 18버전에 새롭게 추가된 Hook이 몇가지 있다. ▶ useId ▶ useTransition ▶ useDeferredValue ▶ useSyncExternalStore ▶ useInsertionEffect 사실 추가가 되었다고 사용해보지는 않았다. ( 사용성이 있는지는 의문...! ) useId 유니크한 Id 값을 만들어주는 Hook이다. 이게 끝이다 ㅋㅋ.... 태그에 id 값을 넣어야 하는 경우 const passwordField = () => { const passwordId = useId(); return ( ... ) } 다음과 같이 사용할 수 있다. 이렇게 사용하면 id 가 중복으로 들어가는 경우를 방지할 수 있겠지만, 굳이 사용해야할까? 라는 의문은 있다. id 를 고민하는 일이 ..

상태를 관리할 때 사용하는 것으로 useState와 useReducer 가 있다. 하지만 일반적으로 useState를 사용하고 useReducer를 사용하는 일은 거의 없었다. 그러다보니 궁금함이 생겼다. useReducer는 언제 사용하고, 왜 사용하는 것일까? 먼저 간략하게 둘의 차이를 알아보자. useState ▶ 간단한 상태 관리 ▷ 값이 하나인 경우 ▷ 상태들이 서로 관련이 없는 경우 ▶ 컴포넌트 내에서 사용 const [state, setState] = useState(initialState); useReducer ▶ 복잡한 상태 관리 ▷ 상태들이 서로 관련이 있거나, 참조가 필요한 경우 ▷ ex) 로그인된 사용자의 권한을 확인하여 다른 화면에 보여줘야 하는 경우 ▶ 여러 컴포넌트에서 상태가 ..

본인은 프로젝트를 만들 때 CRA를 사용해서 사용한다. 그런데, 프로젝트를 진행하다보면 다른 경로의 모듈을 import할 때 상대 경로를 사용하면 길어지는 문제가 있다. 절대 경로를 사용해서 src/ 에서부터 받아온다면 길이가 짧아진다. 이것은 어찌보면 사소할 수 있는데, 개인적으로 코드에서 이런 사소한 부분을 해소하면 전체적인 코드의 가독성이 좋게 느껴져서 신경을 쓰고 있다. 다시 본론으로 넘어가서 상대 경로의 프로젝트를 절대 경로로 변경하기 위해서 craco를 사용하면 해결된다. craco는 cra로 만든 프로젝트의 경우 eject을 해야 설정이 변경 가능한 것을 설정을 덮어씌워서 변경시켜준다. npm i --save @craco/craco 프로젝트를 설치해준다. 그 다음에 루트에 craco.conf..

React와 같이 사용하는 css 라이브러리로 styled-components를 자주 사용한다. 그런데, 공통 스타일을 관리하려고 theme를 만들면 필요할 때마다 import를 해야한다는 불편함이 있었다. 또한 dark 테마와 같이 전체적인 스타일이 변경되야 하는 경우 처리하기가 매우 까다로웠다. 하지만 styled-components에서는 context API를 통해 theme를 관리할 수 있는데, ThemeProvider이다. ThemeProvider ThemeProvider는 context를 통해서 하위 컴포넌트에서 theme 속성을 전달하는 역할을 한다. 그래서 일관적인 theme를 유지할 수 있다. import { ThemeProvider } from 'styled-components'; co..

swiper는 React 환경에서 뿐만 아니라 슬라이드를 사용하는 환경이면 생각나는 것이다. 아주 간단하게 슬라이드를 만들어주기 때문이다. autoplay, navigation, 등등 필요한 왠만한 모든 것이 다 있다. 그런데, 작업을 하다가 한 가지 문제가 있었다. autoplay로 설정된 슬라이드가 시작과 끝 부분은 정상적인 속도이지만 화면의 정면으로 가까워지면 점차 느려지는 것이다. 애석하게도 swiper는 이것을 해결하는 옵션을 가지고 있지 않은 것으로 보였다. 애매하게 말하는 이유는 내가 검색 키워드를 몰라서 찾지 못하는 것일 수 있다. 하지만 분명 이런 이동이 불편해지는 상황이 올 것이다. 그래도 다행인 것은 swiper의 css 설정이 어렵지 않은 것이였다. 해결하기 위해서 swiper에서 ..

form 형식의 페이지에 상태를 관리하는 것은 생각보다 귀찮은 작업이다. form에 개수에 맞춰서 state를 만들어주고, reset이 필요한 경우 state의 개수만큼 값을 초기화해야 한다. 불편한 점은 이것만이 아니다. 값의 검증, 또는 onChange 이벤트 시에도 상태의 수만큼 만들어줘야한다. 결국 유사한 코드가 반복되는 상황이 발생하는 것이다. 이것을 비교적 간단하게 처리해주는 커스텀 훅이 useForm이다. useForm? 앞서 말한 것처럼 쉽게 form을 관리할 수 있는 커스텀 훅이다. npm install react-hook-form 다음과 같은 방법으로 설치할 수 있다. 굳이 useForm을 사용해야 하는 이유를 먼저 설명하자면, 값의 변경, submit, 조회, 오류 검출 등의 기능을 ..

redux는 이미 많은 개발자가 사용하는 상태 관리 라이브러리이다. React의 상태 관리 라이브러리는 한 가지 고려할 점이 있는데, 일반적인 상태와 같이 새로고침 시 상태가 사라진다. 이것을 해결하기 위해서 local 또는 session 을 사용해서 reducer를 저장해서 새로고침 시 데이터를 redux에 가져올 수 있다. 다음과 같은 기능을 redux-persist가 제공해준다. 설치 yarn add @reduxjs/toolkit react-redux redux-persist reduxjs/toolkit과 react-redux는 redux를 사용하기 위해서 설치했고 redux-persist는 따로 설치해야 한다. 만약 타입스크립트를 사용한다면, yarn add -D @types/redux-persi..