[유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 타입스크립트 개념과 React기본 배우기

타입스크립트 

타입스크립트에는 기본타입과 함수타입이 있다. 

기본타입

• string (문자열)
• number (숫자)
• boolean (불리언)
• object (객체)
• Array (배열) 2가지로 사용가능
• tuple (튜플)
• any (모든 타입 허용- 사용에 주의하자)
• null 
• undefined

함수타입

함수에는 인자와 매개변수가 있다. 

함수 타입을 지정하는 방법은 2가지가 있다. 

• 매개변수에 타입 지정하기
• 반환값에 타입 지정하기

이때 옵셔널 파라미터(?)로 해당인자를 지정하면 매개변수 생략이 가능하다. 

 

---

React 개념

npm, npx, yarn

위 명령어들은 앞으로 패키지들을 설치할때 많이 쓰게 된다. 

이때 패키지=라이브러리와 동일하다고 생각하면 된다. 

npm: 싱글스레드(한번에 하나의 작업을 처리)

yarn: 멀티스레드(한번에 여러개의 작업을 처리)

패키지버전 해석하기

다양한 패키지들을 설치하고 확인해보면 아래와 같은 형태로 나온다. 

이때 숫자 순서대로 major-minor-patch순서로 해석하면 된다. 

예를 들어 아래 그림을 보면

ts-node의 경우 10번의 major 업데이트, 9번의 minor업데이트, 2번의 patch 업데이트가 되었다는 뜻이다.

 

React 설치하기

Vite로 설치하는 것을 추천한다!! (cra 설치도 가능하지만 해당방법의 마지막 업데이트는 2년전이라 강사님이 추천하지 않는다고 하심!)

 

Vscode 기준으로 

아래 두 명령어를 이용해 vite를 설치한다. 

npm create vite@latest .

npm install

 

그리고 npm run dev

명령어로 서버를 열어주면 코드변경내용을 화면에서 바로 확인가능하다. 

해당 명령어의 과정은 

npm run dev -> index.html -> main.tsx -> 웹브라우저 순으로 뿌려진다. 

리액트의 확장자

총 3가지가 있다. 

• .jsx -> 자바스크립트
  항상 하나의 루트태그만 반환해야함
• .tsx -> 타입스크립트
• .ts

리액트에서 컴포넌트를 생성한다

이 말은 createElement메서드나 jsx확장문법을 사용한다는 뜻이다!

---

React의 css

카멜표기법을 사용하자!

(font-size와 같은 경우는 script가 -를 마이너스로 인식하므로 fontSize형태로 처리하자)

 

1. 인라인 스타일 방법

const App = () => {
  return <>
  <h1 style={{color: "blue", fontSize:"10"}}> App Component</h1>
  </>
};


export default App;

이렇게 코드 내부에 style 태그로 넣어준다. 

 

2. 외부 css 파일 생성

App.css

h1{
    color:blue;
}

위처럼 App.css라는 css파일을 만들고

사용할 파일에서 import해준다. 

import "./App.css";

const App = () => {
  return <>
  <h1> App Component</h1>
  </>
};


export default App;

 

이 경우 전역 css가 되므로, main.tsx에만 넣어줘야 한다고한다. 

 

3. module css사용

이 경우는 태그선택자로 사용이 불가하다. 

예를 들어

App.module.css

.title{
    color:blue;
    font-size: 20px;
}

위의 모듈을 만들고 아래 파일에 import해주면 된다. 

import styles from "./App.module.css";

const App = () => {
  return (
    <>
    <h1> App Component</h1>
    <p className={styles.title}>Text</p>
    <Second /> 
    </>
  )
  
};

export default App;

---

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.