[리액트] TypeScript의 데이터 타입 지정

Context API를 실습하기에 앞서, Context를 사용하지 않았을 때의 불편함을 이해하기 위해
props로 값을 전달하는 구조의 예제를 먼저 작성했습니다.

index.tsx에서 시작되는 App.tsx 파일에서 컴포넌트를 호출하고,
그 안에서 'Hello World!'라는 문자열 값을 props로 넘겨 하위 컴포넌트들로 계속 전달해 가는 구조를 이해했습니다.

그런데 실습 중 한 가지 궁금했던 점은,
이미 상위 컴포넌트에서 문자열을 넘겨주었는데도 왜 각 하위 컴포넌트마다
interface Props { value: string }처럼 value의 타입을 계속 명시해야 하는지입니다.
JavaScript에 익숙했던 제 입장에서는 조금 낯설게 느껴졌습니다.

import { NonContext } from "./example/Context/NonContext";

function App() {
  return <NonContext></NonContext>
}

export default App;

import { GrandParent } from "../../components/ContextExample/NonContext/GrandParent";


export const NonContext = () => {
  return <GrandParent value='Hello World!' />;
};

import { Parent } from "../Parent";

interface Props {
    value: string;
}

export const GrandParent = ({ value }: Props) => {

    return <Parent value={value} />;
};

🎯 질문 요약

“이미 앞에서 value="Hello World!"라고 문자열로 넘겼는데,
왜 그걸 받는 컴포넌트에서 또 interface로 value: string처럼 타입을 다시 지정해야 하는 거야?”

🔑 핵심 정답 먼저

타입스크립트는 ‘값’이 아니라 ‘타입’을 기준으로 코드의 정확성을 검사하기 때문이야.

즉,

value="Hello World!"는 런타임 시점에 전달되는 "값"이고,

interface Props { value: string }은 컴파일 시점에 타입 검사를 위한 "약속"이야.

📌 왜 interface가 필요한가?

이유 1️⃣: 타입스크립트는 컴파일 시점에 타입 오류를 잡는 언어이기 때문
타입스크립트의 목적은 미리 코드의 타입을 정해서, 에러를 사전에 막는 것이야.
그래서 어떤 props가 오든, “나는 이런 형태로 받겠다”고 명확히 해줘야 해.

✅ 이렇게 하면 컴파일러가:

value가 빠졌는지

value가 문자열이 맞는지

오타는 없는지

자동으로 다 확인해줌!

📌 각각의 컴포넌트는 "나는 value라는 props를 받을 거야!" 하고 스스로 타입을 선언해줘야 돼

왜냐면:

타입스크립트는 파일 간 관계를 모른다고 가정해

Parent는 GrandParent가 value를 제대로 줄 거라는 믿음 없이,
스스로 "나는 value를 문자열로 받을 거야!"라고 타입을 선언해야 해