오늘 토요일인데 TIL을 쓰고 있다
오늘 고래를 안가기 때문에, ㅋㅋㅋㅋㅋ시간 맞춰서 지금 2시에 쓰고 있다.
앞서 TIL 하단에 질문 남겨놨는데, 뭔가 이번주는 고래 깃허브 확인해보니, 엄청나게 바쁘신것 같다. 아마 낼 다 듣지 않을까 싶다,,, 재미나겠다👩🏻💻
Section 30 리액트 + Typescript
드디어 나왔다 ! TypeScript!
우선 TS와 JS의 차이를 알아보쟈.
JavaScript
정의: JS는 웹 개발에서 가장 널리 사용되는 스크립트 언어로, 동적인 웹 페이지를 만들기 위해 사용된다.
타입: 동적 타이핑(dynamic typing)을 지원하여, 변수의 데이터 타입을 실행 중에 변경할 수 있다.
호환성: 대부분의 브라우저에서 기본적으로 지원되며, 서버 측에서도 Node.js와 같은 환경에서 사용된다.
구조: 객체지향 프로그래밍, 함수형 프로그래밍 등 다양한 패러다임을 지원한다.
TypeScript
정의: TS는 마이크로소프트가 개발한 JS의 슈퍼셋으로, 정적 타입을 지원한다. JS 코드에 타입을 추가하여 더 안전하고 유지보수가 쉬운 코드를 작성할 수 있다.
타입: 정적 타이핑(static typing)을 지원하여, 컴파일 시점에 타입 검사를 수행한다. 이는 코드 작성 중 오류를 미리 발견할 수 있게 도와준다.
호환성: TS는 JS로 컴파일되어 브라우저나 Node.js에서 실행될 수 있다. 즉, 기존의 JS 코드와 호환된다.
기능: 클래스, 인터페이스, 제네릭 등의 고급 기능을 제공하여, 대규모 애플리케이션 개발에 유리하다.
Interface / Type
interface: 객체의 형태를 정의하는 데 주로 사용된다. 주로 클래스와 함께 사용할 때 유용하다.
type: 다양한 타입을 정의할 수 있는 더 유연한 방법. 객체뿐만 아니라 원시 타입, 유니언 타입, 튜플 등 다양한 형태를 정의할 수 있다.
props 및 typescript 작업하기
TypeScript를 사용하여 React 컴포넌트의 props를 정의하는 것은 코드의 안정성을 높이는 데 도움이 된다. 다음은 props를 정의하고 사용하는 방법.
먼저, 컴포넌트에서 사용할 props의 타입을 정의하는 인터페이스를 만들어보면
interface GreetingProps {
name: string;
age?: number; // 선택적 prop
}
const Greeting: React.FC<GreetingProps> = ({ name, age }) => {
return (
<div>
<h1>Hello, {name}!</h1>
{age && <p>You are {age} years old.</p>}
</div>
);
};
state 및 typescript 관리하기
interface CounterState {
count: number;
}
const Counter: React.FC = () => {
const [state, setState] = useState<CounterState>({ count: 0 });
const increment = () => {
setState(prevState => ({ count: prevState.count + 1 }));
};
return (
<div>
<p>Count: {state.count}</p>
<button onClick={increment}>Increment</button>
</div>
);
};
useState 훅을 사용할 때 타입을 명시하여 state의 타입을 정의할 수 있다.
tsconfig.json
TypeScript 프로젝트의 설정은 tsconfig.json 파일을 통해 관리된다.이 파일에는 TypeScript 컴파일러의 동작을 정의하는 다양한 옵션이 포함되어 있다.
{
"compilerOptions": {
"target": "ES6", // 컴파일할 JavaScript의 버전
"module": "commonjs", // 모듈 시스템
"strict": true, // 엄격한 타입 검사
"jsx": "react", // JSX 지원
"esModuleInterop": true, // ES 모듈과 CommonJS 모듈 간의 호환성
"skipLibCheck": true, // 라이브러리 파일 검사 건너뛰기
"forceConsistentCasingInFileNames": true // 파일 이름의 대소문자 일관성 유지
},
"include": [
"src/**/*" // TypeScript가 포함할 파일의 경로
],
"exclude": [
"node_modules", // 제외할 디렉토리
"**/*.spec.ts" // 테스트 파일 제외
]
}
Learned
매일 강의에서는 JavaScript만 다루고 있지만, 고래에서는 TypeScript를 사용하고 있어서 이 내용을 정리해보고 싶었다. 그동안 TypeScript를 사용할 때마다 아쉬운 점이 많았는데, 이번 강의를 통해 드디어 제대로 배울 수 있게 되어 정말 좋았다.
이전에는 TypeScript의 개념이 모호하게 느껴졌던 부분도 있었는데, 강의를 듣고 나니 그동안 쌓였던 궁금증이 해소된 것 같다. 특히 props와 state를 관리하는 방법, 그리고 interface와 type의 차이에 대한 이해가 생겼다.
앞으로도 TypeScript의 다양한 기능을 활용하여 더 나은 코드를 작성해 나가고 싶다!
이제 정말 안녕 TIL!
아마 오늘까지 쓰고, 당분간 진짜 안올거 같다. 확실한건 , 10/27~11/6까지 안올거 같다.
이러고 또 올거라고 생각하겠지만, 음 그건 고민 좀 더 해볼게..
난 여행을 가야해. 그럼 어딘가 잘있으렴 TIL아. 나중에 만나쟈.
