React 압축 요약

React를 사용하는 이유

• 페이지 전환 없이 앱 같은 느낌의 웹을 만들기 위해서 => 한 페이지에서 다 하는 SPA(Single Page Application) 방식 유행
• 프론트의 비중이 높아짐(데이터를 많이 다루기 때문에) => 한 번 데이터를 받으면 애플리케이션 내에 상태 유지를 할 수 있음
• FLUX 패턴을 도입하여 데이터 흐름의 일관성이 있어 추적하기 쉬워짐
  • ACTION -> DISPATCHER -> STORE -> VIEW
  • 대규모 웹 사이트에 적합
• 변수 겹침, 가독성 문제 해결
  • jsx, tsx: 바벨, 웹팩, vite, swc 툴로 js 변환 필요
  • 컴포넌트(js + html)

 

React 프로젝트 설정

jsx 파일은 브라우저가 인식하지 못하므로 js 파일로 변환하기 위한 설정

npm create vite@latest

App.js의 function App에 관리 할 데이터를 state로 배열 설정하고, return 하는 html 코드는 반복문으로 출력할 수 있도록 한다.

App.css 기본 임포

 

주요 문법

<div className="">

<label htmlFor="">

<> (fragment)를 가장 최상위 태그로 감싸서 <div> 여러 개 쓰기

 

 

 

레퍼런스

https://www.youtube.com/watch?v=We9W395EUmw