읽고있는 글
Ultimate React Component Patterns with Typescript 2.8
https://levelup.gitconnected.com/ultimate-react-component-patterns-with-typescript-2-8-82990c516935
@types/{react,reac-dom}
yarn add -D @types/{react,react-dom}
한번에 여러 @types 모듈들을 설치할 수 있다
MouseEvent
JSX Element에 직접 붙는 onClick, onChange, onKeyPress 등과 같은 함수들은 인자로 event 파라미터를 받는다. TypeScript에서는 이 event 파라미터를 타이핑하지 않으면 오류가 난다.
event의 타입은 react에서 제공하는 MouseEvent를 import 하여 사용하면 된다.
import { MouseEvent } from 'react
const onClickHandler = (e: MouseEvent<HTMLElement>) => {};SFC
import { SFC } from 'react'
const Button: SFC = () => {};SFC는 Stateless Function Component를 타이핑 할 때 사용되었는데 현재는 deprecated 되어 사용하지 않는다.
readonly
readonly 제한자는 class property를 읽기만 가능하도록 값을 constant 하게 만든다.
새 값을 할당 하려고 하면 에러를 출력한다.
class Rect {
private readonly width : number;
private readonly height: number;
constructor(width, height) {
this.width = width;
this.height = height;
}
set width(width) {
this.width = width; // ERROR: Left-hand side of assignment expression cannot be a constant or a read-only property.
}
}Readonly
Readonly를 타입으로 사용하면 interface로 타이핑한 값들을 readonly(읽기 전용)로 만들어준다. Readonly를 사용하여 type이나 interface를 선언했다면 한번 정해진 값을 변경 할 수 없다.
type State = Readonly<typeof initialState>Readonly로 state 객체를 지정해주면 좋은 점이 있다.
react에서 state를 변경 할 때, 아래 코드처럼 직점적으로 state를 변경하는 것은 잘못된 방법이다.
이러한 잘못된 state 변경을 컴파일 타임에 에러를 표시하여 예방 할 수 있는 장점이 있다.
this.state.clicksCount = 2
this.state = { clicksCount: 2 }Props 가 없을 경우, generic 작성
보통 컴포넌트 Props, State의 타입을 지정 할 때,
아래와 같이 generic 인자로 선언된 type 혹은 interface를 전달한다.
type Props = {...}
type State = {...}
class ButtonCounter extends Component<Props, State> {...}Props로 전달 받는 것이 없는 경우에는 아래처럼 object를 generic 인자로 전달해준다.
type State = {...}
class ButtonCounter extends Component<object, State> {...}Possibly undefined 문제를 해결하는 3가지 방법
아래 코드는 에러가 발생한다. 이유는 handleClick이 optional이기 때문에 값이 undefined가 될 수 있기 때문이다. 이럴 때 사용 할 수 있는 방법이 3가지 정도 있다.
type Props = { handleClick?: void, children?: ReactNode };
const Button: FC<Props> = ({ handleClick, children }) => {
return <button onClick={handleClick}>button</button>
};Possibly undefined 해결 방안 3가지
1. Bang Operator는 값이 undefined가 되지 않을 것이라는 것을 컴파일러에게 알려준다. 뒤에 느낌표를 붙이기만 하면 된다. onClick={handleClick!}
2. conditional statements/ternary operator를 사용
onClick={handleClick ? handleClick : undefined}
3. 재사용 가능한 withDefaultProps Higher order function을 만들어 사용한다. (글쓴이의 의견으로는 이것이 가장 clean한 방법)
3번은 난이도가 조금 있는 것 같은데 다른 방법으로 defaultProps를 잘 전달해주면 될 것 같다.
유틸리티 타입
유틸리티 타입은 제네릭 타입이라고도 불린다.
Partial: 특정 타입의 부분 집합을 만족하는 타입을 정의 할 수 있다.
interface Person {
name: string;
email: string;
}
type MyPerson = Partial<Person>; // Person interface를 부분적으로
const me: MyPerson = {}; // 가능
const you: MyPerson = { name: 'Dave' } // 가능
const him: MyPerson = { name: 'David', email: 'asdf@naver.com' } // 가능Pick: 특정 타입의 속성들 중 몇개를 선택하여 타입을 정의한다.
interface Person {
name: string;
email: string;
}
type MyPerson = Pick<Person, 'name' | 'email'>; // Person interface 중 name과 email을 선택Omit: 특정 타입에서 특정 속성만 제거하여 타입을 정의한다.
interface Person {
name: string;
email: string;
}
type MyPerson = Omit<Person, 'email'>; // Person interface 중 email은 제외Type Alias
type 키워드로 타입 정의하는 것을 type alias라고 한다
읽고있는 글
TypeScript + React: Why I don't use React.FC
https://fettblog.eu/typescript-react-why-i-dont-use-react-fc/
글쓴이가 React.FC를 사용하지 않는 이유
- React.FC는 함수를 타입한다. function 키워드로 컴포넌트를 만들면 굳이 타이핑 할 필요가 없다.
- helper type을 직접 정의하여 사용한다
- Preact로 이동하기 좋다
- defaultProps를 사용 할 수 없다
읽고 느낀점
defaultProps를 사용하지 않는다면 FC를 사용해도 무방할 것 같다
React.FC를 사용하지 않는 것이 추세라는 이야기도 있다
Image Cropper 프로젝트 수정
타입스크립트 + 리액트 + 리덕스 스택을 공부하면서 기존에 만들었던 프로젝트에 타입스크립트를 많이 잘 못 사용하고 있었다는 것을 알게되었다. 그래서 이를 수정하는 작업을 했다.
interface들을 모아 하나의 d.ts 파일에 저장하여 보관 해 보려 했는데 한 곳에 보관한다면 interface를 수정하는 작업에서 파일 이동이 잦아 오히려 복잡하게 될 것 같았다. 결국 기존처럼 각각의 파일에 interface를 가지고 있는 방식으로 유지하기로 했다.
d.ts
d.ts 파일은 타입 추론을 돋는 파일
시청하고 있는 동영상
React | Mobile First Responsive Web Dev Using Styled Components
https://www.youtube.com/watch?v=zh_txwAPVf0
영상에서는 CSS in JS 라이브러리 styled-components를 사용하여 반응형 디자인을 하였다.
media 정보를 담은 객체를 만들어 desktop, mobile 등 화면 크기를 정의하여 style 작성에 변수로 사용하는 방식이었다.
import styled from 'styled-components';
const media = {
desktop: '@media(min-width: 1000px)'
}
export const ContentWrap = styled.div`
...
${media.desktop} {
display: flex;
...some styles
}
`;읽은 velog 글
React에서 TypeScript 적용하기 & 오류 해결하기
https://velog.io/@dosilv/TypeScript-React%EC%97%90%EC%84%9C-TypeScript-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0
useRef null 처리
useRef를 사용 할 때, 렌더링이 끝나기 전에는 null로 할당되기 때문에 null 처리가 필요하다.
Optional chaining(?.) 을 사용 할 수도 있고 Type Assertion을 사용 할 수 있다.
Optional chaining
.? 앞 부분이 null 혹은 undefined라면 그대로 null, undefined를 리턴, 아닐 경우에만 뒤에 이어지는 코드를 실행한다. (ES2020 문법)
하지만 할당 연산자 (=) 왼쪽에서는 사용 할 수 없다.
Type assertion
확실한 상황에서 타입을 강요하는 것이다. as를 사용하여 확실히 단언 할 타입을 표현해도 되고 null이 아니라는 것만 체크해주면 된다면 non-null assertion (!, bang operator)를 사용해도 된다.
styled-components props typing
generics로 props 타입을 전달하면 된다.
interfact Props {...};
const MyComponent = styled.div<Props>`...`;오늘 공부 평
이론적으로 새로 알게된 내용을 가지고있던 프로젝트에 사용해보면서, React + TypeScript + Redux 스택에 점점 익숙해지고 있다.
새로운 정보
react-responsive: 반응형 디자인을 도와주는 라이브러리, 추후에 이 라이브러리를 사용하여 모바일, 데스크톱 모두 호환되는 프로젝트를 만들어 봐야겠다.
React Query: 아직 무엇인지 모름
유용한 링크
우아한 테크 페이스북 페이지 - 프론트엔드 인사이트, 이벤트, 강연 정보 등
https://www.facebook.com/woowahanTech/?ref=page_internal
다음 읽어 볼 글
React-Query 살펴보기
https://maxkim-j.github.io/posts/react-query-preview 다음 읽어 볼 글
신청한 세미나
우아한테크세미나 - 시각적 요소 테스트 자동화하기 - 2021.1.27(목) 저녁 7시~9시
다음 공부 할 주제 정하기
후보
PWA, Next,js, 반응형 만들어보기, MobX, Redux-saga, Redux-toolkit, Image Cropper 프로젝트하기
redux-toolkit, redux-saga, redux-thunk 등에 대한 지금보다 깊은 이해가 가장 필요한 것 같다. TypeScript 를 함께 사용하는 방법에 대해 공부하면 좋을 것 같고 기타 다른 redux middleware들에 대해서도 알아보면 좋을 것 같다.
react-router 에 대한 깊은 이해를 하는 것도 좋을 것 같다.
PWA, react-responsive, MobX, Image Cropper 프로젝트는 당장에 급한 것은 아닌 것 같아 다음으로 미루어야겠다.
