[데브코스 Day52] 2022.12.27

📖오늘 배운  것

forwardRef

:상위 컴포넌트에서 전달받은 ref를 하위 컴포넌트로 전달하는 역할

 

 

useImperativeHandle

:함수형 컴포넌트에서 forwardRef와 함께 사용할 때 부모 컴포넌트에서 자식 컴포넌트 ref에 설정한 메서드를 사용할 수 있다.

 

부모 컴포넌트에서 ref를 설정해서 자식에게 보낸다.

function Parent() {
  const inputRef = useRef();
  return (
    <div>
      <Input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus</button>
      <button onClick={() => inputRef.current.clear()}>Clear</button>
    </div>
  );
}

 

자식 컴포넌트에서 부모에서 내려받은 ref를 받아서 useImperativeHandle을 이용해서 메서드를 설정할 수 있다. 그러면 부모컴포넌트에서는 이 로직에 대해 몰라도 사용할 수 있다. 

import React, { forwardRef, useImperativeHandle, useRef } from "react";

const Input = forwardRef((_, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    clear: () => {
      inputRef.current.value = "";
    },
    focus: () => {
      inputRef.current.focus();
    },
  }));
  return (
    <>
      Input: <input ref={inputRef} />
    </>
  );
});

export default Input;

 

 

 

 

타입스크립트

장점

1. 타입이 지정되어 있다.

→ 안정성: 컴파일 단계에서 미리 오류를 감지할 수 있다.

→ 가독성: 타입을 보고 무엇을 하는지 미리 알 수 있다.

 

단점

1. 초기 설정을 해야한다.
2. 스크립트 언어의 유연성이 낮아진다.
3. 컴파일 시간이 길어질 수 있다.

 

문법

1. 타입 주석과 타입 추론

• 타입 주석: 변수, 상수 혹은 변환 값이 무슨 타입인지를 나타내는 것을 의미
• 타입 추론: 해당 변수가 어떤 타입인지 추론하는 것. 생략하면 컴파일 타임에 알아낸다.

let a: number = 1; //타입 주석
let b = 2; //타입을 명시하진 않았지만 컴파일 타임에 b의 타입이 number일 것이라고 추론

let c = {a: 1}; //이후에 c.b등으로 값 추가가 불가능해진다.
let d: number[] = []; //number로 타입을 지정했기 때문에 다른 타입의 값은 넣을 수 없다.
let e: 'good' = 'good'; //특정 문자열, 값 등을 타입으로 지정하여 그 값만 쓰도록 강제할 수 있다.
let g: any = 3; //any는 아무 타입이나 넣을 수 있다.

function add(a: number, b:number): number {
return a+ b;
}
//a, b, 리턴 값의 타입을 지정할 수 있다.

 

2. 인터페이스

:객체의 타입을 지정하는 방법. interface라는 키워드로 가능하다.

interface Company {
    name: string;
    age: number;
    address?: string; //선택속성 (Optional)
}

/**인터페이스로 객체를 생성하면 인터페이스에 있는 name, age, address는 무조건 프로퍼티로
*추가해야 한다.
*하지만 address에는 ? 옵셔널이 붙어있으므로 없어도 오류가 나지 않는다.
*/
const cobalt: Company = {
    name: "cobalt",
    age: 3,
    address: "Seoul" //없어도 됨
}

/**익명 인터페이스
*인터페이스를 바로 설정해서 이름없이 사용할 수 있다.
*한번만 사용한다면 익명 인터페이스를 사용하는 것이 적절할 수도 있다.
*/
const person: {
    name: string,
    age?: number
} = {
    name: "Lee",
    age: 100
}

 

3. tuple

:배열을 Tuble로 이용하는 방법

//배열 값의 타입을 지정하여 사용하는 방법
const tuple: [string, number] = ['Lee', 100];

4. enum

:열거형을 사용하는 방법

enum Color {
    RED,
    GREEN,
    BLUE
}

const color = Color.BLUE;
/**enum을 통해서 깔끔하게 사용할 수 있다. 열거된 해당 값들에는 순서대로 숫자가 들어가는데 만약
*숫자가 들어가는 게 싫다면
*/
enum Color {
    RED='red',
    GREEN='green',
    BLUE='blue'
}
//이렇게 커스텀에서 사용할 수 있다.

5. 대수타입

:여러 자료형의 값을 가질 수 있게 하는 방법

→ 합집합 타입과 교집합 타입이 있다.

