#3.4~#3.7 State, Forms, Themes

본 포스팅은 노마드 코더 ReactJs 마스터 클래스를 수강한 뒤, 작성되었습니다.

#3.4 State

TypeScript를 쓰면, useState를 썼을때 해당 변수의 type을 알려줌. (default 값을 기반으로)

예를 들면 다음과 같다.

const [counter, setCounter] = useState(1);

초기값이 1이기 때문에, typeScript는 counter는 number를 가지는 값이라는 것을 알게 됨!

So, number가 X닌 값을 넣으면 오류라고 알려주는 거야

#3.5 Forms

import {useState} from "react";

function App() {
  const [value, setValue] = useState("");
  const onChange = (event: React.FormEvent<HTMLInputElement>) => 
  	const {
      currentTarget: {value},
    } = event;
  	setValue(value);
  };
  
   const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
   event.preventDefault();
   console.log("hello", value);
   };

  return (
    <div>
    	<form onSubmit={onSubmit}>
    		<input
    			value={value}
				onChange={onChange}
				type="text"
				placeholder="username"
			/>
            <button>Log in</button>
		</form>
	</div>
);

#3.6 Themes

이제 Themes를 typescript와 연결하는 것을 해볼것이다.

해야하는 단계는 아래와 같다.

1. styled components와 관련된 라이브러리 설치

npm install @types/styled-components

2. declaration file 만들기 .d.ts
- 파일 이름을 styled.d.ts로 만들기
- 이 파일은 우리가 (1) 통해 설치해둔 index.d.ts 파일을 override함
( ∵ 우리는 지금 themes에 사용할 types를 포함시키고 싶으니까)
- 아래는 우리가 작성해야할 styled.d.ts 파일

import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    // 여기 아래부터가 네 테마가 어떻게 보일지를 설명한 부분
    colors: {
      main: string;
      secondary: string;
    };
  }
}

3. theme.ts 파일 만들기
이제 이 파일에 우리의 테마를 만드는 것
+) 이 테마는 styled.d.ts 속 속성들과 똑같아야함

import { DefaultTheme } from 'styled-components";

const lightTheme:DefaultTheme = {
  bgColor: "white",
  textColor: "black",
};

const darkTheme:DefaultTheme = {
  bgColor: "black",
  textColor: "white",
};

∴우리는 themes의 속성들을 styled.d.ts에 적고, 그 값들을 theme.ts에 적을 수 있게 된 것!!

이렇게 위처럼 작성하면 우리는 이제 index.tsx에 아래와 같은 작성함으로써 themes를 사용할 수 있게 되는거야.

import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "styled-components";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    //이렇게 하면, lightTheme은 theme.ts로부터 오게되는것
  	<ThemeProvider theme={lightTheme}>
  		<App />
  	</ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
);