[리액트] 타입스크립트(.tsx)에서 콤포넌트 간 속성값 주고받기.

TSX문법을 사용하면 JSX코드를 그대로 사용하지 못하는 경우가 있다.

 

 

콤포넌트에 속성을 할당하려 하였다.

그러나 '타입이 곤란하여 할당 할 수 없습니다.' 라는 에러가 발생하였다.

 

TSX에서 콤포넌트 간 속성값 주고받는 법을 알아보겠다.

 

1. 콤포넌트 타입선언

콤포넌트를 만들 때 해당 콤포에서 props로 사용코자 하는 모든 속성의 이름과 타입을 선언해주어야 한다.

// MonthSelector.tsx
...
export interface Props {
    selectedYYYYMM: string;
}
...

 

 

2. 콤포넌트 매개변수에 사용할 props를 타입과 함께 선언한다.

// MonthSelector.tsx
...
const MonthSelector = ({ selectedYYYYMM }: Props) => {
	console.log(`Selected month: ${selectedYYYYMM}`);
	return ( ... );
};
...

매개변수로 props객체의 키값 selectedYYYYMM를 적어주고,

타입은 미리 선언한 Props 인터페이스로 넣어주었다.

 

※ 함수 파라미터 ({ selectedYYYYMM }) => ... 의 의미:
var selectedYYYYMM = props.selectedYYYYMM;랑 비슷하다.

(전문용어: Object destructuring.)

 

 

3. 컴포넌트 호출 시 선언된 타입값을 props 속성으로 넣어준다.

// Calendar.tsx
const Calendar = () => {
    const currentYYYYMM = '202203';
    return (
        <div>
            <MonthSelector selectedYYYYMM={selectedYYYYMM} />
            <CalendarBody />
        </div>
    );
};

 

 

에러가 사라지게 되었다.