[React&Typescipt] chapter

[React&Typescipt] chapter_01 ~ 04

DEVELOPERS_Ivan ㅣ 2023. 9. 6. 17:50

React와 TypeScript은 웹 애플리케이션을 개발하기 위한 기술 스택으로 Facebook에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 만들기 위한 도구, TypeScript는 Microsoft에서 개발한 자바스크립트의 슈퍼셋(Superset) 언어를 말합니다. 함께 사용하면 React 컴포넌트와 관련된 데이터와 이벤트 처리에 대한 타입을 명확히 정의할 수 있으며, 이는 대규모 프로젝트에서 특히 유용합니다.

REACT_Typescipt 폴더 생성하기

- 로컬 폴더에서 직접 새로운 Typescipt 상위 폴더를 생성하고 VSCode로 열기를 진행하여
하위 폴더 로프로젝트를 생성하고 통합 터미널창을 열어 아래 내용을 입력하여 어플리케이션을 설치 진행한다.
* Create React App(이하 CRA)라는 도구를 사용하여 React 프로젝트를 초기화하고 구성합니다.
* 위 명령어는 TypeScript 템플릿을 사용하여 프로젝트를 생성하도록 지시합니다.

# 리액트 + 타입스크립트 프로젝트 생성 명령어(--template typescript)
npx create-react-app 프로젝트명 --template typescript
예) npx create-react-app frontend-react --template typescript

# 타입스크립트 : 마이크로소프트(깃허브, vscode, typescript, 윈도우 등)
# why? 1) 단점 : js 는 type(자료형)을 정의하지 않고 자유롭게 변수의 값을 넣어 코딩함
# (코딩이 간략/코딩 생산성 증가, 코딩시 에러를 잡지못하고 서비스때 심각한 에러가 발생함)

# 타입스크립트 : js 에 자료형을 명시해서 코딩하게 해주는 js 확장 언어

# 리액트 + 타입스크립트 프로젝트 생성 명령어

npx create-react-app 프로젝트명 --template typescript

예) npx create-react-app frontend-react --template typescript

# 타입스크립트 : 마이크로소프트(깃허브, vscode, typescript, 윈도우 등)

# why? 1) 단점 : js 는 type(자료형)을 정의하지 않고 자유롭게 변수의 값을 넣어 코딩함

# (코딩이 간략/코딩 생산성 증가, 코딩시 에러를 잡지못하고 서비스때 심각한 에러가 발생함)

# 타입스크립트 : js 에 자료형을 명시해서 코딩하게 해주는 js 확장 언어

# 리액트 + 타입스크립트 프로젝트 생성 명령어 : npx create-react-app 프로젝트명 --template typescript

타입스크립트 파일명 종류 : .tsx(jsx표현식을 사용한 js), .ts(jsx표현식 사용안한 js)
리액트의 JSX(Javascript and XML) : {값}

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(

document.getElementById('root') as HTMLElement

);

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

// TODO : 부모 컴포넌트 메인 : App.tsx

import React from "react";

// TODO : App.css import (기본 : 중앙정렬)

import "./App.css";

// TODO : 페이지(자식) 컴포넌트 가져오기(import)

import Basic from "./pages/Basic";

import BasicExam from "./pages/BasicExam";

import Func from "./pages/01_exam/Func";

import FuncExam from "./pages/01_exam/FuncExam";

import Etc from "./pages/02_exam/Etc";

import Counter from "./pages/03_exam/Counter";

import Book from "./pages/04_exam/Book";

import WebtoonExam from "./pages/04_exam/WebtoonExam";

function App() {

return (

{/* TODO: 자식 컴포넌트 추가 */}

{/* 타입스트립트 기본 사용법 연습문제 */}

{/* <Basic /> */}

{/* 타입스트립트 기본 사용법(바인딩, 일반 변수 정의) 연습문제 */}

{/* <BasicExam /> */}

{/* TODO: 01_exam */}

{/* <Func /> */}

{/* <FuncExam /> */}

{/* TODO: 02_exam */}

{/* <Etc /> */}

{/* TODO: 03_exam */}

{/* typescript 내장함수 카운팅 연습문제 */}

{/* <Counter /> */}

{/* TODO: 04_exam */}

{/* typescript 내장함수 객체배열 반복문 사용 */}

{/* <Book /> */}

{/* typescript 내장함수 객체배열 반복문 사용 연습문제 */}

{/* <WebtoonExam /> */}

</div>

);

}

