React 파일 렌더링 순서
현재 App.js 파일의 소스코드를 변경하면 변경한 부분이 화면에 적용이 된다.
이게 어떤 순서대로 실행되고 있는지 봐보면,
public/index.html
HTML 템플릿파일. root를 div로 선언해 놓음
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
웹브라우저의 렌더링 소스 (html)를 보면
root가 App의 내용이 추가되어 있음
src/index.js
자바스크립트 시작점. 여기서 위에 root id를 가진 div 엘리먼트를 잡아주며, 그 엘리먼트 안에서 화면을 꾸밀 수 있게 된다
onst root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Multi Page Application
index.html 템플릿이 한 개라면 2개 이상 페이지를 만들 때는 a.html , b.html 이런식으로 만들었다
전통적인 웹 사이트를 만들때 사용하는 방식.
SPA (Single Page Application)
요즘엔 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현.
HTML5의 History API를 사용해서 가능하게 만든다.
자바스크립트 영역에서 History API를 이용해서 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 해 줌.
React-Router-Dom -> History API 사용
history의 메서드
| back() | 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드. 브라우저의 뒤로 가기를 누르는 것과 같은 효과 |
| forward() | 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드. 브라우저의 앞으로 가기를 누르는 것과 같은 효과 |
| go() | 특정한 세션기록으로 이동하게 해주는 비동기 메서드. 양수이면 숫자만큼 앞으로 , 음수이면 숫자만큼 뒤로 이동한다 go(1) : 앞으로 1번 , go(-2) : 뒤로 2번 |
| pushState() | 주어진 데이터를 세션기록에 넣는다. 직렬화 가능한 모든 javascript객체를 저장하는 것이 가능 |
| replaceState() | 최근 세션 기록 스택의 내용을 주어진 데이터로 교체한다 |
'프로그래밍&IT > React & CSS' 카테고리의 다른 글
| [Fast Campus , React] 6. TicTacToe 앱 만들기 (2) - props, state (0) | 2023.09.19 |
|---|---|
| [Fast Campus , React] 5. JSX , TicTacToe 앱 만들기 (1) (0) | 2023.09.18 |
| [Fast Campus , React] 3. 프로젝트 설치와 구조 (0) | 2023.09.17 |
| [Fast Campus , React] 2. 가상돔 (0) | 2023.09.16 |
| [Fast Campus , React] 1. React란? (0) | 2023.09.11 |
