후발대 강의에서 면접대비겸 라이브로 대답하는 시간을 가졌고 해당 시간에 간단하게 적었던 것들을 여기에도 함께 적어둔다:)!!!
SPA와 MPA의 각각의 개념과 특징에 대하여 서술해보자!
아키텍쳐 라는 말을 사용. 웹 어플리케이션을 쓰는 이유는 ?
사용자 경험이 증가함에 따라 MPA이 생겼고, 이 MPA이 생기면서 화면이 깜빡이는 현상이 생겼다.
여기서 리액트는 index.html 하나가 있고 root밖에 없다. 그것들만 렌더링을 하는데 직접적으로 렌더링을 하게 된다.
dom과 가상(버츄얼)dom에 대해 설명
실제 dom은 트리형태로 있는데 똑같은 복사본이 버츄얼 dom이다.
대신 화면을 그리기 위한 api(create)가 없기 때문에 엄청 가볍다!
html처럼 생긴게 아니라 자바스크립트 오브젝트처럼 생겼다. 그래서 리액트는 버츄얼dom형태로 해석해서 전 후 내용을 비교하여 바뀐 곳만 변경하여 root에 있는 내용을 바꿔주면 한번만 렌더링하게 된다는 점이 큰 장점이다.
(+ 여기서 바뀐 곳을 감지해주는 것을 diffing알고리즘 이라고 한다)
리액트는 실시간으로 바뀌는게 아니다보니 변경이 일어나는 스테이트를 다모아서 한번만 업데이트한다
일괄적인 작업을 batch update라고 하며 이 것은 리액트가 가장 빨라지는데에 기여한다고 볼 수 있다. 이 것을 하는 이윤 리액트가 비동기이기 때문이다.
자바스크립트의 런타임 환경 2가지
웹브라우저&node.js
과거에는 브라우저에서만 자바스크립트가 실행될 수 있었지만 업데이트를 통해 node환경과 같이 브라우저밖에서도 동작할 수 있도록 되었습니다.
불변성이란? 왜 중요한가
불변성이라는 것은 메모리에서 값을 변경할 수 없게 하는 것이다.
이 중요함은 얕은 복사와 깊은 복사를 통해 알 수 있다
리액트가 값이 변경되었는지 알려면 메모리에서 바뀌어야 하는데, 참조값과 실제값을 변경하는 차이로 나뉜다.
가변성과 불변성은 리액트에서의 리렌더링조건과 연결되므로 중요합니다. 배열에서도 map, filter과 같이 기존의 배열을 수정하는 것이 아닌, 새로운 배열을 내뱉어주는 함수들이 불변성함수에 해당합니다. (map, filter 언급 중요)
일반함수 화살표 함수의 차이점
this바인딩의 여부다.
화살표 함수는 this바인딩을 하지 않지만 일반 함수는 한다.
this바인드 : this를 묶는 것. 즉 화살표 함수는 그 부분을 생략한다.
this를 쓰면서 로직이 뭉겨지는 경우가 많은데 그 때 화살표 함수를 사용한다.
export와 export default 차이
export 하나만 export default…
export는 그냥 내보내는 것 중괄호에 넣어서 import 해봐야 한다. default는 파일에서 가장 중요한 것을 내보내는 것!
export 할 경우에는 import { 함수명 } from * 으로 사용하는데, export default 하실 경우에는 import 함수명 from 으로 사용한다.
prop drilling?
prop을 오로지 하위 컴포넌트를 전달하는 용도. 다만 이 것이 반복되면 에러가 나도 위치를 모르기 때문에 유지보수가 어려워진다.
따라서 공통적으로 관리할 수 있는 리덕스가 생긴 것!
리덕스는 콘텍스트 api의 일종이라고 볼 수 있다.
순수함수란?
같은 값을 줬을 때 값은 값을 주는 함수
리액트는 순수함수다.
CSR, SSR을 SEO관점에서 서술?
CSR(SPA)은 클라이언트 사이드 렌더링으로 한번 전체 페이지를 로딩해주고 이후 사용자의 요청에 따라 해석, 렌더링한다. 따라서 SEO에 문제가 발생한다.
SSR(MPA)은 서버사이드 렌더링으로 서버로부터 여러 파일 및 데이터를 전달받아 렌더링하는 방식이다. 따라서 SEO가 가능하다
