React
-
[React] IOS 페이지 트랜지션 구현해보기 :: 마이구미React 2024. 10. 7. 10:57
이 글은 React 에서 페이지 트랜지션을 구현해본다.페이지 트랜지션은 IOS 처럼 리스트 페이지간 좌우 슬라이드 애니메이션으로 진행한다. 전체 코드 및 실제로 동작하는 예제를 제공할 예정이니 글을 끝까지 읽어보길 바란다. 구현하고자하는 페이지 트랜지션은 무엇인가?이 글에서 구현해보는 애니메이션을 먼저 확인해보자. 첨부 파일을 기반으로 요약하면 다음과 같다.하단 네비게이션바 간의 이동에서는 애니메이션이 없는 상태이다.리스트 페이지에서 아이템을 클릭하면 상세 페이지로 이동하는 경우에 상세 페이지는 Slide 애니메이션이 적용된다.리스트 페이지에서 아이템을 클릭하면 상세 페이지로 이동하는 경우에 리스트 페이지는 FadeInOut 애니메이션이 적용된다. 1, 2번이 주요 내용이고, 3번의 경우에는 응용이라..
-
[React] react-query 에러 핸들링React 2024. 9. 29. 14:40
이 글은 react-query 의 에러 핸들링에 대해 알아본다.API 요청에서 4xx, 5xx 와 같은 상태코드를 받는 경우라고 이해하면 된다.react-query - https://github.com/tanstack/query 이번 주제는 코드를 통해 진행하게된다.해당 코드는 특정 라이브러리들을 기준으로 진행된다.사용하는 라이브러리의 기본 지식은 필요하지만, 모르더라도 에러 핸들링의 전체적인 흐름만 이해해도 좋을 것이라고 생각하고 있다. react-queryaxiosreact-error-boundary 우리는 API 에러 응답에 대해서 핸들링 해야한다.기본적으로 HTTP status code 를 4xx, 5xx 응답한다면, 에러라고 받아들이고 있다. API 가 에러 응답을 한다면, 클라이언트는 무엇..
-
[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('..