export default App;

자식 컴포넌트./pages/Basic.tsx (typescript 적용된 버전)

- 타입스트립트 기본 사용법 익히기(바인딩, 일반 변수 정의)
- 새로운 객체타입(자료형) 정의한 파일 import

- 1) 기본 자료형 : 문자열(string), 숫자(number), 참/거짓(boolean), 객체(따로 정의)
- 2) 유니온 사용법 : let 변수명: 자료형 | 자료형2 ...
- 3) 옵셔널(?) : 객체의 속성이나 함수의 매개변수에 사용가능
- 4) 배열 : 변수 및 함수 사용 시 반드시 정의된 자료형의 값으로 사용하게 강제함
- 4-1) 객체배열

// TODO : ./types/IObject.ts (객체 자료형을 정의하는 파일)

// TODO: 타입스크립트 파일명 종류 : .tsx(jsx표현식을 사용한 js), .ts(jsx표현식 사용안한 js)

// TODO: 리액트의 JSX(Javascript and XML) : {값}

// 사용법 : export default interface 객체자료형명 {

// 속성? 자료형 | 자료형2 ...,

// 속성? 자료형

// }

// 속성? : 옵셔널(?) : 속성이 없어도 오류없이 실행되게 해줌

// 예) let obj: IObject = { name:"홍길동" }

// obj.id (결과는 오류로 출력되지만 에러없이 프로그램이 실행되게 해줌)

export default interface IObject {

id?: any | null,

}

// TODO : 자식 컴포넌트./pages/Basic.tsx (typescript 적용된 버전)

// TODO: 타입스트립트 기본 사용법 익히기(바인딩, 일반 변수 정의)

// TODO: 새로운 객체타입(자료형) 정의한 파일 import

import IObject from "../types/IObject";

// TODO : React 컴포넌트

// TODO : 리액트 기본 컴포넌트 템플릿 단축키 사용

// 단축키 : rfce

import React, { useState } from "react";

function Basic() {

// TODO: 바인딩 변수

// 사용법 : let [변수명, set변수명] = useState<자료형>(초기값);

let [message, setMessage] = useState<string>("바인딩 변수 출력입니다.");

let [num, setNum] = useState<number>(0);

let [bflag, setBflag] = useState<boolean>(true);

let [obj, setObj] = useState<IObject>({ id: null, name: "green" });

let [arr, setArr] = useState<Array<number>>([ 1,2,3,4,5 ]);

let [objArr, setObjArr] = useState<Array<IObject>>([{ id: null, name: "green" }]);

// TODO: 1) 기본 자료형 : 문자열(string), 숫자(number), 참/거짓(boolean), 객체(따로 정의)

// TODO : 일반 변수 정의(문자열(자료형))

// 사용법 : let 변수명: 자료형 = "문자열";

let message2: string = "일반 변수 출력입니다.";

let num2: number = 1; // 숫자형(실수, 정수 모두 포함)

let bflag2: boolean = false; // 참/거짓(bool/boolean)

// TODO: 객체는 자료형을 개발자가 정의해서 사용함

// IObject = { id?: any | null, name: string };

// 설명 : id (any(모든자료형 허용) 또는 null 자료형 허용)

// name (string(문자열만 들어올수 있음))

let obj2: IObject = { id: null, name: "green2" }; // 객체(object)

// TODO: 2) 유니온 사용법 : let 변수명: 자료형 | 자료형2 ...

// 사용법 :

let num3: number | string = 1;

let num4: number | string = "hello";

// let num5: number | string = true; // TODO: 에러

// TODO: 3) 옵셔널(?) : 객체의 속성이나 함수의 매개변수에 사용가능

// TODO: 사용하면 오류없이 실행되게 함( 자료형 | undefined 더 붙은 것과 같은 의미 )

// 사용법 :

function hello(name?: string) {

console.log(`안녕하세요 ${name}`);

}

// 함수의 사용

hello("홍길동"); // 결과 출력 : 안녕하세요 홍길동

hello(); // 결과 출력 : 안녕하세요

// TODO: 4) 배열 : 변수 및 함수 사용 시 반드시 정의된 자료형의 값으로 사용하게 강제함

// 사용법 : let 변수: Array<자료형> | 자료형2 ...>

let arr2: Array<string> = ["a", "b", "c"]; // 문자열 배열

let arr3: Array<any> = [1,2,3]; // any(모든 자료형 사용가능) 배열

let arr4: Array<number> = [1,2,3]; // 숫자 배열

// TODO: 4-1) 객체배열

let objArr2: Array<IObject> = [{ id: 1, name: "green2" }]; // JSON 문서 형태(객체배열)

return (

// TODO : html 정의

<div>

문자(바인딩) : {message} <br />

문자(일반) : {message2} <br />

<br />

숫자(바인딩) : {num} <br />

숫자(일반) : {num2} <br />

<br />

불(바인딩) : {bflag ? "참" : "거짓"} <br />

불(일반) : {bflag2 ? "참" : "거짓"} <br />

<br />

객체(바인딩) : {obj.name} <br />

객체(일반) : {obj2.name} <br />

<br />

배열(바인딩) : {arr} <br />

배열(일반) : {arr2} <br />

<br />

{/* TODO: 반복문으로 출력 : .map((value, idnex)=>()) */}

객체배열(바인딩) : {objArr.map((value)=>value.name)} <br />

객체배열(일반) : {objArr2.map((value)=>value.name)} <br />

</div>

);

}

