10월 5주차 기록

November 3, 2024 • ☕️ 4 min read

weekly

배워가기

함수 컴포넌트의 변수 선언과 클래스 컴포넌트의 변수 선언

클래스 컴포넌트: 인스턴스 변수 (this.myVariable)로 선언하면, 재렌더링이 되어도 값이 유지된다.
함수 컴포넌트: 단순 변수 선언 시 재렌더링 시 값이 초기화된다. useRef를 사용하면 값이 유지된다. useState를 사용하면 변수 변경 시 컴포넌트를 재렌더링할 수도 있다.

이 당연한 걸 까먹고 몇 시간째 디버깅하고 있었다니 🤦‍♀️

react-router의 loader

react-router의 loader를 이용하면 리액트 컴포넌트를 렌더링하기 전에 데이터 페칭을 실행할 수 있다.

Copy

{
  path: '/support-workflow/:id',
  loader: async ({ params }) => {
    const result = await getSupportWorkflow({ id: params.id as string })
    return result.data
  },
  element: <SupportWorkflowEdit />,
},

컴포넌트에서는 useLoaderData 훅을 이용하면 된다.

Copy

const data = useLoaderData()

이것저것 모음집

git rebase —onto - rebase할 기준이 되는 브랜치를 변경할 수 있다. (Ref)
<iframe> 요소의 srcDoc 어트리뷰트 - HTML 컨텐츠를 문자열 형태로 전달한다. (Ref)

기타공유

`ts-pattern`

Copy

import { match, P } from 'ts-pattern';

type Data =
  | { type: 'text'; content: string }
  | { type: 'img'; src: string };

type Result =
  | { type: 'ok'; data: Data }
  | { type: 'error'; error: Error };

const result: Result = ...;

const html = match(result)
  .with({ type: 'error' }, () => <p>Oups! An error occured</p>)
  .with({ type: 'ok', data: { type: 'text' } }, (res) => <p>{res.data.content}</p>)
  .with({ type: 'ok', data: { type: 'img', src: P.select() } }, (src) => <img src={src} />)
  .exhaustive();

Type-Safe 패턴 매칭: TypeScript의 타입 시스템을 활용하여 각 패턴에 대해 타입을 정확히 추론한다. 잘못된 매칭이나 누락된 패턴에 대해 컴파일 타임에 에러를 발견할 수 있어 안전한 코드를 작성할 수 있다.
가독성: 여러 가지 조건을 간결하게 작성할 수 있어 기존의 if-else 또는 switch 문에 비해 코드가 훨씬 읽기 쉬우며, 가독성이 높아짐으로써 유지보수에도 용이하다.
복잡한 분기 처리 간소화: 복잡한 객체나 데이터 구조를 다루는 경우에도, 객체나 배열의 특정 속성을 기반으로 분기 처리를 쉽게 할 수 있다. 특히, 다차원 배열이나 중첩된 객체 구조에 대한 분기 처리가 깔끔해진다.
코드 중복 감소: 중첩된 if-else 블록에서 발생하는 코드 중복을 제거할 수 있으며, 각 조건에 대한 처리 로직을 분리해 유지보수가 쉬워진다.
추가 기능: ts-pattern은 객체 해체, 값 비교, 조건부 매칭, wildcard 매칭 등 다양한 패턴 매칭 기능을 제공한다.

👩‍🏫 성능 이슈가 있으니 정말 필요한 경우에만 사용하자. Ref: https://toss.tech/article/ts-pattern-usage

Flow의 component와 hook

Copy

import * as React from 'react';

hook useOnlineStatus(): boolean {
    return true;
}

component StatusBar() {
  const isOnline = useOnlineStatus();
  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
}