[React] 제네릭(generic)

function add(a: number, b: number) {
  return a + b;
}

function printOutput(value: any) {
  console.log(value);
}

함수에서 아무것도 반환하지 않으면 (return문이 없으면) 반환타입 void를 사용한다.

void는 null 또는 undefined랑 비슷하지만 항상 함수와 결합해서 사용한다는 특징이 있다.

 

제네릭(generic)

function insertAtBeginning<T>(array: T[], value: T) {
  const newArray = [value, ...array];
  return newArray;
}
// 이 함수가 있으면 호출하기만 해도 기존 배열은 유지한 상태로 새로운 값을 추가할 수 있다.
// 이 함수의 장점: 기존배열을 변경하지 않는다, 대신 새로운 배열을 얻는다.

const demoArray = [1, 2, 3];
const updatedArray = insertAtBeginning(demoArray, -1);

// updatedArray[0].spilt("");

제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다.

 

리액트와 타입스크립트로 함수형 컴포넌트를 만드려면 

1. React.FC 타입을 함수형 컴포넌트의 상수 옆에 사용한다.

import React from "react";

const Todos: React.FC = (props) => {
  return (
    <ul>
    	
    </ul>
  )
}

export default Todos;

2. <> 홀화살괄호를 붙인 다음 괄호 사이에 필요한 형태의 props를 정의한다.

    cf) 컴포넌트에 직접 만든 props가 필요하다면. 그리고 컴포넌트 안에서 직접 만든 props를 사용한다.

import React from "react";

const Todos: React.FC<items:string[]> = (props) => {
  return (
    <ul>
    	{props.items.map((item) => (
          <li key={item}>{item}</li>
          ))}
    </ul>
  )
}

export default Todos;

 

위의 코드 내 <li></li>구문을 컴포넌트로 쪼갠다면?

 

먼저 text만 받아올 경우,

받아오는 타입을 지정해줘야 한다. text: string

const TodoList: React.FC<{text:string}> = (props) => {
	return <li>{props.text}</li>;
};

export default TodoItem;

import TodoItem from "./TodoItem";

const Todos: React.FC<{ items: Todo[] }> = (props) => {
  return (
    <ul>
      {props.items.map((item) => (
        <TodoItem key={item.id} text={item.text} />
      ))}
    </ul>
  );
};

 

만약 Todo 객체 전체를 받는 방법을 사용한다면,

 

import Todo from "../models/todo";

const TodoItem:React.FC<{todo: Todo}> = (props) => {
    return <li>{props.todo.text}</li>
}