export default Basic;

자식 컴포넌트./pages/BasicExam.tsx (typescript 적용된 버전)

- 타입스트립트 기본 사용법(바인딩, 일반 변수 정의) 연습문제

// TODO : 자식 컴포넌트./pages/Basic.tsx (typescript 적용된 버전)

// TODO : 타입스트립트 기본 사용법(바인딩, 일반 변수 정의) 연습문제

// TODO : React 컴포넌트

// TODO : 리액트 기본 컴포넌트 템플릿 단축키 사용

// 단축키 : rfce

import React, { useState } from "react";

function BasicExam() {

// TODO: 바인딩 변수

const [message, setMessage] = useState<string>(

"안녕하세요,"

);

const [message2, setMessage2] = useState<string>("아래는 곱셈 샘플입니다.");

const [message3, setMessage3] = useState<string>("곱셉");

const [num, setNum] = useState<number>(2);

const [num2, setNum2] = useState<number>(3);

const [numVal, setNumVal] = useState<number>(num * num2);

return (

// TODO : html 정의

<div>

{/* 아래 처럼 바인딩 변수를 사용해서 화면 출력을 하되 타입스크립트 코드를 적용하여 출력하세요

단, 문자는 string , 숫자는 number 를 사용해서 코딩하세요

*/}

{/* 결과 :

안녕하세요,

아래는 곱셈 샘플입니다.

곱셈

2 * 3 = 6

*/}

{message} <br />

{message2} <br />

{message3} <br />

{num + " * " + num2 + " = " + numVal}

</div>

);

}

export default BasicExam;

// TODO : 자식 컴포넌트./pages/Basic.tsx (typescript 적용된 버전)

// TODO : 타입스트립트 기본 사용법(바인딩, 일반 변수 정의) 연습문제

// TODO : React 컴포넌트

// TODO : 리액트 기본 컴포넌트 템플릿 단축키 사용

// 단축키 : rfce

import React, { useState } from "react";

function BasicExam() {

// TODO: 바인딩 변수

const [message, setMessage] = useState<string>(

"안녕하세요,"

);

const [message2, setMessage2] = useState<string>("아래는 곱셈 샘플입니다.");

const [message3, setMessage3] = useState<string>("곱셉");

const [num, setNum] = useState<number>(2);

const [num2, setNum2] = useState<number>(3);

const [numVal, setNumVal] = useState<number>(num * num2);

return (

// TODO : html 정의

<div>

{/* 아래 처럼 바인딩 변수를 사용해서 화면 출력을 하되 타입스크립트 코드를 적용하여 출력하세요

단, 문자는 string , 숫자는 number 를 사용해서 코딩하세요

*/}

{/* 결과 :

안녕하세요,

아래는 곱셈 샘플입니다.

곱셈

2 * 3 = 6

*/}

{message} <br />

{message2} <br />

{message3} <br />

{num + " * " + num2 + " = " + numVal}

</div>

);

}

export default BasicExam;

// TODO : 자식 컴포넌트./pages/Basic.tsx (typescript 적용된 버전)

// TODO : 타입스트립트 기본 사용법(바인딩, 일반 변수 정의) 연습문제

// TODO : React 컴포넌트

