React-master #4

재밌는데 어려웡..

---

TypeScirpt (2)

State

• state 의 type 을 지정할 수 있다.
• 일반적으로는 초기값을 지정하면 타입스크립트가 자동으로 타입을 유추하기 때문에 굳이 지정해주지 않아도 되지만,
  상태가 undefined또는 null이 될 수도 있거나 객체 또는 배열일 때는 지정해주는 것이 좋다.
• 예시 1) const [ value, setValue ] = useState< number >();
• 예시 2) const [ value, setValue ] = useState< number | string >(null);

Forms

function App() {
	const [value, setValue] = useState("");
    // → 타입스크립트가 자동으로 타입을 유추하므로, string 으로 설정됨.
    onChange = () => {}
	return (
		<div>
        	<form>
            	<input 
                	value={value} 
                    onChange={onChange}
                    type="text" 
                    placeholder="username" 
                 />
                <button>Log in</button>
            </form>
        </div>
	)
}

• input 의 value 를 state 의 value 와 연결,
  onChange 함수 등록!
• onChange 함수에서 원하는건, event 에 접근하는 것

onChange = (evnet) => {};

• 인자에 event 를 넣어줬는데, type 이 'any'로 떴다.
• 진짜 어떤것이든 된다는 'any' type인데, 이 type은 최대한 배제해야한다.
• 따라, 'any' type 이 아니라 typesciprt 에게 type 을 설명해주어야한다.

onChange = (evnet:React.FormEvnet<element>) => {};
// (evnet: React.어디서 오는 이벤트인가?<어떤 element가 이 이벤트를 발생시키는가?>)

• 이렇게!
  (React.js 내에서 타입을 넣는 방법은 구글링 열시미 하쟈)
• 이제, 이 상황에서 어떤 종류의 Element 가 onChange 이벤트를 발생시킬지를 특정할 수 있다.

onChange = (evnet:React.FormEvnet<HTMLInputElement>) => {};

• 그럼 typesciprt가 onChange 함수가 InputElement 에 의해서 실행된다는 것을 알 수 있따.
• 그리고, ReactJs 내에서 타입스크립트를 사용할 때에는 traget이 아니라
  currentTarget 을 사용해야한다.

onChange = (evnet:React.FormEvnet<HTMLInputElement>) => {
	const { cuurentTarget: {value} } = event;
    // 위 코드는 const value = event.currentTarget.value 와 같다.
    setValue(value)
};

• cureentTarget 의 value 를 얻어와서, setValue 에 설정.
• 추가로, Login button을 누르면 Form 에 submit 을 할 수 있는 기능도 넣어보자.

const onSubmit = (event:React.FormEvnet<HTMLForm>) = {
	event.preventDefault();   // 기본 이벤트 제거
    console.log("hello", value);
};
return (
	<div>
    	<form onSubmit={onSubmit}>
        	...

• 짜잔! 이렇게하면 된다!
  
• 굿

Themes

• 타입스크립트와 styled componets 테마를 연결해보자.
• 첫 번째, 아래의 코드로 styled-components 를 설치해야하는데, 나는 이미 설치완료했으니 패스

npm install @types/styled-components

• 두 번째, reate a declaration(선언) file
  
• 위 코드가 포함된 'styled.d.ts' 파일을 만들면된다.

// -styled.d.ts

import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    borderRadius: string;

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

• 이전에 prop 을 위해서 만들었던 인터페이스와 아주 유사.
• DefaultTheme 에 내 테마가 어떻게 보일지를 속성을 설명하면 된다.

// -styled.d.ts

import 'styled-components';

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

• 이렇게 하면 완료!
• theme.ts 파일을 새로 파서 내 테마를 만들어주자!

// -theme.ts

import { DefaultTheme } from "styled-comonents";

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

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

• 이렇게 라이트테마, 다크테마 두개를 만들어줬다!
• 사용해야하니 export 해주는 것 잊지 말긔
• 'index.tsx' 에서 사용해주자.

// -index.tsx

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

• 다크테마 적용해버리기~
• 이렇게하면 ThemeProvider 안에 있는 모든 컴포넌트들은 테마 오브젝트에 접근할 수 있게 되는거다.
• 예를 들어...

// -App.tsx

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

function App() {
	return 
    	<div>
        	<Container>
            	<H1>Protected</H1>
            </Container>
        </div>

}

• 이렇게 만든 Container, H1 두개의 스타일 컴포넌트에서
  언제든지 내 테마에 접근해서 사용할 수 있다 :)

• 다크테마 적용 완~

---

• SyntheticEvent 🚩 https://reactjs.org/docs/events.html

• styled-components 🚩 https://styled-components.com/docs/api#typescript

• 와 타입스크립트.. 미쳤따..ㅎㅎ