[React] React에 관한 기초 지식

React를 처음 접하는 사람들이 알고 있으면 편한 기초 지식 모음

📍React를 왜 사용할까?

Single Page Application 사이트에서는 보통 html파일을 1개만 쓰면서, 페이지 전환시 해당되는 html부분만 바꿔서 보여준다.
이 때, 이 html 코드를 JavaScript로만 작성하기엔 복잡하고 길어지기 때문에 React 라이브러리를 사용한다.
-> html 코드 보관 및 재사용에 용이함!

📍React project 파일 구성

보통 npx create-react-app 명령어를 통해 초기 react 프로젝트 파일을 생성한다.

• 🗂 node-modules: 프로젝트 구성에 필요한 모든 라이브러리 모음집
• 🗂 public: html, img 파일과 같은 static 파일 보관함
• 🗂 src: source code 보관함으로, 우리가 코드 짜는 곳
• 📄 package.json: 프로젝트 정보 파일로, 프로젝트 정보 변경 가능

📍App.js

• 메인 페이지이므로, 우리는 이곳에 개발을 하게된다.
• 이 파일은 JSX 언어로 자바스크립트.js 파일에서 쓰는 html 대용품이라고 볼 수 있다.
• 개발 시작시, <div></div> 태그를 제외한 안에 있는 모든 태그를 제거후 시작하면 된다.

📍App.js에 html 코드를 작성해도 되는 이유

위의 사진을 보면,
App.js에 JSX(JavaScript+XML) 코드를 작성 -> 이 파일을 프로젝트 내에 있는 index.js라는 파일이 변환 -> index.html에 넘김

당연한거지만, 가장 기본적인 배경을 알고 있다면 리액트에 조금 더 접근하기 쉬울것 같다.
(물론 나에게도 해당되는 말)