[웹 개발] Typescript의 기본 타입에 대해 알아보자 (feat. React 적용 예제)

1. 기본 타입

    let Bool: boolean // True or False
    let num: number // 정수, 실수, (2,8,16)진수, NaN, Infinity 가능
    let str: string // "문자", '${str1}' + str2
    let arr1: number[] = [1,2,3]
    let arr2: Array<number> = [1,2,3]

 

2. 형식 지정 x

    let a: any
    let u: unknown
    /// 형식 지정 x
    /// 사용을 지양하는 편이 좋음..

    num = a // 아무 타입 = any 괜찮음
    num = u // 아무 타입 = unknown 경고
    num = u as number // 이 처럼 타입을 명시하면 괜찮음

 

 

3. 기타

    // 구조체? 느낌
    interface review {
        rating: number
        comment?: string 
        // ?가 붙을 경우 해당 변수는 필수 항목이 아니란 뜻        
    }
    
    let arr2: Array<number|string> = [1,2,3, 'a']
    ///두 개의 타입이 올 수 있음

 

4. 활용 예제(with React)

import React from 'react';
import { useState } from 'react'

var Screen = () => {
    interface Blog {
        name: string,
        isOpen: boolean,
        reviews: review[]
    }

    interface review {
        rating: number
        comment?: string        
    }

    const [info, SetInfo] = useState<Blog>({name:"", isOpen:false, reviews:[]})
    const [name, SetName] = useState<string>("")
    const [comment, SetComment] = useState<string>("")
    const [isOpen, SetIsOpen] = useState<boolean>(false)
    const [rating, SetRating] = useState<number>(0)

    const edit = () => {
        let _info: Blog = info
        _info.isOpen = isOpen
        _info.name = name
        
        // SetInfo(_info) 아래 구문을 쓰지 않고 이 구문을 쓰면 어떤 일이 벌어날까요!?
        SetInfo(({...info, name:name, isOpen:isOpen}))
    }

    const submit = (text:string, score: number) => {
        SetInfo(({...info, reviews: [...info.reviews, {rating: score, comment: text}]}))
    }

    return (
        <div>
            <title>Typescript: 블로그 정보 예제</title>
            <div>
                <div>
                    <label htmlFor='name'>블로그 이름</label>
                    <input type='text' id='name' onChange={(e)=>SetName(e.target.value)}/>
                </div>
                <div>
                    <label htmlFor='open'>블로그 운영</label>
                    <button id='open' onClick={()=>SetIsOpen(!isOpen)}> {isOpen?"영업중":"영업끝"} </button>
                </div>
                <button onClick={()=>edit()}>정보 변경</button>
            </div>
            <div>
                <label htmlFor='comment'>리뷰</label>
                <input type='text' id='comment' onChange={(e)=>SetComment(e.target.value)}></input>
                <br/>별점
                <input type="number" onChange={(e)=>SetRating(e.target.valueAsNumber)}></input>
                <br/>
                <button onClick={()=>submit(comment, rating)}>추가</button>
            </div>
            <br/>
            <div>
                <h1>블로그 이름 : {info.name}</h1>
                <h2>운영 여부 : {info.isOpen?"영업중":"영업끝"}</h2>
                <h2>리뷰들</h2>
                {info.reviews.map((value) => (
                    <div style={{color:"green"}}>
                        평점 : {value.rating}   리뷰 : {value.comment}
                    </div>
                ))}
            </div>
        </div>
    )
}

export default Screen;

 

결과 화면

 

여기서 주의 깊게 볼 점은 info 값을 초기화 해주지 않으면 애러가 발생할 수 있습니다. 또한 interface에서 다른 interface를 사용할 수 있으며 type을 지정할 때 interface로 지정할 수 있습니다.

 

그리고 edit 함수에서 2가지 방법으로 State를 업데이트했는데, 2개의 구문에 약간의 차이가 있습니다... 첫 번째의 경우 버튼을 클릭하여 업데이트해도 화면이 바로 바뀌지 않고 다른 State가 변해야지만 화면이 랜더링되는 모습을 볼 수 있으며 아래의 구문을 사용할 시 정상적으로 바로 랜더링 되는 모습을 볼 수 있습니다. 해당 부분은 React의 작동 방식에 대해 나중에 추가적으로 포스팅하겠습니당

 

이번 포스팅에서 이것 저것... 해봤는데요, 사실 이런 타입 말고도 다양한 타입.. Never, Enum, Tuple 등 존재합니다.. 하지만 React에 어떻게 활용할 수 있는지 막상 생각나지 않아 나중에 같이 소개하겠습니다.