Q1. 양방향 바인딩은 무엇일까요?
양방향 바인딩을 사용하는 경우 리렌더링이 어떻게 이루어질 지 그려보세요.
(부모 컴포넌트 A와 자식 컴포넌트 B가 있음을 가정하고 그려봅시다.)
양방향 바인딩은 부모 컴포넌트와 자식 컴포넌트 간 데이터가 양방향으로, 서로 흐른다. 부모와 자식 컴포넌트 어디에서든 데이터를 변경할 수 있다. 소스 속성 또는 대상 속성이 변경되면 다른 항목도 자동으로 업데이트되는 데이터 데이터 간의 연결작용을 다룰 때 지칭한다.
양뱡향 데이터 바인딩은 데이터의 변화를 감지해 템플릿과 결합하여 화면을 갱신하고 화면에서의 입력에 따라 데이터를 갱신한다.
Q2. SPA 방식과 MPA 방식은 무엇이고, 어떤 장/단점을 가지고 있나요?
- SPA(Single Page Application)
1) 딱 한개의 페이지(Single Page)로 구성된 웹 앱
2) 서버에 1회 리소스를 요청함
3) 그 이후에는 필요할때 데이터만 받아와서 기존 페이지를 '수정'하는 방식으로 화면 수정
4) 사용자 입장에서 깜빡임이 없어 자연스러운 UX(User Experience) 구현가능
전체 페이지를 다시 렌더링하지 않고 변경되는 부분만 갱신하므로 새로고침이 발생하지 않아 어플리케이션과 유사한 사용자 경험을 제공할 수 있다. 그러나 명백한 단점이 존재하는데, 구글의 검색엔진이 찾을 수 없다.
- MPA(Multi Page Application)
1) 여러 개(Single)의 Page로 구성된 Application
2) 전체 페이지가 리렌더링된다.
멀티페이지 애플리케이션은 1) 좋아요를 눌렀을 때마다 다시 로팅을, 2) 여러가지 동작에서 계속해서 화면이 깜박거린다면 매우 불편했을 것이다. 요청마다 새로고침되기 때문에 사용자경험이 비교적 부자연스럽다.
Q3. 리액트에서 불변성이 가지는 의미와, 왜 불변성이 중요한지를 알려주세요.
리액트는 useState로 인해서 정보가 기존의 것과 다르면 화면의 부분을 리렌더링하는데, 그 조건이 불변하는 데이터가 변경되었을 때이다. 이때 기억할 것이 있는데 바로 객체이다. 객체는 그 특성상 얕은복사가 발생된다는 점을 기억해야 하며, 이럴 시에 리액트는 데이터가 변경되었다고 인식하지 못하기 때문이다. 그 결과 화면을 리렌더링하지 않게 된다는 점을 기억해야 한다.
Q4. SEO의 개념은 무엇이며, 리액트는 SEO에 적합할까요? 그 이유는 무엇일까요?
Pre-렌더링이란, 빌드할 때 미리 특정 페이지를 렌더링해서 HTML을 만들어 두는 것을 말한다.
빌드할 때 HTML파일을 만들어두기 때문에 검색 엔진이 크롤링하러 사이트에 접근했을 때, 내용물을 보여줄 수가 있게 된다.
SEO란 Search Engine Organization의 약자이다. 한국어로는 검색엔진최적화라 불리는데, SPA를 추구하는 리액트는 단일한 HTML 파일(index.html) 하나밖에는 없기 때문에, 검색에 있어서 불리한 부분이 있다. 이는 정적으로 기록된 HTML과 달리 동적으로 작성되기 때문이다. 이에 대한 보완으로 등장한 라이브러리가 Next.JS이다.
Q5. export와 export default의 차이에 대해 설명해주세요.
export default
-
일반적으로 해당 모듈엔 하나의 개체(변수, 클래스, 함수 등)만 있다는 의미로 받아들여진다.
-
따라서 해당 모듈의 전체 개체를 export 한다는 의미를 갖는다.
-
원하는 이름으로 import가 가능하다.(ex. import ThisIsSample from "경로")
export
-
복수의 개체가 있는 라이브러리 형태의 모듈에서 가져오기 할 때 사용된다.
-
특정 개체만 가져오는게 가능하다.
-
원하는 이름으로 import가 불가능하다.
만약 export 가 복수라면 export를 지향해야 하고, 한 모듈 안에서 export한 대상이면 export default를 사용한다.
export를 쓴다면 import하는 것이 어떤 건지 알기 힘들수도 있다.그래서 named export만 사용하거나, export default를 사용할 땐 파일 이름과 동일한 이름을 사용하도록 내부 규칙을 정하고 사용하는 방법이 있다.
Q6. 리액트 컴포넌트란 뭘까요? 리액트 컴포넌트의 종류는 무엇이 있으며, 현재는 어떤 방식이 더 각광받고 있는지에 대해 적어보세요. 또한 다음 추가 질문에 대한 O, X를 말씀해주세요.
1. 컴포넌트를 만들 때 컴포넌트 이름은 반드시 가장 첫 글자가 대문자일 필요는 없다.
2. 폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓는다.
React Component란 리액트로 만들어진 앱을 이루는 최소한의 단위를 말한다. 리액트 세계에서 말하는 컴포넌트(블럭)은 즉 함수다. HTML을 return하는 함수를 만들면 그게 컴포넌트라는 뜻이다.
컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수. - 컴포넌트 이름은 항상 대문자로 시작하도록 한다. 리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이다.
- 함수형 컴포넌트
데이터를 가진 하나의 props객체 인자를 받은 후 React 엘리먼트를 반환한다
state와 라이프사이클 API의 사용이 불가능하다. → Hooks라는 기능이 도입되므로 대부분 해결되었다.
- 클래스형 컴포넌트
class 형태로 만들기 때문에 클래스형 컴포넌트라고 불린다.
- X : 컴포넌트를 만들 때 컴포넌트 이름은 반드시 가장 첫 글자가 대문자일 필요는 없다.
- O : 폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓는다.
보통 디렉토리 파일명은 소문자로 작성하며, CamelCase로 작성한다. 만약 디렉토리 자체가 react 컴포넌트가 바로들어 있는 폴더라면 폴더이름을 대문자로 시작하며, 직접적으로 바로 react 컴포넌트가 들어있지 않은 간접적인 관계의 폴더라면 소문자 단수로 표기한다. 그러나 중요한 것은 이름이 명확해야 한다.
