[TSX] react + typeScript 시작하기

안녕하세요 react 공부 2일차입니다.

1일차에서는 node.js 설치, npm 설치, git 연동, tailwindCss 연동을 하고 간단한 테스트를 했었습니다.

오늘은 모든 라이브러리들, 모듈 등 구축되어 있는 환경에서 intelliJ로 간단한 설명을 적어보려 합니다.

구축하는 방법은 아래 링크를 통하여 자세한 방법 확인할 수 있습니다.

[NODE] intelliJ + node + git 실행환경 구축

---

시작하기 전 간단히 TSX에 대해 설명해보려고 합니다. 

TS와 TSX의 차이

• TS (TypeScript): TypeScript는 JavaScript 기반이며, 정적 타입 검사를 지원합니다. [.ts] 파일 확장자를 사용합니다.
• TSX (TypeScript with JSX): TSX는 React에서 UI를 작성하는데 사용됩니다. React에서 JSX를 사용하는 경우 [.tsx] 확장자를 사용합니다.

TS는 JS 코드에서 타입 검사와 컴파일 타임 오류 검사를 수행하고, TSX는 React에서 UI를 작성할때 타입 검사를 수행하는데 사용됩니다.

TS와 TSX 모두 TypeScript언어를 사용하므로 사용할 수 있는 모든 기능과 타입 검사 기능을 TSX에서도 사용 할 수 있습니다.

TSX는 React 컴포넌트와 함께 사용되기 때문에 React의 JSX 문법도 함께 사용 가능합니다.

두가지 모두 TypeScript 컴파일러에 의해 JavaScript 코드로 변환됩니다.

 

IntelliJ 실행

 

1. IntelliJ 실행

저는 react-playground로 시작하려 합니다. 처음 시작하신다면  'open'을 클릭하여 본인이 생성한 폴더를 열면 시작됩니다.

 

2. 로컬 서버 실행

npm run dev

터미널(구축한 폴더 경로에서) npm run dev를 실행하 로컬 서버를 시작합니다.

http://localhost:5173 을 실행하면 로컬환경이 시작된 것을 보실 수 있습니다.

control + c 로 종료 할 수 있습니다.

실행 시 보이는 웹

3. 각 파일들 기본 설명

 

src 파일 안에 여러가지 파일들이 있습니다.

1. index.html : root 가 보이고, module로 main.tsx를 호출합니다.

<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>

 

2. main.tsx : App.tsx를 호출하고, root가 없다면 root를 생성하고 render합니다. 그리고 App함수를 실행합니다.

import App from './App.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

 

3. App.tsx : App함수가 있는 tsx파일로 사용자에게 보여주는 첫 웹 화면입니다.

 

---

저는 src 한단에 component 라는 폴더를 생성 후 tsx에 새로운 함수를 만들어 App.tsx에 보여주려합니다.

1. component/MyButton.tsx 생성

import { useState } from 'react'


// MyButton 함수 생성()
function MyButton(props : {
   defaultColor: string
}) {

// 색상 변하는 버튼에 사용
  const [color, setColor] = useState(props.defaultColor)
  
  // 색상변환 changeColor 함수를 생성하여 defaultColor를 받아와 버튼 클릭 시 변환
  const changeColor = () => {
    if (color == props.defaultColor) {
        setColor("text-teal-500");
    } else {
        setColor(props.defaultColor);
    }
  }

  return (
  	// 버튼 클릭 시 색상 변하는 버튼 호출
    <button className={color} onClick={() => {
        changeColor();
    }}>button</button>
  );
}

// MyButton export
export default MyButton

 

2. App.tsx에 호출

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

function App() {
  const [count, setCount] = useState(0)
  
  // 버튼 4개 생성(각 버튼 마다 색상 지정)
  const buttons = [
    { color : "text-green-500" },
    { color : "text-orange-500" },
    { color : "text-blue-500" },
    { color : "text-red-500" },
  ]
  return (
      <div>
        
        // 색상 변환 버튼(map으로 forloop)
        <div>
            {(buttons.map((button, i) =>
                <MyButton key={i} defaultColor={button.color}/>
            ))}
        </div>
      </div>
  )
}

export default App

 

3. 결과

클릭하면 색상이 변하는 버튼 4개가 잘 보이는 것을 확인할 수 있습니다.

 

 

---

 

오늘은 처음 시작 시 보이는 파일들 설명, 그리고 간단하게 파일 만들고 실행하는 법을 작성하였습니다.

React에 대해 더 자세하게 공부하고 싶으시다면 아래 링크를 통해 확인해보시길 바랍니다.

Quick Start – React

 

 

 

---

공부하면서 유용했던 부분 메모겸 공유하고자 끄적입니다.

고쳐야하는 부분있다면 댓글 남겨주시면 수정하겠습니다.

행복한 하루 보내세요 (❁´◡`❁)