2023-04-17 월요일

📅 오늘 한 일

1. 프로그래머스 문제 풀이

2. 타입스크립트 공부

✏️ 무엇을 배웠나

1. 리액트에서 props 타이핑하는 방법

props의 데이터 타입은 객체다. 타입스크립트에서 객체의 타입을 정의할 때 type과 interface를 고려해볼 수 있는데, 가능하다면 interface를 사용하는 게 낫다.

why?

• 확장이 가능함 (type은 확장 불가)

// props를 받는 컴포넌트에서 정의해줌
interface propsName {
	propertyName: string;
}

// React.FC를 사용해 Title 컴포넌트가 받는 props를 정의
const Title: React.FC<TitleProps> = ({ title }) => {
  return <S_Title>{title}</S_Title>;
};

function 키워드를 사용해서 선언하는 일반 함수형 컴포넌트에서도 React.ReactNode를 사용해 children을 정의할 수 있으나, 나는 화살표 함수를 사용해 컴포넌트를 선언했고 React.FC에 children이 기본적으로 포함되어 있기 때문에 이를 사용했다.

찾아보니 의견이 분분한 것 같은데, 어떤 게 더 좋은지는 지금 상황으로서는 잘 판단이 안 된다.

2. 리액트에서 event 타이핑하는 방법

이벤트 타입을 정의하기 위해서는 2가지를 기억하면 된다.

1. 어떤 이벤트인가
2. 어떤 요소에서 발생하는가

이번 케이스에서는 input 태그에서 발생하는 change 이벤트였다. 아래 코드와 같이 정의했다.

const handleSizeChange = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.value === 'mobile') {
      setPreviewSize({ width: '40%', height: '600px' });
    } else {
      setPreviewSize({ width: '100%', height: '80%' });
    }
  };

Tip : React.으로 시작해서 자동완성 옵션을 보면 리액트 안에서 각각 정의되어 있는 이벤트 목록을 확인할 수 있음