왜 TS?
사실 정글에 있으면서도 FE 채용공고를 꾸준히 보고 있었다.
흔히 말하는 네카라쿠배 부터 스타트업까지 쭈우우우욱 살펴보니
TypeScript 가 없는 공고가 없었다.
지금까지 주로 jsx파일을 이용해서 React로 SPA 를 구현했는데,
나 자신에게 온전히 투자할 수 있는 7일동안 TypeScript를 공부하기로 하였다.
이건 왜이럴까?
교재를 참고하여 ToDo List를 구현하면서 궁금증을 유발했던 것을 정리하고자 한다,
왜 spread operator를 쓸까?
// 체크박스 변화 감지 함수
const handleCheckboxChange = (itemId: number) => {
console.log(itemId);
// ItemId를 받아 체크박스 토글 기능
setTodos((Items) =>
Items.map((item) =>
// 스프레드 연산자로 새로운 객체로 생성
// 새로 만들어진 객체에다가 기존 isChecked 정보 반대로 뒤집어씌우기
// 🚨원본 Item 객체 손상 없이 isChecked 값만 변경된 객체가 생성
item.id === itemId ? { ...item, isChecked: !item.isChecked } : item
)
);
};위 함수는 체크박스에서 이벤트가 발생하면 실행되는 함수이다.
코딩테스트에서도 원본 배열을 유지하기 위해 이 스프레드 연산자를 써서 새로운 배열에다가
값을 바꾸었던 게 생각났다.
여기도 마찬가지이다.
할일 목록을 저장한 원본배열을 그대로 놔두고, 스프레드 연산자를 사용하여 새로운 객체를 생성한다.
그리고 체크박스에 클릭 이벤트가 일어나면 상태만 반대로 바꾸어준 새로운 객체를 setTodos 함수에 전달한다.
React.FC는 무슨 타입일까?
interface GreetingProps {
name: string;
}
const Greeting: React.FC<GreetingProps> = (props) => {
return <h1>{props.name}님, 반갑습니다</h1>;
};
const EXApp: React.FC = () => {
const title: string = "내일 할일";
return (
<div className="titlebk">
<Greeting name="LEE" />
</div>
);
};
Function Component 로, 함수형 컴포넌트 사용시 타입 선언에 사용할 수 있도록
리액트에서 제공하는 타입
- React.FC 사용을 지양...?
- children 이슈
<Greeting name="LEE">{"sth moved"}</Greeting>이런식으로 props를 내려주는 자식 컴포넌트의 태그 의 내용을 Children이라고 한다.
TS를 쓰는 이유는 타입 지정을 통해 JS 코드의 안정성을 높이기 위해서이다.
그런데 FC를 사용하게 되면 컴포넌트에 Children이 있을 수 있다는 것을 가정하는데
이럴때 Children의 타입은 어디갔는가...? 라는 문제점이 발생한다는 점.
- defaultProps
defaultProps는 props의 기본값을 세팅할 수 있도록 도와주는 옵션.
이게 React.FC를 사용하게되면 인식이 잘 안된다는 이슈.
그러나 typescirpt 3.0 부터 depreciate 될 예정이라고 한다.
그래서...?
React.FC보단 바로 Props를 전달하고, 이 Props에 타입을 지정하는 방식이 있다.
(교재에선 모두 React.FC를 사용해서 일단 1회독 후 리팩토링을 해볼까 싶다)
const C1: React.FC<CProps> = (props) => {}; // React.FC 사용
const C2 = (props: CProps) => {}; // 미사용
개인과제 - 게시판 UI & 화면 기능 명세서 완성
1.화면의 요소를 먼저 구성
2. 필요한 기능 명세
3. ERD 설계
4. FE(REACT + TS) & MockServer 구현
5. BE(node.js + express.js + MYSQL) 구현
의 순서로 진행할 예정이며
2단계까지는 진행이 된 상황.
뭔가 기술적인 챌린지가 될 부분이 뚜렷하지 않아서
기본 기능을 일단 먼저 완성을 해놓고 더할 것이 있는지 고민할 예정이다.
