React
-
[monorepo] hot reload 적용 :: 마이구미React 2022. 9. 13. 20:16
이 글은 모노레포 환경에서 핫 리로드를 적용하는 글을 다룬다. 모노레포에 대해서는 다루지 않는다. 예제는 CRA 를 기준으로 작성된다. CRA 를 사용하지 않더라도, 도움을 얻을 수 있는 정보가 있을 것이라 생각한다. 예제 코드 - https://github.com/hotehrud/monorepo-react 참고 자료 - https://muguku.medium.com/fix-go-to-definition-and-hot-reload-in-a-react-typescript-monorepo-362908716d0e 개발 환경을 모노레포로 구성하는 경우에 핫 리로드 기능의 확장을 원할 수 있다. 기본적으로 CRA 로 환경을 구성하면 핫 리로드는 기본적으로 적용되어있다. 코드를 수정하고 저장하면 자동적으로 업데이트..
-
[React] PullToRefresh 구현 :: 마이구미React 2022. 6. 12. 00:06
이 글은 PullToRefresh 에 대해 다룬다. 결과물의 코드는 ant.d 에서 제공하는 PullToRefresh 컴포넌트의 코드를 기반으로 작성되었다. 구현 방식뿐만 아니라 전반적인 PullToRefresh 기능 학습에 도움이 될 것이다. 참고 링크 - https://mobile.ant.design/components/pull-to-refresh 예제 코드 - https://codesandbox.io/s/pulltorefresh-b0mi3p?from-embed PullToRefresh 는 무엇인가? PullToRefresh 기능은 아래로 끌어내리는 제스처를 통해 새로고침을 실행하게 해준다. 해당 제스처는 Swipe Down 또는 Pull 이라고 부를 수 있다. 이 기능은 웹, 모바일 웹, 앱 구분없..
-
[React] Controlled vs Uncontrolled :: 마이구미React 2022. 6. 1. 12:17
이 글은 React 의 contorlled component, uncontrolled component 를 다룬다. 아래 예제 코드를 확인하고, 글 내용을 이해와 리마인드에 도움이 될 것이다. 예제 - https://codesandbox.io/s/controlled-vs-uncontrolled-10rgwj 어디서 접할 수 있는가? React 를 사용하면 Controlled Components, Uncontrolled Components 와 같은 용어를 들어본 적이 있을 것이다. 이 용어들은 Form 요소와 관련이 있다. 이 용어들은 공식 문서에서도 설명되어 있다. 그리고 UI 프레임 워크에서도 uncontrolled, controlled 예제를 따로 명시해서 제공하기도 한다. 꼭 알아야하는가? 이것들을 ..
-
[React] useImperativeHandle :: 마이구미React 2022. 4. 27. 22:05
이 글은 React 에서 제공해주는 Hooks API 에서 useImperativeHandle 을 다룬다. useRef, forwardRef 와 관련이 있다. example - https://codesandbox.io/s/xm605q docs - https://reactjs.org/docs/hooks-reference.html#useimperativehandle 사실 useImperativeHandle 은 사용하는 경우가 많이 없어서 익숙하지 않은 훅이다. 공식 문서에서는 다음과 같이 설명한다. useImperativeHandle customizes the instance value that is exposed to parent components when using ref... useImperative..
-
[React] react-router v6 에서 Prompt 구현하기 :: 마이구미React 2022. 4. 17. 11:54
이 글은 네비게이션 가드라고 불리는 기능을 위한 Prompt 를 다룬다. 페이지 뒤로가기 또는 다른 페이지 이동으로 하면, 바로 페이지 전환이 일어난다. 때로는 Confirm 과 같은 창을 통해 페이지 이동을 막고 제어하는 것을 원할 수 있다. 이 기능을 네비게이션 가드라고 부를 수 있다. react-router v6 를 기준으로 한다. 이전에는 v4 를 기준으로 작성한 적이 있다. (https://mygumi.tistory.com/358) 예제 코드 - https://codesandbox.io/s/ljn1r8 현재 기준으로react-router 의 버전은 6.x 까지 올라왔다. major 버전이 올라간 만큼 v5 에서 v6 로 마이그레이션 하는 과정은 수정이 좀 필요하다. 그 과정 중 네비게이션 가드..
-
[React] 중첩 라우터 언제 사용하는가? :: 마이구미React 2022. 3. 13. 22:12
이 글은 React 에서 중첩 라우터를 활용한 예제를 다룬다. React 에 국한되지 않고, 중첩 라우터는 어떤 경우에 사용하고 이점은 무엇인가? 를 다루게 된다. react-router-dom v6 을 기준으로 다룬다. react-router - https://reactrouter.com/docs/en/v6/getting-started/overview 특정 사용자 페이지가 있다. (/user) 그리고 사용자 페이지에는 프로필 정보와 계정 정보를 위한 각각의 탭이 존재한다고 가정해보자. 이것은 단순하게 구현하면 다음과 같다. const UserPage = () => { const [tab, setTab] = useState('profile'); return ( User : { name } setTab('..
-
[React] 전역 모달 구현하기 :: 마이구미React 2021. 11. 3. 22:00
이 글은 React 에서 전역 모달을 구현하는 방법을 다룬다. 코드 예제는 React + Recoil + Typescript 로 구성되어있다. Recoil 은 단순 모달 on/off 상태 관리 용도로 학습을 거의 요구하지 않는다. (코드는 3줄이다) 참고 글 - https://opensource.com/article/21/5/global-modals-react 코드 예제 - https://codesandbox.io/s/bitter-brook-rep1f?file=/src/recoil/modal.ts:530-621 이 글에서 "전역 모달" 을 의미하는 것은 전역에서 관리되는 상태를 가지는 모달이다. 반대로 지역으로 관리되는 상태를 가지는 모달을 확인해보자. 모달을 import 하고 모달의 on/off 를 관..
-
Redux 를 걷어낸 이유 :: 마이구미React 2021. 7. 6. 22:00
Redux 의 문제점이 무엇이고 이를 SWR 로 어떻게 해결할 수 있는지 다뤄본다. Redux 와 SWR 이 무엇인지에 대해서는 다루지 않는다. Redux - https://github.com/reduxjs/redux SWR - https://github.com/vercel/swr Redux 는 이미 대중화되어있고 대부분 이미 서비스에 사용되고 있는 라이브러리이기에 본인도 실무에서는 여전히 사용하고 있다. 하지만 개인적으로는 Redux 는 사용하다가 걷어내고 20년 초?부터는 사용하지 않고 있다. 그 대안으로는 SWR 라이브러리를 사용하고 있다. 짚고 가고 싶은 게 있다. "대안" 이라고 말하기가 조금 애매하다고 생각한다. Redux 와 SWR 은 본질 자체가 다르기 때문에 직접 비교할 순 없고 특정 관..