1.2 React masterClass

hun2__2·2022년 1월 2일
0

Have a fruitful vacation

목록 보기
7/24

이번에는 typescipt에 대해서 공부했다.
typescript를 간단하게 설명하자면 javasciprt + type인 언어로 JS의 superset이다.
js의 장점이자 단점은 type의 정의가 필요없다는 점이다. js에서 알아서 변환하기 때문에 디버깅시에는 알 수 없는 에러의 주 원인이기도 하다
예를들어 사용자에게 string을 기대하고있지만 사용자가 number를 입력한다면 코드에서는 잘 작동했어도 전혀 다른 결과가 나오게된다.
그래서 JS의 밈중 하나인

절대로 유저를 믿지 마라!

가 탄생한 것이다.

하지만 typescript를 사용하게 된다면 코드를 작성할때 type을 명시해주기때문에 많은 잠정적 오류들을 사전에 검증할 수있다. 또한 오타로인한 잘못된 속성값을 지정해주면 지정안된 속성값이므로 바로 오타를 잡아준다!!
마지막으로 지정한 속성값을 사용할 때 자동완성시켜주는거 개좋다,,,,,

이번에 배운 TS를 이용해서 winter를 TS로 수정해봐야겠다

먼저 TS를 사용하기 위해서는 크게 두가지 설치법이있는데

  1. CRA할때 TS설치
    create-react-app을 할때 TS템플릿을 같이 설치하여 미리 typescript를 쓸 것이라고 말하며 설치해주는 것이다.
npx create-react-app my-app --template typescript

# or

yarn create react-app my-app --template typescript
  1. 이미 짜여진 JS에서 TS설치
    이미 JS로 작업중인 파일에서 TS를 설치해 바꿔주는것이다. 이를 위해 TS를 위해 필요한 것들을 따로 설치해주고
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

# or

yarn add typescript @types/node @types/react @types/react-dom @types/jest

JS(or JSX)로 되어있는 파일 확장자를 모두 TSX로 바꿔준다.

그리고 tsconfig.json에 TS에서 JS로 바꿀때 어떻게 할 것인지 들 TS에 대한 설정을 해준다.
(출처:
https://codingapple.com/unit/typescript-tsconfig-json/
https://www.typescriptlang.org/tsconfig
)

그러면 ㅈㄴ많은 에러를 보게될것이다
이제 하나씩 수정해보자
먼저 강의내용과는 다르게 react에서 import해올때 TSX로 확장자를 바꾸니 error가 생겼다.

구글링결과 *로 받아오면 해결이되었다.
(출처: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33097)

이제 styled-component에도 TS를적용해줘야하는데 왠만한 모듈들은 DefinitelyTyped에 있으면 이미 다 type 변환이 완료 된것이다 styled-component도 이 안이있었으며

yarn add --save-dev @types/styled-components

를 설치해여 해결했다.

이제 현재 props들에 type을 설정해줘야하는데 먼저
두가지 타입이있다. 필수로 존재해야하는 props와 있어도되고 없어도 되는 props로 나눌수있는데 전자는 ':'로 타입을 지정하고 후자는 '?:'로 지정해주면 된다.

이제 타입을 지정할 것이다.
타입을 지정해줄 때는 interface를 사용하여 타입을 설정하고 prop뒤에 interpace를 적어 prop의 타입을 명시해준다.

같은 방식으로 styled-components도 작업해준다.

TS를 이용하면 useState를 사용할때 default값으로 타입이 지정된다
예를들어

const [count, setCount] = useState(0);

라는 코드를 적으면 count의 type은 number가 되고 setCount의 type 은 React.Dispatch<React.SetStateAction< number >>가 된다.

이후에 count, setcount를 사용할때 number가 아닌 값을 사용하게 된다면 error가 뜨며 오작동을 방지해준다.

state의 타입을 여러개로 하고싶다면 생성시

const [value, setValue] = useState<number|string>(0)

이런식으로 작성해서 state의 타입을 여러개로 지정해 줄 수 있다.