//합집합 타입
// | 를 기준으로 어느 한 타입에만 속해도 오류가 뜨지 않는다.
let numOrStr: number | string = 1;

//교집합 타입
//두 개의 타입이 둘 다 포함되어야 한다.
let numAndStr: number & string = ''; 
//하지만 number와 string이 둘다 포함된다는 것은 말이 안됨
// -> 원시 타입에서는 사용할 수 없다!
// 인터페이스에서 유용하게 사용 가능

interface Name {
    name: string
}

interface Age {
    age: number
}

let nameAndage: Name & Age = {
    name: 'yoo',
    age: 44
} //Name과 Age 모두 포함되어야 오류가 뜨지 않는다.

type Person = Name & Age;
//type을 사용해서 타입을 만들 수 있다. 그러면 더 편하게 사용 가능
let hee: Person = {
    name: 'hee',
    age: 100
}

 

6. Optional

interface Post {
    title: string;
    content: string;
}

interface ResponseData {
    post?: Post;
    message?: string;
    status: number;
}

const response: ResponseData[] = [
    {
        post: {
            title: 'Hello',
            content: 'How are you?'
        },
        status: 200
    },
    {
        message: 'Error!',
        status: 500
    }
];

console.log(response[1].post && response[1].post.title);
//옵셔널 체이닝이 생기기 이전에는 &&이용해서 값이 있는지 확인. 없으면 undefined 반환
console.log(response[1].post?.title); //post가 없으면 자동으로 undefined 반환
console.log(response[1].post!.title); //느낌표를 사용할 경우 무조건 값이 있다는 의미

 

7. Generic

:하나의 인터페이스로 여러 타입을 이용할 수 있게 하는 방법

interface Value<T> {
    value: T;
}
//Value 인터페이스를 여러 타입으로 사용하고 싶을 때 generic을 이용한다.

const value1: Value<number> = {//꺽쇠안에 원하는 타입을 넣어서 사용하면 된다.
    value: 1
}

const value2: Value<string> = {
    value: '1'
}

//함수에도 사용할 수 있다.
function toString<T>(a: T):string {
    return `${a}`
}

toString<number>(5);
toString<string>('5');
toString('5'); 
//타입을 생략할 수도 있는데 그러면 타입추론이 되서 매개변수의 타입을보고 
//알아서 타입을 추론한다.

 

8. Partial, Required, Pick, Omit

: 기존 interface를 다양한 방법으로 재활용할 수 있게 된다.

interface User {
    id: number;
    name: string;
    age: number;
    address: string;
    createAt?: string;
    updateAt?: string;
}

//Partical 모든 필드를 Optional로 만든다.
const partial: Partial<User> = {}

//Required 모든 필트가 Required가 된다.
const require: Required<User> = {
    id: 1,
    name: 'Lee',
    age: 0,
    address: 'Seoul',
    createAt: '',
    updateAt: '',
}
//createAt과 updateAt은 옵셔널임에도 Required에 의해 필수값이 되었다.

//Pick 특정 필드만 골라서 사용할 수 있다.
//두번째로 받는 필드만 골라서 사용할 수 있다.
const pick: Pick<User, 'name' | 'age'> = {
    name: '',
    age: 100
}

//omit 특정 필드만 빼고 사용할 수 있다.
const omit: Omit<User, 'id' | 'age' | 'address'> = {
    name: '',
}

//name, age, address를 받는데 name만 required로 하고 싶을땐?

const mixed: Omit<User, 'id' | 'address' | 'age' | 'createAt' | 'updateAt'>& Pick<Partial<User>, 'address' | 'age'> = {
    name: '',
    
}

 

9. extends

: 특정 인터페이스를 상속받아 인터페이스를 확장할 수 있다.

interface Time {
    hour: number;
    minute: number;
    second: number;
}

interface DateTime extends Time {
    year: number;
    month: number;
    day: number;
}

interface OffsetDateTime extends DateTime {
    offset: 'number';
}

interface ZonedDateTime extends DateTime {
    zoneId: 'string';
}

interface TimeFormat extends Pick<Time, 'hour' | 'minute'> {
    ampm: 'am' | 'pm';
}

const timeFormat: TimeFormat = {
    hour: 10,
    minute: 30,
    ampm: 'am'
}

 

💭배운 점

타입스크립트를 실제로 사용하는 방법이 어려운 것 같다! 다른 강의를 찾아서 보면서 익혀야 할 듯싶다.