211027 리액트 입문 SPA

일주일만에 다시 리액트를 공부한다.

대학교를 다니며 알바를 하며 장학금을 받는 대학생들이 갑자기 존경스러워진다.

 

#SPA란?

우선 npx create-react-app 으로 프로젝트 기본 환경 세팅

Single Page Application 이다.

기존의 사이트가 Multi Page application이라면, SPA는 한 페이지로 이루어져있다.

 

한페이지란, 한번 페이지를 로딩한 뒤로는 뒤로가기를 눌러도 새로 HTML 페이지를 로딩하지 않는다는 말.

 

그러면 브라우져 뒤로가기, 앞으로가기를 누르면 어떻게 하라구?

 

# useEffect

useEffect( ()=>{
		window.onpopstate = function (event){
			setPageName(event.state);
		};
	}, {});

를 통해 브라우저의 버튼 이벤트를 자바스크립트로 보내 state를 처리하게 만든다.

자세한것은 더 공부하기

 

# 자바스크립트를 통해 페이지를 이동시켜보자

function App(){
	const [pageName,setPageName] = useState('');
    
    function onClick1(){
		const pageName ='page1';
		window.history.pushState(pageName, '', '/page1');
		setPageName(pageName);	
	}


	function onClick2(){
		const pageName ='page2';
		window.history.pushState(pageName, '', '/page2');
		setPageName(pageName);	
	}
    
    return (
		<div>
			<button onClick={onClick1}>page1</button>
			<button onClick={onClick2}>page2</button>
            
			{!pageName && <Home />}
			{pageName === 'page1' && <Page1 />}
			{pageName === 'page2' && <Page2 />}
        </div>
)

onClick을 지정하여 pushState()를 호출시킨다.

setPageName을 지정해주고 있는데,

state를 변경하면 동적으로 알아서 App()이 변경되나?

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

 

 

 

# react-router-dom으로 SPA 만들기

페이지 정보에 따라 어떤 컴포넌트를 렌더링할지 

onpopstate 호출시 상태 정보 변경

+

코드 spliting 제공 (너무 js하나에 몰리면 초기 페이지가 느릴수있다)

 

우선 npx create-react-app 으로 프로젝트 기본 환경 세팅을 하고 

npm install react-router-dom 를 마저 설치한다.