React-master #3

타입스크립트~ 갈겨볼까~

---

✅ TypeSciprt

TypeScript는 MS에 의해 개발/관리되고 있는 오픈소스 프로그래밍 언어로, JavaScript에 타입을 부여한 자바스크립트가 확장된 언어이다.

• 내가 생각한 장점은?
  • TypeScript를 이용하면 컴파일 단계에서 오류를 포착할 수 있는 장점이 있어 에러가 적어지며, 가독성이 높고, 협업 시 유지보수 및 개발이 용이하다.
• 설치
  • 리액트 프로젝트를 처음 만들거나 기존에 있는거 지워져도 상관없다면

  npx create-react-app 내 앱 이름 --template typescript
  npm i --save-dev @types/styled-components
  npm i styled-components

  • 나는 기존꺼 지워지는거 싫어서

  npm install --save typescript @types/node @types/react @types/react-dom @types/jest
  npm i --save-dev @types/styled-components

• 설치했다면 확장자 변경 .js -> .tsx

---

Typing the Props

• 컴포넌트가 필요로하는 prop 을 TypeScript에게 어떻게 설명할까?
• 'Circle.tsx' 파일을 만들어 알아볼것

// -Circle.tsx

import styled from "styled-components";

const Container = styled.div``;

function Circle() {
	return
    	<Container />
}

export default App;

• 만들었으면 Circle 을 App 안에서 사용해보자

// -App.tsx

function App() {
	return 
		<div>
        	<Circle />
        </div>
}

• 이제, TypeScript 에게 내 component 가 가져야하는 prop 을 설명해주자
• 만약, Circle 이 bgColor prop 을 필요로한다고 가정해보자

// -Circle.tsx

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

// -App.tsx

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

• 이렇게 해주면, TypeScript 가 bgColor 가 뭐냐고 불평함
• interface 를 사용해 객체 모양을(object shape) typescript 에게 설명해주자
  (object 가 어떤식으로 보일지 설명해주는 것)

interface CircleProps {
	// 이름은 아무렇게나 지어도됨
	// 여기에 객체모양을 설명해주면 된다
    
    bgColor : string;
}

• 이렇게하면, TypeScript 에게 bgcolor 는 string 이 되어야한다고 설명해줄 수 있다.
• 이제 CircleProps 의 타입이 뭔지 component 에게 말해주자

// -Circle.tsx

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

• 이제 bgColor 를 styled-component 로 보내줄 수 있따 :)
• (porp 을 두번 받는건 처음이라 다시보고 다시보고 했다..)
• 하지만 여기서 문제가 있다! TypeScript 가 봤을때는 Contaienr 가 div임
• 그래서 TypeScript 에게 bgColor 를 styled-component 에게도 보내줄거라고 말해주어야함

// -Cricle.tsx

interface ContainerProps {
	bgColor : string;
}

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

• 이렇게하면 bgColor 가 설정된 ~ 동그라미 두개 완성!

Optional Props

• 위에 interface에 작성했던 것 처럼 prop 을 적어주면, 필수(required)로 넣어줘야하는 prop이 되는데,
  만약 꼭 필요하지 않은 prop.. 즉, 선택적으로 사용 가능한 prop으로 만들려면?
• prop 이름 뒤에 ?를 붙여주면 된다!
• 그리고 선택적(Optional) porps은 string 또는 undifinde 성질을 가지게 된다.

// -Circle.tsx

interface CircleProps {
	bgColor: string;
    bordrColor? : string;  <<<----
}

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

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

const Container = styled.div<ContainerProps>`
	.
    .
    .
    border: 1px solid ${props => props.borderColor};  <<<----
`;

• Circle 컴포넌트 안에서는 bordrColor 가 required 인 상태,
• Container 스타일 컴포넌트에서는 bordrColor 가 아닌 상태이다.
• 그리고 나는 App 안의 첫번째 Circle 컴포넌트에만 배경색을 지정할것!!

// -App.tsx

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

• 근데 이렇게하면, 에러남. *** 문구에서.

<Container bgColor={bgColor} ***bordrColor={bordrColor}*** />

• 왜냐면 ContianerProps 에서는 borderColor 가 required 상태로 되어있어서,
  CircleProps 에서만 borderColor 가 undifined 가 될 수도 있다고 설정한 상태라서.

---

• TypeSciprt : "야 한쪽 undifined 값 가질 수 있는거 실화냐? 확인하셈. 경고띄운다.)
  나 : "오 ㄳㄳ 초기값(default) 줄게
• borderColor 는 사용자가 만든 borderColor 값이고,
  만약 undefined 상태라면 yellow 적용해주삼"

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

• 나 : "아니다 그냥 만약 borderColor 가 undifined 상태라면
  borderColor 가 bgColor 와 같은 값을 가지게 해줄게"

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

• ㅋㅋ 대화식으로 적으니 이해가 잘된답..
  
• 두번째 원도 borderColor 가지고 있따.
  
• background-color 와 동일하게 설정해놔서 안보이는거지롱.
• 추가로! 인자 자리에서 초기값을 정해줄수도 있다.
  • function Circle ({ bgColor, borderColor = "white" } : CircleProps)
  • borderColor = "white" 이렇게 :)

---

두번째 페이지에서 보자..