Search

타입스크립트의 매개변수 구조화

Tags
TypeScript
Date
2024/10/14

1. 개요

자바를 주 언어로 사용하는 저로서는 타입스크립트 코드의 구조를 자연스럽게 자바와 비교하게 됩니다. 오늘은 자바스크립트, 특히 TypeScript에서 자주 사용하는 매개변수 구조화에 대해 알아보고, 이를 자바와 비교하여 설명해보도록 하겠습니다.

2. 기본 형태

다음은 React Native Expo에서 TypeScript를 사용해 작성된 기본 형태의 코드 입니다. 여기서는 props를 통해 컴포넌트에 전달되는 매개변수를 interface로 정의하고 있습니다.
import React from 'react' import { StyleSheet, View } from 'react-native' interface InputNicknameScreenProps {} function InputNicknameScreen({}: InputNicknameScreenProps) { return (<View></View>) } const styles = StyleSheet.create({}) export default InputNicknameScreen
JavaScript
복사

3. 자바로 표현하기

TypeScript에서 interface를 통해 매개변수를 정의한 방식을 자바에서 표현한다면 어떤 모습일까요? 이는 자바에서 객체를 통해 전달하는 방식과 유사합니다. 예를 들어, 자바에서는 다음과 같이 표현할 수 있습니다:
class InputNicknameScreenProps { // 필요한 필드들 정의 } public class InputNicknameScreen { public void render(InputNicknameScreenProps props) { // View를 반환하거나 처리 } }
Java
복사
이러한 방식은 컴포넌트의 props 구조를 명확히 정의하고, 나중에 다른 props를 추가할 때 확장성을 높일 수 있다는 장점이 있습니다.