리액트 컴포넌트
컴포넌트 : 리액트로 만들어진 앱을 이루는 최소한의 단위
- 리액트는 여러 컴포넌트 조각으로 이루어짐
함수형 컴포넌트
function App(){
return <h1>안녕하세요<h1>
}클래스형 컴포넌트
class App extends Component{
render(){
return <h1>안녕하세요<h1>
}
}Create React App 폴더와 파일 기본 구조
이름을 수정하면 안되는 파일들
-
public/index.html
- 페이지 템플릿
-
src/index.js
- 자바스크립트 시작점
package.json
-
프로젝트에 대한 정보가 들어있음
-
필요한 라이브러리와 라이브러리의 버전들 명시
- 리액트 앱 실행, 빌드, 테스크 등의 스크립트 명시
- 프로젝트에서 자주 실행해야 하는 명령어를 scripts로 작성해두면 npm 명령어로 실행 가능
- npm run start로 리액트 앱 실행 가능
- 소스코드를 입력할 때 문법이나 코드 포맷을 체크해주는 거에 대한 설정
index.html
-
웹 사이트의 홈페이지에 사용된 이름
ex) www.abc.com => www.abc.com/index.html ex) www.abc.com/about.html => about.html 파일 사용
SPA
App.js 파일의 소스 코드를 변경하면 변경한 부분이 화면에 적용
- public/index.html
div element id를 root로 설정
- src/index.js
자바스크립트의 시작점
위의 root id를 가진 div element를 잡아줌
그 element 안에서 화면 꾸미기 가능
SPA란?
웹 사이트 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현
- HTML5의 History API를 사용
JSX 문법 규칙
- JSX는 컴포넌트에 여러 element 요소가 있다면 반드시 부모 요소 하나로 감싸주기
Frontend developer