react 이야기

react를 이용해 front-end를 시작해보자 (2024-01-04)

일단 필자는 프론트엔드에 관한 지식이 전무하기에 정말 사소한데 이걸 틀리네? 싶은 것들이 많이 있을 것이다.

react vite 설치

vscode의 cmd에서 아래 코드를 이용해 설치한다.

-D : 실제 서비스에서는 필요가 없고 개발 환경에서만 사용할 때 적용하는 코드

• npm install --global yarn vite
• yarn create vite [프로젝트 이름] --template react-ts
• cd [프로젝트 이름]
• yarn install
• yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
• yarn add -D eslint-config-airbnb-base eslint-plugin-import
• yarn add -D prettier
• yarn add -D tailwindcss postcss autoprefixer
• yarn add react-router-dom
• npx tailwindcss init -p
• yarn dev로 실행

가져오기 방식

import App from "./App.css";

const App = require("./App.css");

useState()

상태가 변할 때 다시 페이지를 로딩시켜주는 함수

1. count는 현재 상태값을 저장하는 변수
2. setCount는 상태값이 변경되면 갱신해줄 함수
3. useState의 ()안에 있는 값은 초기화 값

import React, { useState } from "react";

const [상태, 상태변경함수] = useState(초깃값);
const [count, setCount] = useState(0);

파일에 관한 설명

main.tsx

main.tsx에서 <App />을 ./App.tsx 파일에서 가져와 넣었다.

index.html

실제로 배포되는 코드

이 안에 /src/main.tsx를 모듈로 가져온 것이다.

app.tsx

./App.css에서 css를 가져오고 그 속성값을 이용해서 코드를 만든 후 main으로 보낸다.

app.css

app.tsx를 위한 css

index.css

이것도 main을 위한 css

공부중

DH의 개발 공부로그 최고

리액트 강의

[React] React 개발환경 세팅하기 - React Router 설치 및 간단정리

[React] 리액트에서 .env 환경변수 사용하기!

[React] 😃 react-dom에 대해 이해하기

[React] Vite 사용하기!

[React] React 란?