sohyeon kim

💡 Props 의 타입들을 정해보자. button.tsx import { ReactNode } from 'react'; import styles from './Button.module.css'; interface Props { className?: string; id?: string; children?: ReactNode; onClick: any; } export default function Button({ className = '', id, children, onClick, }: Props) { const classNames = `${styles.button} ${className}`; return ( {children} ); } ❗️ children: ReactNode ❗️ App.tsx input..

💡 프롭스를 더 유연하게 내려보자 ~ UtilityType.tsx import { AddressComponent, PersonChildComponent, ProfileComponent, } from "./UtilityTypeChildren"; export type PersonProps = { id: string; description: string; address: string; age: number; profile: string; }; export const PersonComponent = ({ // ❗️ 다섯가지 타입들 설정 id, description, address, age, profile, }: PersonProps) => { return ( {id} // ❗️ 어드레스만 하나 내려주는 중 );..

💡 타입스크립트를 투두리스트에 활용해 보자. type Todo = { id: string; isDone: boolean; }; function App() { const [todos, setTodos] = useState([]); // Todo 에 세팅은 어떻게 넘길까?! return ( {todos.map(({ id }) => ( ))} ); } function Todo() { return ; } export default App; function App() { const [todos, setTodos] = useState([]); return ( {todos.map(({ id }) => ( // ❗️ 프롭스 넘겨주고 ))} ); } function Todo({ id, setTodos, }: { id: ..

💡 비동기 함수에 타입스크립트를 사용해 보자. fetchingData.ts async function getPerson() { const res = await fetch(`http://localhost:5008/people`); if (!res.ok) { throw new Error(); } return res.json(); } getPerson().then((res) => console.log(res)); ts-node fetchingData.ts 해보면 이렇게 데이터가 나온다. 그런데 지금 가져오는 값은 타입이 정해져 있지 않다. 바꿔보자! 🙋‍♂️ 첫 번째 방법 type Person = { id: number; age: number; height: number }; // 객체 타입을 정해주고 // ..