[TypeScript]나만 보는 TypeScript 기초 메모장(컴포넌트 간 요소 전달 (Props)와 interface의 역할)

React에서 컴포넌트 간에 데이터를 전달할 때 Props(속성)

interface는 이 Props의 구조(타입)를 정해주는 역할

interface의 역할

interface MemoItemProps {
    task: string; //내용
    index: number; //해당 할 일의 배열 내 위치(인덱스)
    onDelete: (index: number) => void; //삭제함수(인덱스를 전달받아야 함)
}

interface는 MemoItem 컴포넌트가 받아야 하는 props의 형태를 정의하고 반드시!! task, index, onDelete라는 3가지 값을 꼭 넘겨야함.

onDelete: (index: number) => void;를 쓰는 이유

1. onDelete가 어떤 타입의 함수인지 미리 정의(onDelete는 index: number를 받고, 반환값이 없는(void) 함수)
2. 타입 체크
3. 코드 가독성을 높임

MemoPad에서 MemoItem으로 데이터 전달 (Props 활용)

MemoPad 컴포넌트

const MemoPad: React.FC = () => {
  const [tasks, setTasks] = useState<string[]>([]);
  const [input, setInput] = useState<string>("");

  const deleteTask = (index: number) => {
      const newTasks = tasks.filter((_, i) => i !== index);
      setTasks(newTasks);
  };

  return (
    <div>
      <input 
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="추가"
      />
      <button onClick={addTask}>추가</button>
      <ul>
          {tasks.map((task, index) => (
            <MemoItem task={task} index={index} onDelete={deleteTask} key={index} />
          ))}
      </ul>
    </div>
  );
};

핵심

• onDelete={deleteTask}

onDelete 함수는 deleteTask를 전달.

• MemoItem이 받아야 하는 props를 모두 전달했으므로 TypeScript 오류 없이 사용 가능.

MemoItem에서 받은 Props 사용

MemoItem 컴포넌트

 

const MemoItem: React.FC<MemoItemProps> = ({ task, index, onDelete }) => {
    return (
        <li className="task-item">
            <h4>{task}</h4>
            <button onClick={() => onDelete(index)} className="delete-button">
                삭제
            </button>
        </li>
    );
};

핵심

MemoItemProps를 통해 task, index, onDelete가 props로 들어옴.
task: 내용.
index: 인덱스.
onDelete: 삭제함수.
버튼 클릭 시 onDelete(index)를 실행해서 특정 인덱스를 삭제

Props 전달 흐름 정리 (데이터 흐름)

MemoPad (부모 컴포넌트)

• 상태 tasks 관리
• deleteTask 함수를 생성 (특정 인덱스 요소 삭제)
• MemoItem을 여러 개 만들면서 task, index, onDelete를 props로 전달

MemoItem (자식 컴포넌트)

• task (할 일 내용), index (인덱스), onDelete (삭제 함수)를 props로 받아서 UI 구성
• 버튼 클릭 시 onDelete(index)를 실행하여 부모 컴포넌트의 deleteTask 호출 (tasks 업데이트)

핵심 정리

 

1. interface는 컴포넌트가 받을 props의 타입을 정의하는 역할.
2. 부모 → 자식으로 데이터를 전달할 때 Props를 사용.
3. tasks.map((task, index) => ( <MemoItem /> ))을 사용하여 여러 개의 MemoItem을 동적으로 렌더링.
4. 자식 컴포넌트에서 버튼 클릭 시, onDelete(index)를 실행 → 부모의 deleteTask 함수가 실행되면서 해당 요소가 삭제됨.

 

데이터 흐름

1. 부모(MemoPad)에서 MemoItem 생성 → onDelete 함수(= deleteTask) 전달
2. 자식(MemoItem)에서 버튼 클릭 → onDelete(index) 실행 (index 전달)
3. 부모(MemoPad)에서 deleteTask(index) 실행 → tasks에서 해당 요소 삭제 → 상태 업데이트(setTasks)
4. React가 상태 변화를 감지 → 리렌더링 발생 → 삭제된 요소가 사라진 새로운 MemoItem 목록이 렌더링