코드캠프 FE 26일차 - TIL(Generic,Cookie/LocalStorage/SessionStorage,basket)

space's pace·2022년 6월 14일

Generic React basket cookie localstorage sessionStorage typescript 리액트 코드캠프

code.camp 프론트엔드 07기

목록 보기

26/37

📔 학습목표

1.타입 >> Generic
2. 브라우저에 저장 >> cookie/localstorage/sessionstorage
3. 비회원 전용 장바구니 >> basket

any 어떤 타입이든 다 됌.
unknown 도 any처럼 다 되는 any보다 안정성을 더 중요시함
(조건을 달아줘야 함 -> 안전하게 작동하도록)

타입스크립트 | Generic

// 타입스크립트 - generic (일반적인 타입)

import { compact } from "lodash"
import { useState } from "react"

// 1. 문자 타입
const getString = (arg: string):string => {
  return arg
}
// 괄호 뒤에 스트링은 리턴값의 타입

const result1 = getString("철수")
// 타입 추론. 


// 2. 숫자 타입
const getNumber = (arg: number):number => {
  return arg
}

const result2 = getNumber(1234)



// 3. any 타입 (그냥 자바스크립트랑 같음)
const getAny2 = (args: any): any => {
  return args + 2;
};
const result3 = getAny2("철수");
const result3 = getAny2(8);
const result3 = getAny2(true);


// 4. any 타입 2
const getAnys = (arg1: any, arg2:any2 , arg3: any):[any,any,any] => {
  return [arg3, arg2, arg1]
};

const result4 = getAnys("철수", true, 8)



// 5, generic 타입 (돌아온 타입을 그대로 사용)
// 인자가 여러개 있을 때 유용
function getGeneric<MyType>(arg: MyType): MyType{
  return arg
}
const aaa: string = "철수"
const bbb: number = 8
const ccc: boolean = true


const result5_1 = getGeneric(aaa)
const result5_2 = getGeneric(bbb)
const result5_3 = getGeneric(ccc)


// 6. generic 타입2
// prettier _ingnore
const getGenerics<MyType1, MyType2, MyType3>(arg1: MyType1, arg2: MyType2, arg3:MyType3):[MyType3, MyType2, MyType1]{
  return [arg3, arg2, arg1]
};
const result6 = getGenerics("철수",true,8)



// 7. generic 축약
// prettier -ignore
function  getGenericsT<T1,T2,T3>(arg1: T1, arg2: T2, arg3:T3):[T3, T2, T1]{
  return [arg3, arg2, arg1]
};
const result7 = getGenericsT("철수",true, 8)

// 8. generic 축약2
// pretiier - ignore
function  getGenericsTUV<T,U,V>(arg1: T,arg2: U,arg3:V):[V,U,T]{
  return [arg3, arg2, arg1]
};
const result8 = getGenericsTUV<string, boolean, number>("철수", true, 8)


// 9. useState에서의 generic
// const [aaa, setAaa] = useState<number>(111);
const [aaa, setAaa] = useState<string>(() => "철수");



// 8. 화살표 함수에서의 generic
// pretiier - ignore
const getGenericsArrow = <T,U,V>(arg1: T,arg2: U,arg3:V):[V,U,T] => {
  return [arg3, arg2, arg1]
};
const result10 = getGenericsTUV<string, boolean, number>("철수", true, 8)

HOF에서 Generic 적용하기

// 1. HOF - 일반 타입
// 함수뒤에 : 하면 리턴타입임
// 리턴function 이름은 별로 중요하지 않음
function firstFunc1(arg1: string) {
  return function secondFunc1(arg2: number) : [string, number] {
    return [arg1, arg2]
  }
}
const result1 = firstFunc1("영희")(8)


// 2. HOF - any 타입
function firstFunc2(arg1: any) {
  return function secondFunc2(arg2: any) : [any, any] {
    return [arg1, arg2]
  }
}
const result2 = firstFunc2("영희")(8)

// 3. HOF - generic 타입
function firstFunc3<T>(arg1: T) {
  return function secondFunc2<U>(arg2: U) : [T, U] {
    return [arg1, arg2]
  }
}
// 타입이 추론된 걸 볼 수 있음
const result3 = firstFunc3<string>("영희")(8)



// 4. HOF - generic타입(화살표함수)
// 자동으로 줄바꿈 x -> prettiert-arrow
const firstFunc4 = <T>(arg1: T) => <U>(arg2: U) : [T, U] => {
    return [arg1, arg2]
}
const result4 = firstFunc4("영희")(8);

// 5. HOF - generic 타입 (컴포넌트에 응용해보기 - HOC)
// 자동으로 줄바꿈 x -> prettiert-arrow
const withAuth = <C>(Component: C) => <P>(props: P) : [C, P] => {
  return [Component, props]
}
const result5 = withAuth("Bbb")({qqq: "철수"});