React에서 반드시 알아야 하는 것들!

Q1) 자바스크립트에서 유사배열과 배열의 차이점은?

유사배열의 각 요소를 수정하고 싶을 땐?

 

A1) 유사배열은 배열의 내장함수를 사용할 수 없습니다.

따라서 해당 유사배열이 사용할 수 있는 반복문 등을 이용해

유사배열을 먼저 배열로 바꿉니다.

그 후, 배열의 내장함수를 통해 변경합니다.

또는 유사배열 요소 하나하나에 직접 접근해서 바꿉니다.

 

 

 

Q2) 부모 컴포넌트의 state가 바뀌면

자식 컴포넌트의 state도 바뀝니다.

이 과정을 라이프 사이클로 그려보세요.

 

A2)

 

 

 

Q3) 양방향 바인딩이란?

양방향 바인딩을 사용할 경우, 리렌더링이 어떻게 이루어질까요?

 

A3) 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐르면 단방향,

부모가 자식에게 데이터를 전달해주고,

자식이 그 데이터를 수정할 수 있으면 양방향 바인딩입니다.

이때, 자식이 부모에게 데이터를 넘겨주지는 못 합니다.

부모로부터 받은 데이터를 수정만 할 수 있습니다.

 

아래 그림은 양방향 바인딩의 경우 리렌더링이 이루어지는 과정입니다.

 

 

 

Q4) 리액트에서 DOM 요소에 접근할 때,

document.getElementsByClassName 등을 쓰는 대신

ref를 쓰는 이유가 무엇일까요?

 

A4) document를 통한 접근은 해당 컴포넌트에 있는 어떤 DOM 요소뿐 아니라

화면 자체, 즉 개발자 도구로 볼 수 있는 전체 document에 접근하는 거예요.

또한 document.get ... 가 실행되는 위치에서

해당 DOM 요소가 화면에 그려져 있지 않을 수도 있습니다.

화면에 마운트 되기 전이라면 오류가 나겠죠.

따라서 useRef() 등을 사용하여 특정 DOM 요소에 접근하는 것입니다.

 

 

 

Q5) SPA 방식과 MPA 방식의 차이점은?

 

A5) SPA는 Single Page Application의 약자로,

HTML을 하나만 갖습니다.

그러나 MPA는 Multi Page Application의 약자로,

HTML을 여러 개 갖습니다.

특정 주소의 페이지를 보여달라는 요청이 왔을 때,

SPA 방식은 HTML 하나만 가지고 여러 페이지인 척 가진 자원을 쪼개 보여주고,

MPA는 그때 그때 주소에 맞는 HTML을 보여줍니다.