이제 styled-component의 Theme과 TS를 연결해볼것이다.
여기서는 설정해줘야 할 것이 있는데 styled-component를 TS에게 알려주는 것이다. 이전에 설치했던 @types/styled-components 를 확장해주는 것이다 저거를 설치하면서 이미 index.d.ts라는 파일이 생겼지만 theme을 사용하기 위해서 styled.d.ts라는파일을 만들고 작성해주면 index.d.ts에 override(덮어쓰기)되면서 styeld.d.ts의 설정값이 추가된다

// styled.d.ts 파일
// import original module declarations
import "styled-components";

// and extend them!
declare module "styled-components" {
  export interface DefaultTheme {
    textColor: string;
    bgColor: string;
    // borderRadius: string;

    // colors: {
    //   main: string;
    //   secondary: string;
    // };
  }
}

이제 theme.ts 를만들어서 테마를 만들어준다.
속성값을 지정해 줄것인데 이때 styled-component에서 DefaultTheme을 이용하여 값이 지정된다.

이제 theme를 사용할 곳에서 styled-component가 제공하는 themeProvider로 감싸주고

//app.tsx

import { ThemeProvider } from "styled-components";
import Home from "./Home";
import { lightTheme, dartTheme, blueTheme } from "./theme";

function App() {
  return (
    <Flex>
      <Form />
      {/* // ! Theme을 사용하려는 component를 ThmeeProvider로 감싸준다. */}
      <ThemeProvider theme={lightTheme}>
        <Home />
      </ThemeProvider>
      <ThemeProvider theme={dartTheme}>
        <Home />
      </ThemeProvider>
      <ThemeProvider theme={blueTheme}>
        <Home />
      </ThemeProvider>
    </Flex>
  );
}

theme을 사용하는 곳에서 prop.theme.[key]으로 사용해주면 된다

// Home.js
//! import styled from 'styled-components'와 같은 뜻
const { default: styled } = require("styled-components");

const Container = styled.div`
  background-color: ${(props) => props.theme.bgColor};
`;
const H1 = styled.h1`
  color: ${(props) => props.theme.textColor};
`;

const Home = () => {
  return (
    <Container>
      <H1>hello</H1>
    </Container>
  );
};

export default Home;

완성화면

와,,,, 개쩐다......

이제 나도 typesciprt로 winter에 다크모드, 라이트모드 등 원하는 모드 만들 수 있다!!!!!!!!!!! 바로 적용해봐야지ㅎㅎ
(참고 : https://styled-components.com/docs/api#typescript)

ps.
TS에대한 정리가 어느정도 되었다 이제 TYPE명시 어디서 타입 찾는지 어디서 사용하는지 등 여러가지를 배웠지만
강의를 다 듣고 직접 해보니 생각보다 많은 에러를 마주친다ㅎ,,, JS로 짰으면 진작에 구현되었을 법한 것들이 type에서 애를 먹는다ㅜㅜ 하지만 TS에 익숙해지면 정말 편리하고 강력해질것같다!! 이번방학때는 최대한 TS로 짜서 익숙해져야겠다ㅎㅎ
간단하게 버튼태그에 onClick 이벤트로 테마를 변경하는 코드를 짜보려고 했지만 생각보다 쉽지않다ㅎㅎ,,
어찌저찌 event의 타입은 찾아서 했는데 value값에 왜 0을 넣었는데 string으로 되는지... Number(value)를해도 왜 형변환이 안되는지... 어렵다 어려워...
결국 boolean값으로 state를 만들어서
2가지 모드만 변경가능하도록 하였다ㅜ 생각보다 어렵고 시간도 꽤걸리지만 JS보다 안정성, 에러를 찾아주는 측면에서 훨씬 좋으니깐 열심히 연습해보자!! TS사용자도 점점 많아지고 익혀두면 매우 도움되는 기술일것 같다ㅎㅎ 더 나아가 내가 생태계에 도움이 될만한 라이브러리를 추가할 기회도있고!! ㅎㅇㅌㅎㅇㅌ

profile
과정을 적는 곳

0개의 댓글