✨ 배열과 튜플, 언제 튜플을 사용해야 할까?

April·2022년 1월 20일
0

💫 Typescript

목록 보기
4/11
post-thumbnail

ArrayTuple

🔷 Array


✔️ Array 예제1

let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

✔️ Array 예제2

// Array
const fruits: string[] = ['🍅', '🍌'];
const scroes: Array<number> = [1, 3, 4]; // number[] = [1, 2, 3];

function printArray(fruits: readonly string[]) {  
  // readonly 라는 키워드는 말 그대로 읽기 전용
  // object의 불변성을 지키는 것은 매우 중요하므로, readonly가 많이 사용 됨
}


🔷 Tuple

Tuple은 배열은 배열인데 서로 다른 타입을 가질 수 있는 배열


✔️ Tuple 예제1

// Declare a tuple type
let x: [string, number];

// Initialize it
x <= ["hello", 10]; // OK

// Initialize it incorrectly
x = [10, "hello"]; // 💩Error

✔️ Tuple 예제2

Tuple을 사용하는 곳이라면 interface, type alias, class 등으로 대체해서 사용하는 것을 추천!

  • Tuple에 접근할 때엔, index로 접근이 가능한데 이러면 어떤 데이터가 들어있는지 바로 확인이 어려우므로 가독성 ⬇️
    ➡️ 이런 경우 구조 분해 할당를 활용하자!
let student: [string, number];
student = ['name', 123];
student[0]; // name
student[1]; // 123
const [name, age] = student; // 구조 분해 할당 Destructuring

✔️ Tuple 예제3 useState()

useState(): 첫 번째와 두 번째의 타입이 다르다. 두 번째는 함수형

const [num, setNum] = useState(null);
profile
🚀 내가 보려고 쓰는 기술블로그

0개의 댓글