Sec 02. React 기초 - 설치, Counter

1. 리액트 개발환경 설정

- vs code 다운로드

- node.js 다운로드

이미 다운로드 완료!!

 

2. 리액트 설치하기

설치 완료!

vite 설치 완! / styled-components antd @ant-design/icons 설치

 

 

리액트 프로젝트 구조

 

vite.config.js -> server 관련 변동

https://vitejs.dev/config/

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
  port : 3000,
  host: "0.0.0.0"
  }
})

으로 바꾸면 port와 host를 바꿀 수 있음

 

package.json -> 프로젝트에 설치된 라이브러리 목록들이 존재 

script -> 리액트 어플리케이션을 로컬로 개발환경에서 실행시키고 빌드할 수 있는 스크립트들

 

index.html  -> html 코드 변경이 필요할 때 여기서 변겅

타이틀 변경 시 -> <title> AI회고록 | ChatGPT </title>

 

main.jsx

'./index.css' -> 우클릭 후, 전부 삭제 시 본연의 html 등장

 

 

리액트 Counter 예제

react component = 함수

(1) 변수 정의 -> useState() 사용 -> count 값이 변할 때 리액트가 자동으로 html 코드를 업데이트 시켜주길 원하기 때문

(2) 함수 정의 

- 비즈니스 로직 처리 가능

- ex) 버튼이 클릭 되었을 때 +1 / -1을 증가시키도록 아래 이벤트와 그리고 변수들을 연결시킬 수 있는 중간의 컨트롤러 역할을 함

html과 유사한 jsx 문법 사용

-> html + 리액트 컴포넌트 작성 가능