TypeScript 기초 & React 기초

신한투즈장권 프로 디지털 아카데미 과정

 

 

6. TypeScript

1. TypeScript 란

 

1) TypeScript

JavaScript에 Type을 추가한 언어

실제 브라우저에서 사용하려면 컴파일이 필요하다: TypeScript → (Compile) → JavaScript

 

TypeScript의 장점

• 타입 안정성(에러 사전 방지): 컴파일 시점에 오류를 발견할 수 있음!
• 개발자 도구의 높은 지원: 자동 완성, Code Refactoring
• Javascript와의 호환성: 모든 JavaScript 코드는 TypeScript에서도 작동 

js 에서는 정상 출력

ts 에서는 아래와 같은 에러 발생

 

 

2. TypeScript 설치

 

1) TypeScript 설치

npm init
npm install -g typescript    // 전역 설치
tsc --version

해도 에러 발생? (Mac 기준) command + shift + P 해서 reload window 하면 초기화 해서 다시 불러주면 끝!

 

2) Typescript 설정

tsconfig.json 파일에서 "compilerOptions": { } 에 "outDir": "dist” 설정을 추가하면 src 폴더에 있는 .ts 파일들을 . js로 변환해 dist 폴더에 자동 저장해준다. 헷갈리면 안 되는 점은 무조건 dist 폴더에 생성되도록 만드는 게 아니라는 것! tsc   prac.ts 처럼 개별 파일을 직접 컴파일하게 되면 src 폴더에 .js 파일이 생성된다!

 

 

3. TypeScript 의 Type

 

1) 기본 Type

tuple: 고정된 요소 수와 각 요소의 타입이 지정된 배열 (예: [string, number])

any: 어떤 타입의 값도 가능, 가능한 한 사용을 피해야 함

const arr: number[] = [1, 2, 3, 4, 5, 6];

const tuple: [string, number, string] = ["a", 1, "b"];

const sample: any = "ABB";

타입스크립트는 컴파일 하는 순간 자바스크립트로 변환된다, 그런데 왜 쓰는 거지?

→ 개발할 때 편리하니까? 주요한 목적은 타이핑할 때 에러를 바로 수정할 수 있도록 하기 위해서! 타입이 자동 추론 되니까!

 

2) 함수와 타입

함수 선언에 타입 적용

// 함수 선언에 타입 적용
function add(x: number, y: number): number {
	return x + y;
}


// 익명함수/화살표함수에 타입 정의
const multiply = function (a: number, b: number): number {
    return a * b;
}

const multiply2: (a: number, b: number) => number = (a, b) => {
    return a * b;
}

type MutilpyFunc = (a: number, b: number) => number;
const multiply3: MutilpyFunc = (a, b) => {
    return a * b;
}


// 선택적 Property(Optional)
function greet(name: string, greeting?: string): string {
    return `${greeting || 'Hello'}, ${name}`;
}


// Default 값 지정
function greet(name: string, greeting: string = 'Hello'): string {
    return `${greeting}, ${name}`;
}

 

JS 에서는 매개변수를 더 적게 주거나 많이 줘도 에러가 나지 않는다. 그래서 실제 개발 환경에서는 위험할 수 있다 !

 

 

선택적  Property (Optional)

Default  값 지정

 

 

3) 인터페이스(interface)

인터페이스는 TypeScript에서 객체의 구조를 정의한다 - 프로퍼티, 메소드, 이벤트 등 객체의 사양을 명시

인터페이스 써야 해? 타입이랑 별 차이 없다!

인터페이스는 다른 속성을 상속할 수 있다

readonly 속성을 지정했는데 변경하려고 하면 error 가 발생한다

 

4) 클래스와 인터페이스

: TypeScript에서 클래스 정의 - 클래스 멤버(프로퍼티, 메소드)에 타입 적용

implements: class가 interface를 준수하도록 강제

 

 

4. TypeScript 의 고급 Type

 

1) Union Type (|)

: 여러 타입 중 하나가 될 수 있는 값을 의미

 

2) Intersection Type (&)

: 여러 타입을 모두 만족하는 하나의 타입

 

3) Literal Type

: 특정 Value만 허용

 

4) Generic Type

: 타입 자체가 변수인 것 = 타입 자체를 갈아 끼울 수 있는 것

다양한 타입에 대해 재사용 가능한 컴포넌트 생성

 

Generic 함수: Type Parameter로 정의

Generic Interface: Interface에 Type Parameter 정의

Generic Class: 클래스에 Type Parameter로 정의

Generic Constarint(제약조건): 특정 타입에만 Generic 적용.

 

5) Decorator 란?

Decorator 는 함수다! 함수 혹은 클래스를 꾸며주는 것

 

 

 

8. React.js

1. React.js 란

 

1) React 란

복잡한 UI를 여러개의 컴포넌트로 구성하여 표현한다!

 

2) 컴포넌트란

마크업을 반환하는 함수

컴포넌트는 로직과 모양을 가진 UI 조각으로 컴포넌트 함수의 리턴값이 UI

컴포넌트를 조합해서 큰 컴포넌트를 만들 수 있다

컴포넌트는 ( props ) 를 받아서 ( ui ) 를 반환한다

 

3) Props와 State

컴포넌트는 객체로 인자를 하나 보내는데 그게 props

