리액트 프로젝트를 생성하면 이렇게나 많은 파일들이 자동으로 생성된다.
여기서 필요한 것과 불필요한 것을 나뉘어서 불필요한 것은 과감하게 삭제할 것이다.
나는 개발을 시작할 때 딱 필요한 파일들만 남겨두고 모두 삭제한채로 개발을 시작한다.
삭제한다고 해서 문제될 것 딱히 없기 때문이다
먼저 public 폴더에 index.html을 두고 다 삭제한다.
그리고 index.html 파일 내 코드들도 필요한 것만 남기고 삭제한다.
폴더 안을 보면 삭제하는 것들이 리액트png 로고 이런 것들이어서 딱히 상관없다는 것을 알 수 있다.
src 폴더도 정리한다.
index.js, App.js 파일만 남기고 모두 삭제한다.
css 파일 같은 경우는 필요하다면 내가 직접 만들면 되기 때문에 전혀 상관없다!
파일들을 삭제하면 에러가 날 수 있는데 에러가 나는 코드들을 찾아서 그것들도 지워주면 된다.
파일들을 import 했는데 해당 파일을 삭제해서 경로를 찾을 수 없어 나오는 에러들일 것이다.
index.html / index.js 기본 이해
index.html : 웹 브라우저에서 가장 먼저 실행되는 파일
index.js : index.html 열리고 나서 그 다음으로 실행되는 파일
index.html 파일에는 <body> 안에 id가 "root"인 <div> 태그가 있고
index.js 파일에서는 id가 "root"인 <div> 태그를 찾아서 React 루트를 생성
생성된 React 루트에서는 App 컴포넌트를 렌더링
이후 React 애플리케이션이 시작되고,
App 컴포넌트 내부의 다른 컴포넌트들이 트리를 형성하여 전체 애플리케이션을 구성
(컴포넌트는 뒤쪽에서 설명할 것임 ..!)
우리가 많은 컴포넌트들과 파일을 만들지만 결국은 index.html 안의 body 태그에 그려진다는 것
JSX : JavsScript 의 확장 문법
JSX 문법은 js에서 html문법을 편리하게 활용할 수 있는 문법
js의 확장이다보니 html 속성들을 활용할 때 주의해야할 부분들이 있다.
HTML과 다른 속성명
예를 들면
js, html에서 동일한 이름으로 사용하는 기능들이 있는데 대표적으로 for, class가 있다.
jsx는 js의 확장이다보니 이럴 때 html 속성을 조금 변경해서 사용한다.
- class > className
<div className="App">이런식으로 태그에 class명을 줄 때 className을 사용하는 것!
- for > htmlFor
<label htmlFor="title"></label>
<input type="text" id='title'/>js에서는 반복문 for이 있고, html에서는 label의 속성 for이 있다.
이러한 경우 html 속성을 htmlFor로 변경해서 사용한다.
- 여러 단어가 조합된 속성들은 카멜 케이스로 작성
onclick, onblur, onfocus 등과 같은 이벤트 속성들을 onClick, onBlur, onFocus 처럼 카멜 케이스로 작성
어렵진 않지만 헷갈릴 수 있는 것들.. 몇가지가 더 있지만 그건 개발하면서 그때 그때 알아가는 게 효율적일 듯 하다.
'Web > React' 카테고리의 다른 글
| React, RN 프로젝트 시작 명령어 (1) | 2024.04.01 |
|---|---|
| [React] 리액트 라우팅 URL 경로 분리 (0) | 2024.03.12 |
| [React] 개발 환경 세팅 및 기본 커맨드 (0) | 2024.01.10 |
| 서버 응답, 다음 페이지로 전달하기 useNavigate, useLocation (1) | 2023.12.30 |
| AxiosError 400 Bad Request 해결하기 (0) | 2023.12.27 |