[TS] 타입스크립트에서의 상태관리

 

event가 발생하면 e:any와 같이 모든 타입을 받을 수 있는 any를 사용해도 되지만

그러면 자바스크립트와 다를 것이 없기 때문에 되도록 사용하지 않도록 한다.

 

React.FormEvent<이벤트 발생시키는 요소>와 같이 타입을 event에 지정해준다.

 

<> 구조 분해 할당에 대해 학습했음.

구조분해할당 : 객체에서 특정 값만 빼오기

밑에서 e.currentTarget은 

{value: "작성한것", type: "text",placeholder= 'username'}

이었는데 거기서 value값만 빼서 사용한 것임.

 

아래는 발생한 event를 받아 사용하는 것을 TS로 나타낸 것이다.

function App() {
  const [name, setName] = useState("");
  const handleName = (e: React.FormEvent<HTMLInputElement>)=>{ 
    
    //any를 최대한 사용하지 않도록 해야한다.
    // 어떤 이벤트를 받는 지 알 수 있음. 그리고 그 이벤트를 발생시키는 요소에 대해서도 알 수 있음.
    // 이렇게 지정 시 이벤트의 모든 속성을 자동완성으로 받을 수도 있음.
    // 이벤트 타입을 지정하기 위해 React.FormEvent 사용
    // 이러한 타입은 구글링으로 
    console.log (e.currentTarget);
    const { value } = e.currentTarget; 
    // 구조 분해 할당
    // 객체에서 원하는 값을 추출하여 개별 변수에 할당하는 JS문법

    console.log(value);
    setName(value);
}  
const onSubmit = (e:React.FormEvent<HTMLFormElement>)=>{
  // FormEvent가 이 이벤트를 만들고 발생 시키는 것임.
  e.preventDefault();
  console.log("hello",name);

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

 

 

 

 

 

 

TS에서 Styled-Components의 Themeprovider 이용하기

 

 

styled.d.ts

import "styled-components"

declare module 'styled-components'{
    export interface DefaultTheme{
        bgColor: string,
        textColor: string;
    }
}

 

테마의 디폴트 타입 값을 설정해준다.

 

theme.ts

import { DefaultTheme } from "styled-components"

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

위에서 설정한 디폴트 타입에 알맞게 테마 옵션을 설정해준다.

 

index.tsx

import { ThemeProvider } from 'styled-components';
import { darkTheme, lightTheme } from './theme';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(

  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
    <App />
    </ThemeProvider>
  </React.StrictMode>
);

위에서 만든 theme을 ThemeProvider를 이용해 App에서 사용할 수 있도록 만들어준다.

 

App.tsx

const Name = styled.div`
    width: 300px;
    height: 100px;
    color: ${props=>props.theme.textColor};
    background-color: ${props=>props.theme.bgColor};
`


<Name>{name}</Name>

위와 같이 ThemeProvider에 바인딩 된 theme을 사용할 수 있다.