2023-12-12 본캠프 49일차 / 68일차 TIL

2023-12-12 본캠프 49일차 / 68일차 TIL

 

주요 진행사항

- 타입스크립트 강의 및 개인 과제 발제

 

타입스크립트 개인과제 - level 1 정리

 

개인 과제 주제 : TypeScript를 활용한 To-do List 제작

프로젝트 과제 : 

1. 기본적인 CRUD 구현

2. level1 부터 level5 까지 실력에 따른 유독적인 과제 수행

 

오늘부터 타입스크립트를 처음 배우게 되었다.

기본적으로 알고 있던 사실은 javascript에 type을 지정해 주면서 좀더 엄격한 프로그래밍을 도와준다는 것이였다.

완전히 처음 배우는 언어이기 때문에 강의를 들으며 1단계부터 5단계 과제를 순차적으로 진행할 예정이다.

 

1. level 1 (props drilling)

level 1은 기본적인 props drilling을 통한 방식으로 todolist를 구현하는 것이다.

 

전체코드가 아닌 중요한 내용을 위주로 설명하겠다.

 

- useState의 타입?

useState는 기본적인 리액트 훅으로 타입스크립트에서 사용하기 위해서는 타입을 지정해야한다. 이를 위해서 useState의 구조를 확인해볼 필요가 있다.

여기서 <> 안에 들어간 값은 제네릭이라고 하는 우리가 지정해 줄 타입이다. 따라서 우리는 제네릭이라는 개념을 통해서 useState에 타입을 결정해 주는 것이다.

 

따라서 사용을 할 때는 다음과 같이 사용한다

const [number,setNumber] = useState<number>(0);
const [str, setStr] = useState<string>('');

 

- props의 타입?

컴포넌트 개발을 하는 리액트에서는 props가 정말 중요한 역할을 한다.

TypeScript에서는 이러한 props에도 타입을 지정해야한다.

props는 기본적으로 key, value pair 형태를 띄는 객체이다.

따라서 객체형태의 타입을 지정해주어야하는데, 객체의 타입을 지정해 줄 때 자주 사용하는 개념이 interface이다.

// ParentsComponent.tsx

const ParentsComponent=()=>{
	return <ChildComponent idArray={[1,2,3,4]} user='kim'/>;
}

export default ParentsComponent;

// ChildComponent.tsx

interface ChildComponentProps{
    idArray : number[];
    user : string;
}

const ChildComponent=({idArray,user}:ComponentsProps)=>{
	return <div></div>;
}

export default ChildComponent;

 

위와같이 props를 받는 부분에서 우측에 콜론을 통해 타입을 지정해준다.

이때 내부 타입을 보면 idArray는 숫자로 이루어진 배열이다.

따라서 number [ ] 와 같이 number 타입으로 이루어진 배열이다 라고 나타낸다.