TypeScript Props

required props

Interface
object를 설명해주는 녀석

interface CircleProps {
	bgColor:string;	
}

interface ContainerProps {
	bgColor:string;
}

const Container = styled.div<ContainerProps>`
	width:100px;
	height:100px;
	background-color:${(props) => props.bgColor};
	border-radius:100px;
`;

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

interface를 사용하는 방법은 다음과 같다. 객체의 속성을 정의해놓고, 불러다 사용하는 방식이며 vscode 내부가 typescript로 만들어져 있기 때문인지 자동완성도 잘 된다. 잘 달라붙는다는 느낌?

const myPlayer = (playerObj: PlayerShape) =>
  `안녕하세요. 제 이름은 ${playerObj.name}이고 나이는 ${playerObj.age}입니다. 저의 고향은 ${playerObj.home}입니다.`;

console.log(myPlayer({ name: 'Jaden', age: 6, home: 'Wonju' }));
console.log(myPlayer({ name: 'Dalma', age: 2, home: 'Seoul' }));

optional props

props를 optional하게 만들어주면 필요한 곳에서만 사용할 수 있다.

//Circle.tsx

interface CircleProps {
  bgColor: string;
  borderColor?: string;
}

interface ContainerProps {
  bgColor: string;
  borderColor: string;
}

const Container = styled.div<ContainerProps>`
  width: 200px;
  height: 200px;
  background-color: ${(props) => props.bgColor};
  border-radius: 100px;
  border: 4px solid ${(props) => props.borderColor};
`;
//styled 컴포넌트 생성하기

//bgColor은 props이다.
//bgColor의 props의 출처(?), 소스는 CircleProps라는 것을 명시해주어야 한다.
function Circle({ bgColor, borderColor }: CircleProps) {
  return <Container bgColor={bgColor} borderColor={borderColor ?? bgColor} />;
}
export default Circle;
  
//App.tsx

function App() {
  return (
    <div>
      <Circle bgColor="teal" borderColor="tomato" />
      <Circle bgColor="tomato" />
    </div>
  );
}

props를 interface를 만들 때 ?를 넣어주면 optional한 상태가 된다.

사용할 때는 해당 props가 optional이기 때문에 값이 넘어오지 않을 경우를 대비하여 default값을 넣어둔다. 그렇지 않으면 에러가 발생. 이런 점이 타입스크립트의 장점이라고 볼 수 있다. 코드를 실행한 후 브라우저에서 에러 메시지를 발견하는 것이 아니라, 실행하기도 전에 미리 에디터로부터 에러를 확인할 수 있다.

function Circle({ bgColor, borderColor }: CircleProps) {
  return <Container bgColor={bgColor} borderColor={borderColor ?? bgColor} />;
}