• props 는 부모 컴포넌트가 자식에게 전달하는 데이터로 readonly 이다. 외부에서 전달받은 값을 표현하기 위해 사용한다
  (ex. <Child title="안녕" />)
• state 는 컴포넌트 자체가 관리하는 데이터로, 컴포넌트 내부에서 수정이 가능하다. 내부에서 변경되는 값을 표현하기 위해 사용한다
  (ex. const [count, setCount] = useState(0))

 

2. React 시작하기

 

1) vite 로 React 시작하기

// npm create vite@latest <폴더 이름> -- --template react
npm create vite@latest my-react-app-js -- --template react

cd my-react-app-js

npm install
npm run dev

이렇게 치면 아래와 같은 화면이 나온다!!!

주의할 점은 반드시 상위 폴더가 아닌 my-react-app-js 가 만들어진 위치에서 실행해야 한다는 것!

main.jsx 는 jsx 문법을 사용하고 앱을 렌더링하는 역할을 하는데, 그 앱은 App.jsx 에 있다

main.jsx에서 App.jsx에서 App을 import 하고 있으며, App을 호출하고 있다

또한, index.css를 import 하고 있는데, 이렇게 import된 css는 Application에 적용되는 스타일이 된다

마찬가지로 App.jx에서는 App.css를 import하고 있으며, 여기서는 image 또한 import 하여 사용한다

(public 내에 있는 이미지는 빌드 시 포함 X, src 내에 있는 이미지는 빌드 시 포함O)

 

2) JSX란 (JavaScript XML)

: Element 만드는 것을 직관적으로 이해하도록 도와주는 문법

JSX 사용을 하지 않으면 일일이 다 적어줘야 해서 가독성이 안 좋고 생산성 및 코드 관리 비용의 증가할 수 있다

 

3) React Server Component

Server Component는 application이 클라이언트 앱과 분리된 환경에서 building할 때 실행되거나, SSR (Server Side Rendering)시 서버에서 실행되는 컴포넌트

 

 

연습문제1)

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Hello, Jiyeon!
        </p>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

 

 

연습문제2) 

import "./HelloWorld.css";

export default function HelloWorld() {
    return (
        <div style={{ textAlign: "center" }}>
            <p><h2>Hello, World!</h2></p>
            <p>This is my First component</p>
        </div>
    );
}

jsx 문법 내에서 javascript 코드를 사용할 때는 중괄호 { } 로 표기한다. 위의 코드를 보면 중괄호가 2개 사용된 것을 알 수 있는데, 자바스크립트를 작성하기 위해 1개, 객체를 전달하기 위해 1개를 사용한 것이다.

 

css 적용방법

• inline-style 로 적용 (style 속성)
  - js 객체로 전달해야 한다
  - 하이푼으로 연결된 것들은 camelCase 로 작성해야 한다 (ex. background-color -> backgroundColor)
• className 으로 적용 (className 속성)
  - css 를 정의한다
  - jsx 에서 css 를 import 한다
  - className 속성에 명시한다 (js 코드이기 때문에 class 키워드 사용 불가)

 

 

연습문제3)

// CaptionImage.jsx
export default function CaptionImage(props) {
    return (
        <div style={{ textAlign: "center" }}>
            <img src={props.imgUrl} alt={props.caption} />
            <p>{props.caption}</p>
        </div>
    );
}


// App.jsx
export default function App() {
  return (
    <div>
        <CaptionImage imgUrl="/hodu.png" caption="my cat hodu"></CaptionImage>
    </div>
  );
}

 

연습문제3-2)

title과 color clickUrl을 받는 MyButton 컴포넌트 만들기

title은 버튼의 이름, color는 버튼의 색상, clickUrl은 이동할 링크를 입력

// MyButton.jsx
export default function MyButton(props) {   // MyButton({ title, color, clickUrl })

    const { title, color, clickUrl } = props;

    return (
        <a href={clickUrl}
        target="_blank"
            style={{
                padding: 10,
                borderRadius: 5,
                textDecoration: "none",
                color: "white",
                backgroundColor: color
            }}> {title}
        </a>
    );
}


// App.jsx
import MyButton from "./components/MyButton";

export default function App() {

  return (
    <div>
        <MyButton title="go to naver" color="green" clickUrl="https://www.naver.com" />
    </div>
  );
}

 

 

3. React 본격 시작하기

 

1) useState & useEffect

useState: 컴포넌트에서 상태(state)를 관리하기 위한 Hook, 값을 저장하고 변경하여 UI를 바꾸는 역할

• 상태값을 저장하고 변경 가능
• 값이 바뀌면 컴포넌트가 리렌더링됨

useEffect: 컴포넌트의 side effect 를 처리하기 위한 Hook, 렌더링 이후 특정 작업을 실행하는 역할

• 렌더링 이후 특정 작업 수행 (ex. 데이터 fetch, 구독, 타이머 설정 등)
• 의존성 배열을 사용해 실행 시점을 제어할 수 있음

 

import CountComponent from "./components/CountComponent";

export default function App() {
  const [visible, setVisible] = useState(false);
  console.log("App 함수 호출");

  return (
    <div>
        <CountComponent />
        <button onClick={() => setVisible(!visible)}>보이기</button>
        {visible ? <CountComponent /> : null}
    </div>
  );
}