react
useInjectedProps
컴포넌트의 Props를 일부 오버라이드하면서 인터페이스를 바꾸고, 컴포넌트가 동일한 ref를 갖게(re-render 가능하게) 해주는 훅을 만들어보자. Implementation export default function useInjectedProps(_Component: C, injectedProps: I) { // 훅의 인자로 받은 컴포넌트를 저장합니다. const Component = useRef(_Component); // 상태 변경이 일어나면서 컴포넌트 호출이 일어날 경우 injectedProps가 컴포넌트로 자연스럽게 주입 될 수 있게 합니다. Component.current = (props: Omit) => { ret..
React 근황
https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024 React Labs: What We've Been Working On – February 2024 – React The library for web and native user interfaces react.dev RSC에서 실험적으로 테스트중인 cache https://react.dev/reference/react/cache cache – React The library for web and native user interfaces react.dev https://youtu.be/LL4V8CcEhIo - 메타 친구들은 자사 서비스에서 테스트 후 s..
DragGPT chrome extension 개발기
배경 최근 ChatGPT 열풍이 거세다. 연구 영역에 있던 생성 AI의 위치를 대중에 가깝게 옮기면서 대중들로 하여금 급격한 기술 발달이 이뤄지고 특이점이 왔다(?)는 생각을 하게 만드는 것 같다. 기존에 ChatGPT에게 회사 면접 질문을 몇 개 해봤다는 글도 올린 적이 있는데, ChatGPT의 이슈몰이와 함께 조회수가 꾸준히 올라가고 있다. https://nookpi.tistory.com/156 ChatGPT에게 회사의 면접 질문 몇 개를 던져보았다 질문과 답변을 번역기로 돌려서 어색한 부분이 다소 존재합니다 Q: 유지보수 가능한 코드란? A: 유지 관리 가능한 코드는 이해하고 수정하기 쉬운 코드입니다. 여기에는 일반적으로 깨끗하고 잘 nookpi.tistory.com 개인적으로는 ChatGPT를 위..
1년간 React 테스트를 작성하며 겪은 이슈 10가지
테스트 환경은 다음과 같습니다. - jest (27.0.6 -> 28.1.3) - jsdom (16.6.0 -> 19.0.0) - @testing-library/react (12.0.0) - @testing-library/user-event (13.5.0) 1. JSDOM 환경에서 innerText 감지 불가 Select 컴포넌트를 확장한 DropdownSelect 컴포넌트의 테스트를 하던 중, 선택된 값을 감지할 수 없는 이슈가 발생했습니다. (Select 컴포넌트는 여러 옵션 중 하나를 선택할 수 있도록 해주는 UI 컴포넌트로, Renderer 컴포넌트를 동적으로 받아 다양한 요구사항에 대응할 수 있는 컴포넌트입니다) 문제가 발생한 테스트는 DropdownSelect에서 특정 값을 선택하는 과정이 포..
[React] v17 vs v18 update state batch
동일한 코드 사용 import { useEffect, useLayoutEffect, useState } from "react"; export default function App() { const [a, setA] = useState(0); useEffect(() => { setA((a) => { console.log("first useEffect = " + a + "->" + 1); return 1; }); }, []); useEffect(() => { if (a === 2) { setA((a) => { console.log("secont useEffect = " + a + "->" + 3); return 3; }); } }, [a]); useLayoutEffect(() => { setA((a) => ..
[React] 레이아웃 훅 수정이 결제버튼 테스트에 영향을 미치는 이유
얼마 전, 회사에서 흥미로운 디버깅 이슈가 있었다. 우리 팀에서는 프로젝트 내부에서 사용하기 위해 여러 커스텀 훅을 만들어 재사용하고 있는데, 그중 레이아웃을 감지해서 특정 로직을 실행시킬 수 있는 훅이 존재한다. 이 훅은 useEffect훅을 사용하여 유사한 인터페이스를 확장한 커스텀 훅으로, window.innerWidth 감지를 통해 레이아웃을 알려주는 역할을 한다. 간소화해서 윤곽만 나타내면 대충 아래와 같은 형태로 구현되어 있다. (throttle 등은 생략) const useDisplayDetectEffect = (effect: Effect, deps: Deps) => { const callback = useCallback(effect, deps); useEffect(() => { const ..
[React] useCallback의 문제점
React 16.8에서 소개되었던 Hook API 중에서는 useRef는 제외한다면 최적화와 관련된 훅이 2개(useMemo, useCallback)가 있다. Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org 그중에서도 useCallback은 함수를 메모이제이션 하기 위해 사용하는 훅이다. 함수를 메모이제이션 하는 목적은 대개 성능의 최적화이고, 특히 리액트에서는 주로 메모이제이션 컴포넌트의 props로 넘기는 이벤트 핸들러 등의 함수가 불필요하게 재 생성되어 불필요한 렌더링이 일어나지 않게끔 사용한다. 그런데 우리가 useCallback을 사용하는 경우를 생각해보면, 빈 의존성 배열로 사..
[React] 반응형UI에 대처하는 테스트의 자세
반응형 컴포넌트 React를 사용해서 반응형 웹을 만들어 본 사람이라면, 반응형 레이아웃에 대응하기 위해 아래와 같은 컴포넌트(혹은 비슷한 역할을 하는 컴포넌트)를 만들어 본 경험이 있을 거라 생각한다. 예시 1 레이아웃에 따라 렌더링 할 컴포넌트를 분기하는 Switch 컴포넌트 예시 2 children의 노출 여부를 명시하는 Display 컴포넌트 두 컴포넌트의 공통점은 무엇일까? 바로 반응형 레이아웃에 대한 처리를 JSX내부에서 바로 확인할 수 있게끔 컴포넌트화 했다는 점이다. 별도의 스타일 코드로 이동해 확인할 필요가 없고, 직관적으로 어떤 컴포넌트들이 반응형에 따른 분기 처리가 되는지 알 수 있으니 장점이 많다 하겠다. 테스트 코드와 함께 사용 시 발생하는 문제점 하지만 이 컴포넌트는 아쉽게도 테..
[React] Test 환경 구축과 테스트 예제
React Testing 💡 Jest, ReactTestingLibrary로 Testing 환경을 구축했던 경험을 공유한다. 도입 취지 TDD(Test Driven Development)가 아니라도 테스트를 통해 비즈니스의 핵심 로직 검증만이라도 가능하다면, 코드의 리팩토링이나 기능의 추가, 수정 시에 더욱 안정성을 가질 수 있다고 생각되었음. 공통적인 테스트 코드 환경 구축 및 컨벤션이 있다면 최소한의 노력으로 최대한의 효과를 볼 수 있을거라 기대됨. 환경 구축 설치 💡 CRA기준으로는 이미 jest가 설치되어 있고, 다른 툴체인에서는 jest를 설치해준다. 그 외 설치 필요한 항목 yarn add@testing-library/react@types/jest ts-jest @testing-library/..
react hooks 직접 구현해보기
어떤 기술을 맨날 사용하다보면, 스스로가 잘 알고 있다고 착각을 하기 쉽다. 늘 경계하고 '정말 잘 알고 사용하고 있는가? 누구에게 설명할 수 있을 정도로 알고 있는가?' 에 대한 질문을 스스로에게 던지는게 중요한 것 같다. 스스로가 잘 알고 있다고 생각하는 부분은 공부를 소홀히 하게 되기 마련이니까... 오늘은 react hooks 를 간단하게 직접 만들어봤다. 단일 state 및 effect deps를 관리하는 singleton 방식의 react, hooks 배열을 통해 조금 더 실제 react hooks와 비슷하게 구현한 방식으로 만들었다. 첫 번째 예제는 hook의 작동방식과 closer의 연관성에 대해 이해하기에 좋은 것 같고, 두 번째 예제는 'hooks는 마법이 아니라 배열일 뿐' 이라는 말..