[React] TypeScript 기본 사용법

 

1. 함수형 컴포넌트 타입 추론

React.FC => 함수형 컴포넌트에 적용 가능하며, children을 ReactNode로 암묵적으로 수용한다.
undefined로 들어올수도 있어 안쓰려는 사람들도 많다.

출처: https://itchallenger.tistory.com/entry/React-children-with-typescript-리액트-children-컴포넌트-타이핑

React children with typescript. 리액트 children 컴포넌트 타이핑

 

TypeScript를 처음 공부하면서 보통은 React.FC로 쓰는 걸 많이 봤는데 

undefined로 들어오는 것보다 children을 암묵적으로 쓰는걸 더 중요하지 않게 봐서 그냥 안쓰는게 맞다고 생각했다.

undefined로 들어오면 오류잡는게 더 힘들 것 같다는 의견이다.

 

const Hello = () => {
	return <div>hello, world</div>
}

 

 

2. 컴포넌트 children

// 타입 지정 해주기
interface HelloProps {
	children: ReactNode
}

const Hello = ({children}: HelloProps) => {
	return <div>{children}</div>
}

 

string 같은 원시 타입도 가능하지만 node element를 사용할 때도 있기 때문에 한번에 받는게 더 효율적이다.

 

 

3. 없어도 되는 타입

// type 옆에 '?'를 붙여준다
interface Props {
	name?: string,
    	age: number
}

 

 

 

 

4. 함수 props 전달

interface GreetingsProps {
  name: string;
  onClick: (name: string) => void; // 아무것도 리턴하지 않는다는 함수를 의미합니다.
};

벨로퍼트에 사용법 정리가 아주 잘되어 있다! 두고두고 봐야지

2. 리액트 컴포넌트 타입스크립트로 작성하기 · GitBook

 

 

5. styled-components props types 전달하기

// styled-component에 1개의 타입 지정
export const ImgDiv = styled.div<{background: string}>`
	width: 300px;
    	height: 300px;
    	background: ${props => props.background}
`

// 여러 개의 타입 지정
interface HorizentalCardProps {
	$isMobile?: boolean;
};

export const HorizentalCardLi = styled.li<HorizentalCardProps>`
	display: flex;
	width: 100%;
	height: ${(props) => (props.$isMobile ? '200px' : '280px')};
`;

 

Styled-component typescript Props 받기

 

 

 

6. 상태 관리 함수 (setState) 전달하기

interface Props {
    setIsValid: React.Dispatch<React.SetStateAction<boolean>>;
}

 

 

 

 

 

 

 

 

 

라이브 코딩 때 type을 어떻게 지정해줘야하는지 질문을 했었는데 codegen을 추천해주셨다.

아직 ts 어떻게 사용하는지도 공부하고 팀원들에게도 알려줘야하는데 그럴만한 시간은 없어서 사용하지 못했다.

다음 프로젝트 때는 사용해 보고 싶은 도구다.

codegen - 아직도 직접짜 ? 기준을 만들어 줄게

 

 

 

 

 

TS를 사용하면서...

즉각적으로 오류를 잘 나타내지만 딱히 안나도 되는 오류도 다 내는것 같아서

ts에 대해서 크게 장점은 알 수가 없다..귀찮기만 하고..

 

(수정) JS에서 처리할 수 없는 undefined를 잡아서 오류가 날 부분에 대한 캐치가 가능한 좋은 점을 찾았다.

하지만 타입을 일일이 지정해줘야 한다는 불편함이 더 커서 잘 사용하고 싶진 않다.