// TODO : 리액트 기본 컴포넌트 템플릿 단축키 사용

// 단축키 : rfce

import React, { useState } from "react";

function BasicExam() {

// TODO: 바인딩 변수

const [message, setMessage] = useState<string>(

"안녕하세요 그린컴퓨터아카데미입니다."

);

const [message2, setMessage2] = useState<string>("아래는 곱셈 샘플입니다.");

const [message3, setMessage3] = useState<string>("곱셉");

const [num, setNum] = useState<number>(2);

const [num2, setNum2] = useState<number>(3);

const [numVal, setNumVal] = useState<number>(num * num2);

return (

// TODO : html 정의

<div>

{/* 아래 처럼 바인딩 변수를 사용해서 화면 출력을 하되 타입스크립트 코드를 적용하여 출력하세요

단, 문자는 string , 숫자는 number 를 사용해서 코딩하세요

*/}

{/* 결과 :

안녕하세요 그린컴퓨터아카데미입니다.

아래는 곱셈 샘플입니다.

곱셈

2 * 3 = 6

*/}

{message} <br />

{message2} <br />

{message3} <br />

{num + " * " + num2 + " = " + numVal}

</div>

);

}

export default BasicExam;

자식 컴포넌트./pages/01_exam Func.tsx

- 매개변수 2개를 전달받아 message 변수에 저장하는 함수
- typescript 역바인딩(이벤트) 함수 정의 해보기

// TODO : 자식 컴포넌트./pages/01_exam Func.tsx

// TODO : typescript 역바인딩(이벤트) 함수 정의 해보기

// TODO : React 컴포넌트

// TODO : 리액트 기본 컴포넌트 템플릿 단축키 사용

// 단축키 : rfce

import React, { useState } from "react";

function Func() {

// TODO: 변수 정의

let [name, setName] = useState<string>("");

let [message, setMessage] = useState<string>("");

// TODO: 함수 정의 : TODO: typescript 적용

// 단축키 : nfn

// 매개변수 2개를 전달받아 message 변수에 저장하는 함수

// getInputVal("안녕하세요", 2023)}

// 사용법 : const 함수명 = (매개변수: 자료형, ...): 리턴자료형 => {}

// 리턴자료형은 생략가능

const getInputVal = (arg: string, arg2: number): void => {

setMessage(`${arg} 현재는 ${arg2} 년도입니다.`); // message(화면 바인딩)

};

// TODO: 역바인딩(이벤트) 함수 정의

// 단축키 : nfn

// TODO: 사용법 : const 함수명 = (event:이벤트자료형): 리턴자료형 => {}

// TODO: 이벤트자료형은 해당 이벤트에 마우스 커서를 가져다되면 자료형 코드가 나온다.

// 사용법 : const 함수명 = (매개변수: 자료형, ...): void 리턴자료형 => {}

// 리턴자료형은 생략가능

const onChangName = (event: React.ChangeEvent<HTMLInputElement>) => {

setName(event.target.value);

};

return (

// TODO : html 정의

{/* 이름 상자 시작 */}

<input

className="form-control mt-3 mb-3 w-25"

type="text"

name="name"

value={name}

onChange={onChangName}

입력값 : {name}

{/* 이름 상자 끝 */}

<br />

{/* 버튼 시작 */}

{/* TODO: 이벤트 함수에 매개변수 있으면 화살표함수를 사용해야함 */}

{/* TODO: 매개변수 X nClick={함수명} */}

{/* TODO: 매개변수 O react 아래 onClick={()=>{함수명(매개변수, 매개변수2..)}} */}

<button

className="btn btn-primary mt-3 mb-3"

onClick={() => getInputVal("안녕하세요", 2023)}

입력값

</button>

{/* 버튼 끝*/}

<br />

{/* 메시지 */}

{message}

</div>

);

}

export default Func;

자식 컴포넌트./pages/01_exam FuncExam.tsx

- typescript 역바인딩(이벤트) 함수 정의 해보기 연습문제
- 패스워드 상자
- 타입스크립트 함수 정의
- 역바인딩(이벤트) 함수 정의

// TODO : 자식 컴포넌트./pages/01_exam FuncExam.tsx

// TODO : typescript 역바인딩(이벤트) 함수 정의 해보기 연습문제

// TODO : React 컴포넌트

// TODO : 리액트 기본 컴포넌트 템플릿 단축키 사용

