이론 강의

어떻게 진행될 것인지 ?

• 타입 스크립트로 진행될 것이다.

  https://opentutorials.org/module/6309
  이고잉 코치님의 타입스크립트 강의 최초공개!!!!!!!!

1. 리액트 실행

폴더와 함께 만들고 싶을 때: npx create-react-app my-app --template typescript
폴더 안에 셋팅하고 싶을 때: npx create-react-app . --template typescript

• 폴더 안에 세팅을 해보자~!

2. 파일 경로 확인

• app.tsx안에서 어떤 파일이 import가 되어있는지 확인!!

3. 빌드

npm build

• build 파일이 생성되면 성공!
• 새로운 터미널창을 열고
  npx serve -s build

4. 배포

• 넷트리파이 드롭에 빌드한 파일을 드롭!!

  https://app.netlify.com/drop

타입스크립트

기초!

타입스크립트 연습 사이트 : https://www.typescriptlang.org/play

리액트는 ANY 타입을 싫어한다!!!

타입스크립트를 이용해서 리액트를 만져보자~

//app.tsx
function Counter(props: { title: string }) {
  console.log(props);
  return (
    <>
      <h1>{props.title}</h1>
      <button>+</button> 0
    </>
  );
}
function App() {
  return (
    <div>
      <Counter title="불면증 카운터"></Counter>
      <Counter title="고양이 카운터"></Counter>
      <Counter title="Counter"></Counter>
    </div>
  );
}

• Counter 컴포넌트에 타입을 명시했다.
• 가져오는 값을 대부분 props라고 한다.(다른 이름도 가능)

props 추가!

• 일단 타입을 추가해주자

type CounterProps = {
  title: string;
  initValue?: Number;// 이 props가 올 수도 있고 안올 수도 있고~!
};

props를 지역변수로 선언해서 가독성이 더 좋게 해보자!

type CounterProps = {
  title: string;
  initValue?: Number;
};
function Counter({ title, initValue }: CounterProps) {
  return (
    <>
      <h1>{title}</h1>
      <button onClick={up}>+</button> {initValue}
    </>
  );
}

• 구조분해할당을 이용해 props.title이 아니라 그냥 title만 사용~!

이제 onClick을 처리해보자~!

• initValue의 값을 증가시키는 일을 해보자!

function Counter({ title, initValue }: CounterProps) {
  const count = useState(initValue);
  function up() {
    conut += 1;
  }
  return (
    <>
      <h1>{title}</h1>
      <button onClick={up}>+</button> {initValue}
    </>
  );
}

• useState를 사용할건데 저렇게 쓰면 오류 난다

  첫번째 원소는 읽을 때 쓰고, 두번째 원소는 변경할 때 사용한다.

unction Counter({ title, initValue }: CounterProps) {
  const countState = useState(initValue);
  let count = countState[0];
  let setCount = countState[1];
  function up() {
    setCount(count + 1);
  }
  return (
    <>
      <h1>{title}</h1>
      <button onClick={up}>+</button> {count}
    </>
  );
}

• 에러가 나긴 하는데 x누르고 실행하면 된다 ㅋㅎㅋㅎ
• 에러가 나는 이유는 initValue에 number타입을 명시했는데 undefined가 들어갈 수 있어서 오류가 난다~
  • initValue에 기본 값을 명시해주자!

  function Counter({ title, initValue = 0 }: CounterProps) {
  	const countState = useState(initValue);
    ...
    }

  • 이런 식으로!!

props를 더 쉽게 작성!!

const [count, setCount] = userState(initValue);

• 이렇게!!

import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";
type CounterProps = {
  title: string;
  initValue?: number;
};
function Counter({ title, initValue = 0 }: CounterProps) {
  // const countState = useState(initValue);
  // let count = countState[0];
  // let setCount = countState[1];
  const [count, setCount] = useState(initValue);
  function up() {
    setCount(count + 1);
  }
  return (
    <>
      <h1>{title}</h1>
      <button onClick={up}>+</button> {count}
    </>
  );
}
function App() {
  return (
    <div>
      <Counter title="불면증 카운터" initValue={0}></Counter>
    </div>
  );
}

export default App;

• 전체 코드는 이렇게 된다~!

실습!

1

• JSX 문법으로 HTML 구현하기
  쉽다!!

2

• 함수에 JSX 문법 사용하기

3

• 함수 컴포넌트 만들기

4

• 컴포넌트 합치기!!