728x90 반응형 source-code/React42 Cannot read properties of null (reading 'useContext') 에러 해결 배경 사내 서비스에서 공통으로 사용하는 모듈들을 위한 패키지를 개발하는 도중, 위 에러와 마주쳤습니다. 문제가 된 상황은 다음과 같았습니다. 1. A 패키지는 B, C 프로젝트에서 공통으로 사용하는 모듈들을 제공합니다. 2. 이때 공통으로 사용되는 모듈들에는, 기본 css가 적용된 styled-components가 포함됩니다. 3. B 프로젝트는 A 패키지가 제공하는 styled-components 컴포넌트를 사용합니다. 4. B 프로젝트는 위 컴포넌트뿐만 아니라, 서비스 내 스타일링을 위해 자체적으로 styled-components를 사용합니다. 문제 상황 개발 환경에서는 아무런 문제도 발생하지 않았습니다. A 패키지에서 styled-components를 사용한 react component(편의상 St.. 2024. 1. 16. react-dom의 root.render()를 여러 번 호출하면 어떤 일이 생길까? 현재 회사에서 chrome extension을 React를 사용해 개발하고 있다. extension에서는 manifest.json의 content_scripts를 통해, 실행 시 자동으로 js 파일을 동작하게 할 수 있다. → 실행할 content-sciprts 파일에서 react를 사용해 페이지를 그려주면 되는 것. // content-script.ts import React from "react"; import { createRoot } from "react-dom/client"; import App from "./App"; const rootElement = document.createElement("div"); document.body.appendChild(rootElement); const ro.. 2024. 1. 4. useQuery data type 지정하기 (feat. 관심사 분리) 현 서비스에서는 react-query를 통해 서버 데이터를 관리하고 있다. https://tanstack.com/query/v4/docs/react/reference/useQuery useQuery | TanStack Query Docs const { data, tanstack.com get 요청을 통해 받아온 데이터는 useQuery hooks를 통해 관리한다. 이때 해당 useQuery는, useQuery를 반환하는 custom hooks를 작성해 재사용할 수 있도록 했다. // useGetPetDetailQuery.tsx export const useGetPetDetailQuery = ( pet_id: number, ) => useQuery( petQueryKey.detail(pet_id), asy.. 2023. 8. 16. react-query와 error 전파 handling 작년 초 쯤이었을까? api 요청 및 응답 상태 관리를 redux-thunk에서 react-query로 변경해나가기 시작했다. const getBookApi = async () => { const response = await axios.get(URL) return response.data }; const {data} = useQuery('book', getBookApi) 의식의 흐름대로 다음과 같이 썼었는데... 디버깅을 하다보니, 응답에 실패했는데도 아무 곳에서도 에러를 감지할 수가 없었다. 분명 useQuery의 onError 옵션을 통해, 에러 발생을 catch할 수 있다고 되어있는데도! 하지만 곰곰히 생각해보면, 당연한 일이다. 왜? useQuery는 두번째 인자로 넘겨준 queryFn이 반환하.. 2023. 8. 16. Suspense를 통한 Render-as-you-fetch waterfall problem 현 애플리케이션에서 비동기 통신 관련 로직은 다음과 같이 작성되어 있다. const Detail = ({id}) => { const {data, isLoading} = useQuery(fetchDetail) if(isLoading){ return } return } react-query를 통해 비동기 통신을 제어하며, 이 때 해당 요청의 상태에 맞는 UI를 render한다. (로딩 중일 경우 로딩 컴포넌트를, 완료된 경우 해당 데이터를 전달) 여기서 문제점. const Detail = ({id}) => { const {data, isLoading} = useQuery(fetchDetail) if(isLoading){ return } return ( } 위와 같은 상황에서 .. 2023. 8. 16. React Hook Form 기반 유효성 버튼 구현 약 1년이 조금 넘는 기간 동안, 샵 관리 프로그램을 개발했다. 대부분의 데이터가 사용자의 입력을 통해 생성되는 관리 프로그램의 특성상... form과 관련된 로직을 정말로 많이 다뤘다. 온갖 요구 사항, 예외 케이스들과 마주했고, 이를 구현하기 위해 수많은 방법을 탐구했다. https://react-hook-form.com/ Home React hook for form validation without the hassle react-hook-form.com 그리고 내린 결론 → react에서 form 관련 로직을 다룰 때, 이만한 라이브러리는 없다. 유효성 버튼 구현 유효성 버튼이란? → (내 맘대로) 특정 조건이 완료되기 전까지 비활성, 특정 조건 완료 시 활성화 되는 버튼. 필수인 데이터 입력이 완.. 2023. 8. 16. react에서 long press 구현하기 웹에서 long press를 구현할 일이 생겼다. 원했던 기능은 타임 테이블에서 꾹 누르기 + 드래그를 통해 예약하고자 하는 날짜를 지정하는 것! PC에서는 drag만 있어도 해당 기능을 구현할 수 있지만, tablet에서는 스크롤 이벤트와 drag 기능이 중첩되어 의도한 동작이 이뤄지지 않기 때문에... long press를 추가해 이를 해결하고자 했다. 기본적인 long press의 개념은 1. 사용자가 화면을 누른 상태에서, 지정 시간이 지난 후에야, 특정 동작이 수행된다. 2. 지정 시간이 흐르기 전에 사용자가 화면에서 손을 떼면, 특정 동작이 수행되지 않는다. 우선, 화면을 눌렀을 때/손을 땠을 때는 pointer event를 통해 감지할 수 있다! https://ko.javascript.inf.. 2023. 8. 16. Inversion of Control 하루 내내(그리고 지금도) 고민하는 문제. 컴포넌트의 제어권을 어디까지 위임할 것인가! 0부터 시작해 모든 것을 만들어가는 스타트업의 특성 상, 애플리케이션 UI나 기능은 시시각각 변하기 마련이다. 이전에는 이런 변화가 생기면 승질부터 났었다. 유지보수의 어려움을 들며 변경 사항을 (최대한) 막으려 한다던지... 당장 해당 변경사항만을 반영하기 위해 주먹구구식으로 컴포넌트를 작성한다던지... 하지만 클린 아키텍처를 읽은 후 부터, 소프트웨어 개발을 다른 시각으로 바라보게 되었다. → 소프트웨어는 변화에 빠르게 대응하기 위해 존재하는 것! → 수정사항과 변화는 항상 생길 수 있다! 따라서 중요한 건, 해당 변경사항을 빠르고, 안전하게 반영하는 것! 그리고 이를 위한 수단으로... 컴포넌트 제어의 역전에 대.. 2023. 8. 16. Reconciliation (재조정) React의 비교(diffing)알고리즘 why? render = 해당 함수가 처음부터 끝까지 실행되는 것 = React element tree를 만드는 것 state, props가 갱신되면 render()함수는 새로운 React element tree를 반환 React → 가장 효과적인 방법으로 생성된 element tree에 맞는 UI 갱신! 하나의 트리를 다른 트리로 변환하기 위한 최소 연산? → O(n3)… 굉장히 비싼 연산… React는 두 가지 가정에 기반한 O(n) 복잡도의 알고리즘 구현! 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해줄 수 있다. 비교 알고리즘(Diffi.. 2023. 8. 16. 이전 1 2 3 4 5 다음 728x90 반응형
