[React/리액트] TypeScript 에서 props 넘겨주기

처음 리액트 + TS 를 사용했을 떄 곤란했던 부분 중 하나였다. 

props의 타입 설정해주기.....

하나하나 설정해주어야 하나? 라는 생각도 들었는데, 결론부터 말하자면 하위 컴포넌트에서 props의 타입을 정의하는 interface를 생성해 주면 된다. 

 

props 타입 지정해주기

//App.tsx
const age = 25;
const name = 'p1su';

return(
  <Child age={age} name={name}/>
)

부모 컴포넌트에서 age 와 name을 props로 넘겨주고 있다. 

자식 컴포넌트에서는 props의 요소들에 대한 타입을 지정해주어야 한다. props는 객체 형식으로 전달되기 때문에, interface를 활용하여 정의하면 되겠다 !

 

//Child.tsx
interface ChildProps {
  age: number;
  name: string;
}

const Child = ({ age, name }: ChildProps) => {
.
.
.
};

props는 구조 분해 할당으로 작성해주었고, ChildProps라는 인터페이스를 생성하여 타입을 지정해주었다. 

 

또 다른 예시이다. 

export interface Todo{
  id: number;
  todo: string;
  date: string;
  isChecked: boolean;
}

투두 리스트에 필요한 요소들의 타입을 정의한 Todo interface 이다. 

Todo 형식은 여러 곳에서도 사용되기 때문에, export를 통하여 내보내주었다.

추가적으로 여러 곳에서 반복적으로 사용되는 타입은 type 폴더를 생성하여 관리하는 것도 좋은 방법이다.

 

const [values, setValues] = useState<Todo[]>([]);

Todo값을 나열할 것이기 때문에, values는 Todo 타입의 요소를 갖는 배열이다. 

여기서 Todo[] 는 Todo 객체를 요소로 갖는 배열이다. 배열의 각 요소는 Todo interface 의 형식과 동일해야 한다.  

 

//App.tsx
<Editor values={values} setValues={setValues}/>

values와 setValues를 넘겨준다..!

 

//Editor.tsx
import type { Todo } from '../../App';

interface EditorProps {
  values: Todo[];
  setValues: (value: Todo[]) => void;
}

const Editor = ({ values, setValues }: EditorProps) => {

 

Todo 형식을 import 해와서 타입을 지정해주었다. 

setValues와 같이 함수를 props로 지정해주는 경우, parameter의 값과 반환값의 타입까지 지정해주면 된다. 

 

children 타입 

children의 경우 ReactNode로 타입을 지정해주는 것이 보편적이다. 

//App.tsx
<Item
	name='p1su'
	age=25
>
	어쩌구저쩌구
</Item>

//Item.tsx
interface ItemProps {
	name: string;
	age: number;
	children: ReactNode;
}

const Item = ({ name, age, children }: ItemProps) => {
 return(
	 <>
	 </>
 );
};