[11주차] 2. TypeScript(2)

Typescript

React

Context API 활용

• state context : const context이름 = createContext<State | null>( null );
• dispatch context: const context이름 = createContext<Dispatch | null>( null );

Context 생성 방법

• 1. context 안에서 관리할 값을 위한 type alias 선언
• 2. const context이름 = createContext<typeAlias이름 | null>(defaultValue값(=보통 null));

Provider 컴포넌트 생성

• 1. context 다 작성
• 2. provider props를 type alias로 작성
     type typeAlias이름 = { children : React.ReactNode;}
• 3. Provider 컴포넌트 생성, useReducer 선언
     export function provider이름 ({children} : 앞서 선언한 typeAlias이름){
     useReducer작성
     }
• 4. Provider 컴포넌트 안에서 반환 값으로 stateContext와 dispatchContext Provider 넣어주기
     <stateContext.Provider value = {state}>
     <dispatchContext.Provider value = {dispatch}>{children}</ dispatchContext.Provider>
     </ stateContext.Provider >
• 5. context에서 관리하고 있는 value 값들을 다른 컴포넌트에서 사용하려면 useContext 사용 혹은 custom Hook 만들어서 사용
• 6. App 컴포넌트에서 Provider 컴포넌트로 기존 컴포넌트 감싸기

자바스크립트 환경과 다른 점

• context를 만들게 될 때 generics 문법 설정해줘야 한다.
• custom hook 만들 때 throw error 해야지 사용하게 되는 과정에서 그 custom hook을 언제나 유효하게 사용할 수 있다.

Redux

• yarn add redux react-redux
• 1. reducer이름.ts 파일에 action 생성함수 만들기
• 2. 초기 상태 구현(state와 action 생성함수의 typeAlias, initialState)
• 3. reducer 구현(reducer의 return type도 설정)
• 4. reducer를 export로 내보내기
• 5. index.ts 파일에서 rootReducer 생성
• 6. rootReducer를 export 통해 내보내기
• 7. typeAlias로 type typeAlias이름 = rootReducer 선언후 export 통해 내보내기
• 8. 컴포넌트.tsx 파일 생성
• 9. typeAlias로 컴포넌트 props 타입 선언
• 10. 컴포넌트 생성
• 11. 앞서 선언한 컴포넌트의 컨테이너.tsx 파일 생성
• 12. 앞엇 선언한 컴포넌트의 컨테이너 컴포넌트 생성
• 13. App 컴포넌트에서 return 값으로 컨테이너 컴포넌트 넣기
• 14. yarn start

typesafe-actions

• yarn add typesafe-actions
• createStandardAction = createAction(현재 쓰는 함수)
• createAction(액션타입, 액션을 만들어주는 함수 => (액션생성함수 파라미터) => 액션생성함수({payload값}))

createStandard 관련 이슈

• https://lgphone.tistory.com/16
• https://lemontia.tistory.com/986

reducer 구현 방식

• 리듀서 모듈을 더 깔끔하게
• object map 방식
• method chaining 방식
  • 장점 : 액션의 타입 대신 액션 생성함수를 넣어줘도 작동함

리덕스 모듈 여러 파일로 분리하기

• 관리하는 액션 개수 많아졌을 때(파일이 커지게 되므로) 유용
• 파일이 그렇게 길지 않은 경우 그냥 파일 하나로 작성한다. 파일이 너무 커지고 있을 경우에는 디렉토리를 새로 만들어서 리듀서와 파일 관련된 코드를 따로따로 파일로 분리하여 관리
• 파일을 분리해서 작성하되 하나의 디렉토리에 몰아서 작성, 모든 파일 분리하지 말고 액션 많아질 것 같은 경우에만 분리

Tips

• 설치했던 모듈 라이브러리에서 index.d.ts가 있다면 이라이브러리에서는 자체적으로 타입스크립트를 지원하고 있다는 것을 의미한다. 만약 없다면 yarn add @types/라이브러리이름 으로 설치 가능(타입스크립트 지원 가능해짐, 단 공식적은 아니다.)
• @types 설치(third-part 존재하는 지 확인)가 가능한 라이브러리 검색
  : https://www.typescriptlang.org/dt/search?search=