// 단축키 : rfce

import React, { useState } from "react";

function FuncExam() {

// TODO: 소스완성하기 : 타입스크립트 적용

// 결과 :

// 입력값 : !Ds1234567890

// 안녕하세요 오늘날짜는 4 일이 맞나요? 답은 true 입니다.

// TODO : 변수 정의

let [password, setPassword] = useState<string>("");

let [message, setMessage] = useState<string>("");

// TODO : typescript 함수 정의

const getInput = (arg: string, arg2: number, arg3: boolean): void => {

setMessage(`${arg} 오늘날짜는 ${arg2} 일이 맞나요? 답은 ${arg3} 입니다.`);

};

// TODO : 역바인딩(이벤트) 함수 정의

const onChangPassword = (

event: React.ChangeEvent<HTMLInputElement>

): void => {

setPassword(event.target.value);}

return (

// TODO : html 정의

{/* 패스워드 상자 시작 */}

<input

className="form-control mt-3 mb-3 w-25"

type="password"

name="password"

value={password}

onChange={onChangPassword}

입력값 : {password}

{/* 패스워드 상자 끝 */}

<br />

{/* 버튼 시작 */}

<button

className="btn btn-primary mt-3 mb-3"

onClick={() => getInput("안녕하세요", 4, true)}

입력값

</button>

{/* 버튼 끝 */}

{/* 메시지 */}

<br />

{message}

</div>

);

};

export default FuncExam;

자식 컴포넌트./pages/02_exam/ Etc.js

- 1) 읽기 전용(readonly) : 값 수정 불가
- 2) 튜플(tuple) : 정해진 자료형의 고정된 크기의 배열
- 3) enum : 열거형, 상수를 대체해서 사용함 아래 상수에 자동으로 0 ~ n 1씩 증가되어 저장됨, 값도 직접 지정 가능
- 4) 별명 붙이기 사용법 : type 별명 = 자료형 | 자료형2 ... 사용 : let 변수명 : 별명 = 값;
- 5) 타입 추론 : 모든 변수에 자료형을 지정하지 않아도 값으로 추론하는 기능을 부여
(1) 변수의 초기값 : 생략가능
(2) 기본값이 있는 매개변수 : 생략가능
(3) 리턴자료형은 함수에서 생략가능
- 6) 타입(자료형) 단언 : 활용 : 컴퓨터는 알수없으나 개발자는 확실히 그 변수의 자료형을 확신하면 사용가능
사용법 : 변수 as 자료형 / 가정 : isNumber 가 true 이면 무조건 val 값은 정수가 된다고 확신

// TODO : 자식 컴포넌트./pages/02_exam/ Etc.js

// TODO : typescript 내장함수

// TODO : React 컴포넌트

// TODO : 리액트 기본 컴포넌트 템플릿 단축키 사용

// 단축키 : rfce

import React from "react";

