SPA? MPA?
SPA
Single Page Application의 약자로 한 개의 페이지로 이루어진 애플리케이션을 말한다. 서버에 1회 리소스를 요청하고 이후 더 필요할 때엔 데이터만 받아와서 기존 페이지를 '수정'해주는 방식이다. 데이터가 바뀌어도 페이지 새로고침이 없어 보다 빠르고 사용자에게 보다 편하고 자연스러운 UX를 보여준다. 어떤 링크를 클릭한다고 해서 그에 관련된 모든 파일을 다운받는게 아니라 필요한 정보만 받아서 그 정보를 기준으로 업데이트 된다.
MPA
SPA와 상반된 개념인 MPA는 Multiple Page Application의 약자로 여러 개의 페이지로 구성된 애플리케이션이다. 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드되며 그에 맞춰 전체 페이지를 다시 렌더링한다. 완성된 형태의 HTML파일을 서버로부터 전달받기에 SEO관점에 유리하다.
SEO란?
SEO는 Search Engine Optimization의 약자로 구글같은 검색엔진에 최적화되었는지를 말한다.
(이러한 검색엔진은 html 페이지의 내용을 기반으로 검색 결과를 보여주는데 리액트는 html이 아닌 js파일에서 작업을 하고 html파일에 동적으로 내용을 넣도록 연결시켰기 때문에 사실상 html에서는 내용을 찾을 수가 없다. 그러므로 리액트는 SEO에 적합하지 않다.)
불변성
불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말한다. 자바스크립트의 데이터 형태 중 원시 데이터는 불변성이 있고 그 외에 객체, 배열, 함수는 불변성이 없다.
리액트에서는 원시데이터가 아닌 데이터의 불변성을 지켜주는 것이 왜 중요할까?
리액트에서는 화면을 리렌더링을 결정할때 state의 변화를 확인한다. state가 변하면 리렌더링하고 변하지 않으면 리렌더링을 하지 않는다. 이때 리액트가 변화를 확인하는 방법이 바로 메모리 주소이다. 원시 데이터의 경우 데이터를 수정하면 메모리주소 또한 바뀌어 state의 변화를 쉽게 파악할 수 있다. 하지만 원시데이터가 아닌 데이터의 변수는 객체(혹은 배열,함수 등)을 가리키는게 아니라 메모리 주소를 가리킨다. 객체의 프로퍼티 값이 바뀌어도 메모리주소는 변화가 없다. 이렇게 불변성을 지켜주지 않고 수정하면 값은 바뀌더라도 메모리주소는 변함이 없어 리액트는 state의 변화를 감지하지 못한다. 즉 리렌더링이 필요한 상황이지만 아무런 변화가 없는 것이다.
