[TIL]231022

styled-component 커스텀 변수 내리기

theme을 이용하여 컬러를 전역으로 선언하기

• theme.ts

import { DefaultTheme } from 'styled-components';

export const theme: DefaultTheme = {
  redLightColor: '#fdeded',
  redLightHoverColor: '#fce3e4',
  redLightActiveColor: '#f8c6c7',
  redNormalColor: '#ea464a',
  redNormalHoverColor: '#d33f43',
  redNormalActiveColor: '#bb383b',
  redDarkColor: '#b03538',
  redDarkHoverColor: '#8c2a2c',
  redDarkActiveColor: '#691f21',
  redDarkerColor: '#52191a',
  whiteColor: 'FFFFFF',
  blackColor: '070707',
  greyColor: 'DFDFDF'
};

main.tsx에 theme를 두었는데 안됐다가 GlobalStyle과 같은 구간에 두니 색상 적용이 잘된다.
index와 main에서 둘다 렌더링을 수행하고 있었기에 문제가 있었다. Router를 다른 컴포넌트로 분리하고 작업한다.

뒤로가기

<div
    onClick={() => {
      navigate(-1);
    }}
 >

-1로 값을 넣어주면 뒤로가기가 가능해진다.

Typescript 필수가 아닐경우

interface Props {
  children?: string;
}

?로 선언해주면 값이 꼭 들어오지 않더라도 상관이 없다.

React-query

https://tanstack.com/query/latest/docs/react/guides/query-keys
최근 문서에서는 query를 사용하기 위해서는 명확하게 지정해주어야 한다.

function Todos({ todoId }) {
  const result = useQuery({
    queryKey: ['todos', todoId],
    queryFn: () => fetchTodoById(todoId),
  })
}