TIL68. React + TypeScript 기본세팅

리액트 + 타입스크립트 기본세팅방법에 대해 정리해보자.

react + TypeScript(eslint,prettier)

react + ts + prttier에 eslint 설정, airbnb 규칙 적용(tslint대신 eslint설치)
npm i -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier

const Routes = () => { 
return (...)
}
// error: missing return type of function

설치를 마치고, 코드를 작성했더니 함수코드에서 eslint에러가 발생했다.
타입스크립트는 기본적으로 함수에 리턴 형식을 명시해 주어야 하는데,TS를 React와 같이 사용할 때 함수형 컴포넌트는 React.FC라는 형식을 가지게 된다. React.FC를 사용하면 defaultProps가 잘 동작하지 않는 경우가 발생할 수 있다는 글을 읽어서 사용하지 않기로 하고 다른 방법을 찾았다.

-> .eslintrc 파일에
"rules": { "@typescript-eslint/explicit-module-boundary-types": "off" }
위에 코드를 넣어서 해결하였다.

styled-component + typeScript

1. 설치하기

styled-component 설치
npm i styled-component
typescript 타입정의 설치
npm i -D @types/styled-components

2. 스타일 정의하기

보통 테마/전역스타일 분리하여 사용한다. 여기에 더해 테마 타입을 지정하기 위한 파일도 생성한다.

• 스타일타입 모듈: 원하는 테마의 css를 작성하기 전에, type을 정의한다.(src/styles/styled.d.ts)

// styled.d.ts
import 'styled-components';

declare module 'styled-components' {
	//인터페이스명 지정
	export interface DefaultTheme {
		size: {
			mobile: string;
			tablet: string;
			laptop: string;
			desktop: string;
		};

		colors: {
			background: string;
			button: string;
			textWhite: string;
			textLightgrey: string;
			textGrayishyellow: string;
		};
	}
}

• 스타일테마 모듈: 많이 사용하는 css를 변수로 등록하는 theme을 만든다. (src/styles/theme.ts)

// theme.ts
import { DefaultTheme } from 'styled-components';

export const theme: DefaultTheme = {
	size: {
		mobile: 'max-width: 768px;',
		tablet: 'max-width: 1023px;',
		laptop: 'max-width: 1460px;',
		desktop: 'max-width: 1700px;',
	},

	colors: {
		background: '#FFC6C9;',
		button: '#BBE6E6;',
		textWhite: '#FFFFFF;',
		textLightgrey: '#F2F3F4;',
		textGrayishyellow: '#F9F9F3;',
	},
};

• 전역스타일 모듈: 각 브라우저에서 기본으로 설정되어 있는 스타일을 해체하기 위한 css를 말한다. (src/styles/globalStyle.ts)
  *styled-reset: styled-component에 내장된 reset-css로 npm i styled-reset 설치가능하다. 추가로 설정하고 싶은 스타일이나 직접 정하고 싶을 때는 사용하지 않아도 된다.

// globalStyle.ts
import { createGlobalStyle } from 'styled-components';

export const GlobalStyle = createGlobalStyle`
 // 원하는 리셋 스타일 작성하기 

h1 {
  font-family: 'Gamja Flower';
}

 body {
  font-family: Jua, sans-serif;
  outline: none;
  padding: 0;
  margin: 0;
  background-color: #FFC6C9;
} 
// ... 
`

// 최상위 index.tsx에 <GlobalStyle />컴포넌트 추가
import { GlobalStyle } from './Styles/globalStyles';

ReactDOM.render(
	<>
		<GlobalStyle />
		<Routes />
	</>,
	document.getElementById('root')
);

원하는 폰트 두가지를 적용하기 위해 애를 먹었다. index.html에 사용할 폰트 link 태그를 작성해주고, globalStyle.ts에서 사용할 폰트 스타일을 지정해주어서 해결하였다.

    <link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&family=Jua&display=swap" rel="stylesheet">