2022.01.14(Fri.) <React에서 Typescript로 Props 사용하기>

아니, 안돼, 돌아가. 안 바꿔줘

1. 문제의 발단

매일 포트폴리오를 만들고 있다가 메뉴 토글을 만드려고 오픈 핸들러 함수를 자식 컴포넌트로 내리려고 하는 순간, 영문모를 에러들을 만났다. 여러 번 프로젝트를 만들면서 매번 하던 작업이라 실수한 줄 알았지만 아무리 봐도 틀린 건 없고... 에러 메시지를 보니 타입 스크립트가 뭔가 이상하다고 알려주는 것 같아서 구글링 하고 찾아본 결과 답을 찾을 수 있었다.

2. 무엇이 문제인가요?

• 가장 중요한 포인트는 'props를 받는 자식 컴포넌트가 부모에게 받을 props의 형태를 결정 할 수 있다'는 것이다!
• 그래서 더 정확한 데이터 만을 넘겨 줄 수  있다.

3. 어떻게 사용할까요?

• 일단 원래 하듯이 props를 내려주는 부모부터 살펴본다. 상위에서 Menu 컴포넌트로 헨들러 함수를 내려 줄 것이다.

// 먼저 useState를 이용해 상태를 만들고 블리언 타입으로 설정한 후 초기값을 주었다. react와 조금 다르지만,
// 그리 복잡하지 않고 타입을 생략해도 작동하는 것은 문제없다.
const [isOpenMenu, setIsOpenMenu] = useState<boolean>(false);
const openMenuHandler = () => {
        setIsOpenMenu(!isOpenMenu);
};

// react에서 하듯이 이렇게 넘겨준다. 넘겨만 주면 에러가 날 것이다. 받는 쪽을 보자.
return (
	<div>
    	<Menu openMenuHandler={openMenuHandler}/>
	</div>
)

• 이제 진짜 본론인 어떻게 받는가? 이다.

// React 지우면 안된다. 바벨을 만약 쓴다면 필요하다고 한다.
// FC로 function component를 사용 할 수 있게 만든다.
import React, { FC } from "react";

// interface를 이용해 받을 props의 타입을 결정해준다.
interface Props {
	openMenuHandler(): void;
}

// 나머지는 같다.
const Menu: FC<Props> = ({ openMenuHandler }) => {
	return (
    	<div>
        	<div onClick={() => openMenuHandler()}>Open</div>
        </div>
    )
}

export default Menu;

• 이렇게 받는 쪽에서 타입을 정해줘야 받을 수 있다. 다른 데이터 타입도 같다.

4. 추가로 알아보는 type

• 그렇다면, 다른 타입은 어떻게 정해줘야 할까?
• 일단 any로 설정하고 props를 내려본다. 그러면 마우스를 대보면 정확한 타입이 뜨고, 이후 그 타입으로 바꿔주면 된다.
• 사용할 수 있는 타입에는 우리가 기본적으로 쓰는 타입들(ex: Number, Boolean 등)이 있고
• return 값이 없는 위의 예시와 같은 함수들은 void이다.