[React][TypeScript] type Props 적용해보기 (with interface, required props)

--------------------App.tsx--------------------
import Circle from "./Circle";

function App() {
  return (
    <div>
      <Circle bgColor="teal"/>
      <Circle bgColor="black"/>

    </div>
    
  );
}

export default App;
--------------------App.tsx--------------------


--------------------index.tsx--------------------
import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "styled-components";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>

      <App />

  </React.StrictMode>,
  document.getElementById("root")
);
--------------------index.tsx--------------------

--------------------Circle.tsx--------------------
import styled from "styled-components"

interface ContainerProps {
    bgColor : string;
}

const Container = styled.div<ContainerProps>`
    width: 200px;
    height: 200px;
    background-color: ${props=>props.bgColor};
`;

interface CircleProps {
    bgColor : string;
}

function Circle({bgColor} : CircleProps) {
    return <Container bgColor = {bgColor}/>
}

export default Circle; 
--------------------Circle.tsx--------------------

위 코드를 보면 Circle 컴포넌트에서 props를 사용하고있다. 

Circle.tsx 에서 props를 정의하기 위하여 interface를 사용하였고, 받은 props를 Container에 적용하고 위하여 Container에도 interface를 사용하였다. 

이로 인해서 App.tsx에서 props를 전달할 수 있게 되었고, Circle.tsx에 정의하지 않은 것들에 대해서는 오류를 검출해준다. 

(여기에서 interface는 object를 설명해주는 것을 말한다.)

위 코드에서는 styled-component 와 component의 props가 같은데 대부분의 경우는 다를 것 이다.

 

interface에 대해서 예시를 코드를 하나 보자면

sayHello 라는 const에 interface를 지정함으로써 이것을 사용하기위해서는 어떤 것들이 필요한지 잘 알수가 있고, 만약 required props에 대해서 부족한 것이 있다면 위 사진과 같이 에러를 검출해준다. 

 

다음 포스팅에서는 props를 required 되지 않은 상태로 어떻게 보내는지 알아보려고 한다.