function Etc() {

// TODO: 1) 읽기 전용(readonly) : 값 수정 불가

interface IHello {

readonly name: string;

}

let val: IHello = { name: "hello" }; // 초기값 정의

// val.name = "hello2"; // x(readonly) ,수정시 에러

// TODO: 2) 튜플(tuple) : 정해진 자료형의 고정된 크기의 배열

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

console.log("tuple", tuple);

// tuple = ["a", 1, 2]; // 값이 3개가 들어와서 에러(x)

// tuple = [1, "a"]; // 자료형 순서가 맞지않음 에러(x)

// TODO: 3) enum : 열거형, 상수를 대체해서 사용함

// TODO: : 아래 상수에 자동으로 0 ~ n 1씩 증가되어 저장됨, 값도 직접 지정 가능

enum Week {

Sun, // Sun = 0

Mon, // Mon = 1

Tue, // Tue = 2

Wed = 5, // Wed = 5 (개발자가 강제로 값을 저장)

Thu, // Thu = 6

Fri, // Fri = 7

Sat, // Sat = 8

}

console.log("Week", Week);

console.log("Week", Week.Sun);

// TODO: 4) 별명 붙이기

// TODO: 사용법 : type 별명 = 자료형 | 자료형2 ...

// TODO: 사용 : let 변수명 : 별명 = 값;

type alisuUser = string | number;

let person: alisuUser = "hong";

console.log(person);

// TODO: 5) 타입 추론 : 모든 변수에 자료형을 지정하지 않아도 값으로 추론하는 기능을 부여

// TODO : (1) 변수의 초기값 : 생략가능

// let num:number = 10; // 사용가능

let num = 10; // 생략 사용가능

// TODO : (2) 기본값이 있는 매개변수 : 생략가능

// 모던자바스크립트 사용법 : function add(매개변수, 매개변수2=0){}

// 함수의 사용 : 함수명(1) => 함수명(1, 0)

function add(a: number, b = 0): number {

return a + b;

}

// TODO : (3) 리턴자료형은 함수에서 생략가능

function add2(a: number, b = 0) {

return a + b;

}

// TODO: 6) 타입(자료형) 단언 :

// TODO: 활용 : 컴퓨터는 알수없으나 개발자는 확실히 그 변수의 자료형을 확신하면 사용가능

// TODO: 사용법 : 변수 as 자료형

function someFunc(val: string | number, isNumber: boolean) {

// TODO: 가정 : isNumber 가 true 이면 무조건 val 값은 정수가 된다고 확신

if (isNumber === true) {

(val as number).toFixed(2);

}

return (

// TODO : html 정의

);

}

export default Etc;

자식 컴포넌트./pages/03_exam/ Counter.js

- typescript 내장함수 카운팅 연습문제

// TODO : 자식 컴포넌트./pages/03_exam/ Counter.js

// TODO : typescript 내장함수 카운팅 연습문제

// TODO : React 컴포넌트

// TODO : 리액트 기본 컴포넌트 템플릿 단축키 사용

// 단축키 : rfce

import React, { useState } from "react";

function Counter() {

// TODO : 변수 정의

let [count, setCount] = useState<number>(0);

// TODO : 함수 정의

// 증가

let setIncreate = () => {

setCount(count++);

};

// 카운팅 함수 감소(값 0 보다 클 때만 실행)

let setDecreate = () => {

if (count > 0) {

setCount(count--);

}

};

return (

// TODO : html 정의

<div>

<h3>Counter 예제</h3>

{/* // TODO: 연습문제 숫자를 감소시키는 함수를 작성하고 화면에 표시하세요 */}

<p>값 : {count}</p>

</div>

);

}

export default Counter;

자식 컴포넌트./pages/04_exam/ Book.js
./types/IBook.ts 책방객체명 (객체 자료형을 정의하는 파일)

- typescript 내장함수 객체배열 반복문 사용
- 새로운 객체타입(자료형) 정의한 파일 import

// TODO : ./types/IBook.ts 책방객체명 (객체 자료형을 정의하는 파일)

export default interface IBook {

/* //TODO: 자식 컴포넌트./pages/04_exam/ Book.js 객체변수 */

// id: 1,

// title: "어떻게 배울 것인가",

// publisher: "비즈니스북스",

// author: "존 맥스웰",

// stock: 2,

id?: number;

title: string;

publisher: string;

author: string;

stock: number;

}

// TODO : 자식 컴포넌트./pages/04_exam/ Book.js

// TODO : typescript 내장함수 객체배열 반복문 사용

// TODO : 새로운 객체타입(자료형) 정의한 파일 import

import IBook from "../../types/IBook";

// TODO : React 컴포넌트

// TODO : 리액트 기본 컴포넌트 템플릿 단축키 사용

// 단축키 : rfce

import React, { useState } from "react";

function Book() {

// TODO: 변수 정의

const initialBooks = [

{

id: 1,

title: "어떻게 배울 것인가",

publisher: "비즈니스북스",

author: "존 맥스웰",

stock: 2,

{

id: 2,

title: "신경끄기의 기술",

publisher: "갤리온",

author: "마크 맨슨",

stock: 0,

{

id: 3,

title: "부의 미래",

publisher: "청림출판",

author: "앨빈 토플러",

stock: 5,

{

id: 4,

title: "기획자의 습관",

publisher: "홍익출판사",

author: "최장순",

stock: 4,

];

// TODO: 바인딩 변수(객체배열) 정의 : typescript 적용

// TODO : 사용법 : let [변수명, set변수명] = useState<Array<객체자료형>>(초기값);

// TODO: 객체자료형 : 따로 정의(IBook) : 이름규칙(명명법) I이름

let [books, setBooks] = useState<Array<IBook>>(initialBooks); // 객체배열

// TODO : 함수 정의

return (

// TODO : html 정의

<div>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

{/* TODO: 반복문 : 배열변수.map((value, index)=>(<태그>{value.속성명}</태그>)) */}

{/* TODO: 반복대상 : 행(<tr> <td></td> </tr>) */}

{books.map((value, index) => (

// TODO: 테이블 tr/td 태그

<td>{value.id}</td>

<td>{value.title}</td>

<td>{value.publisher}</td>

<td>{value.author}</td>

<td>{value.stock}</td>

</tr>

))}

</tbody>

</table>

</div>

);

}

export default Book;

자식 컴포넌트./pages/04_exam/ WebtoonExam.js
./types/IWebtoon.ts 웹툰객체명 (객체 자료형을 정의하는 파일)

- typescript 내장함수 객체배열 반복문 사용 연습문제
- 새로운 객체타입(자료형) 정의한 파일 import

// TODO : ./types/IWebtoon.ts 웹툰객체명 (객체 자료형을 정의하는 파일)

export default interface IWebtoon {

/* //TODO: 자식 컴포넌트./pages/04_exam/ WebtoonExam.js 객체변수 */

// id: 1,

// name: "햄스터와 그녀",

// link: "https://webtoon.kakao.com/content/%ED%96%84%EC%8A%A4%ED%84%B0%EC%99%80-%EA%B7%B8%EB%85%80/1625?tab=episode",

// img: "http://t1.daumcdn.net/webtoon/op/478cdf37f585607982ffa9e35b432e8503be8a54",

// isUpdate: true,

id?: number;

link: string;

img: string;

isUpdate: boolean;

}

// TODO : 자식 컴포넌트./pages/04_exam/ WebtoonExam.js

// TODO : typescript 내장함수 객체배열 반복문 사용 연습문제

// TODO : 새로운 객체타입(자료형) 정의한 파일 import

import IWebtoon from "../../types/IWebtoon";

// TODO : React 컴포넌트

// TODO : 리액트 기본 컴포넌트 템플릿 단축키 사용

// 단축키 : rfce

import React, { useState } from "react";

function WebtoonExam() {

// TODO : 변수 정의

const initialWebtoon = [

{

id: 1,

link: "https://webtoon.kakao.com/content/%ED%96%84%EC%8A%A4%ED%84%B0%EC%99%80-%EA%B7%B8%EB%85%80/1625?tab=episode",

img: "http://t1.daumcdn.net/webtoon/op/478cdf37f585607982ffa9e35b432e8503be8a54",

isUpdate: true,

{

id: 2,

link: "https://webtoon.kakao.com/content/%ED%94%84%EB%A1%AC-%EC%8A%A4%ED%83%80/1573",

img: "http://t1.daumcdn.net/webtoon/op/a7fb953d722c1130bfc18440f7e3ce448ece57a1",

isUpdate: true,

{

id: 3,

link: "https://webtoon.kakao.com/content/%EC%9C%84%EB%8C%80%ED%95%9C-%EB%A1%9C%EB%A7%A8%EC%8A%A4/1564",

img: "http://t1.daumcdn.net/webtoon/op/a816281cb4df5c50a20ac386fd6e496643d0f085",

isUpdate: false,

{

id: 4,

link: "https://page.kakao.com/content/49824106",

img: "http://t1.daumcdn.net/cartoon/5913FCAC0234C50001",

isUpdate: false,

];

// TODO : 바인딩 변수(객체배열) 정의 : typescript 적용

let [webtoon, setWebtoon] = useState<Array<IWebtoon>>(initialWebtoon);

return (

// TODO : html 정의

<div>

<h2>Free Webtoon</h2>

<ul>

{/* 반복문 : li 대해서 */}

{webtoon.map((item) => (

</a>

{/* item.isUpdate 있으면 span 태그 실행 */}

{item.isUpdate && <span className="tag">N</span>}

</li>

))}

</ul>

</div>

);

}

export default WebtoonExam;

저작자표시 비영리 동일조건

'Visual Studio Code' 카테고리의 다른 글

[React] chapter_09 (0)	2023.09.01
[React] chapter_08 (0)	2023.09.01
[React] chapter_07 (0)	2023.09.01
[React] chapter_06 (0)	2023.08.31
[React] chapter_05 (0)	2023.08.31

기술 블로그

[React&Typescipt] chapter_01 ~ 04

'Visual Studio Code' 카테고리의 다른 글

티스토리툴바