[TS+React]기본 문법

props로 객체 전달하기(map 사용 시)

1. 부모 컴포넌트에서 interface를 선언하고 export한다.

export interface postDataType {
	id: number;
    title: string;
}

2. 부모 컴포넌트의 map 매개변수에서 elem 타입을 지정한 뒤, props를 전달한다.

{postData.map((post: postDataType) => {
  return <Poster key={post.id} post={post} />;
})}

3. 자식 컴포넌트에서 interface/type을 destructuring하여 import한다.

import { postDataType } from 'URL';

4. 자식 컴포넌트에서 import한 interface/type을 재선언한다.

interface postProps {
  post: postDataType;
}

5. 컴포넌트 함수의 매개변수에 props를 추가하고 타입을 선언한다.

const Poster = ({ post }: postProps) => {
	console.log(post);
    console.log(post.id);
    
    return <></>
}

---

props로 state 전달하기

1. 부모 컴포넌트에서 interface 또는 <>로 state의 타입 정의하기

interface MyState {
   value: string;
}

또는 
const [state, setState] = useState<Mystate>(초기값) // interface명 또는 내장 타입

2. 자식 컴포넌트에서 Dispatch, SetStateAction import하기

import React, { useState, Dispatch, SetStateAction } from 'react';

3. 자식 컴포넌트에서 props로 전달받을 state 타입 정의하기

//export할 컴포넌트 함수 이전에 interface를 정의한다.

interface MyProps {
   state: MyState // 부모 컴포넌트에서 정의된 해당 state의 interface명 또는 내장 타입
   setState: Dispatch<SetStateAction<MyState>> // state의 타입명
}

4. 자식 컴포넌트의 매개변수에 props와 타입 추가하기

const Login = ({ state, setState }: MyProps) => {} // 자식 컴포넌트에서 선언한 interface명

5. 부모 컴포넌트의 JSX에서 선언한 자식 컴포넌트에 props 추가하기

return <Login state={state} setState={setState} />

---

props로 ref 전달하기

---

fetch requestHeaders 설정

const requestHeaders: HeadersInit = new Headers();
requestHeaders.set('Content-Type', 'application/json');
if (token) {
  requestHeaders.set('Authorization', token); 
  }

fetch(URL, {
    headers: requestHeaders,
  })
    .then((res) => res.json())
    .then((data) => console.log(data));