React 11-2 TS (type, porp, interface)

1. type

 - type은 TS정리한 곳 1번에 있기 때문에 여기서는 언급하지 않겠습니다~~~

TS 01 TS(Typescript) 사용 이유, 타입 선언, 타입을 미리 선언(type)

 

 

---

2. porp

 - 컴퍼넌트로 선언할 때도 타입이 맞지 않으면 안 된다. 상세한 내용은 interface에서 함께 사용하면서 알아보자!!

 

 

---

3.interface

 - 객체 형태로 타임을 선언한 후 porp를 이용해 원하는 곳에 타입을 선언하는데 큰 도움을 준다, 선언을 하면 다른 곳에서 사용할 수 있다.

 

예)

/* App.tsx */

import Circle from './Circle';

function App() {
  return (
    <div>
      <Circle bgColor="teal" borderColor="blue" />
      <Circle bgColor="skyblue" borderRadiusValue="100px" text="동그라미" />
    </div>
  );
}
export default App;



/* Circle.tsx */

import styled from 'styled-components';

/* 타입 선언한 부분 */
interface CircleProps {
    bgColor: string;
    borderRadiusValue?: string;
    borderColor?: string;
    text?: string;
}

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

const Container = styled.div<CircleProps>`
    width: 200px;
    height: 200px;
    background-color: ${p => p.bgColor};
    border-radius: ${p => p.borderRadiusValue};
    border: 5px solid ${p => p.borderColor};
`;

export default Circle;