항해99 9기 C반 W3 3조 [팀과제] 공통질문

1. JS에서의 유사배열과 배열

🔐 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요? 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까요?

유사배열

명시적 타입이 배열은 아니지만, 배열처럼 값을 받아 올 수 있는 Object 를 유사배열이라고 한다.

유사배열의 조건

1) length를 포함할 것 (length를 포함하지 않는 경우 유사배열로 인식하지 않는다.)
2) index의 시작은 0, 1씩 증가하여 할당할 것
(이 조건은 필수는 아니지만 다른 형태로 부여했을 경우 예상치 못한 결과가 도출될 수 있다.

유사배열의 예시

dom
arguments

let arr = {
  0:'I',
  1:'like',
  2:'to study',
  3:'Javascript.',
  length: 4
};

유사배열과 배열의 차이점

유사배열의 특징

유사배열은 특정 돔을 찾아 하위 자식관계의 키값을 리턴하는 방식으로 주로 사용되는데,
typeof / isArray / instanceof Array 등으로 확인시에는 [object] / [false] / [false]의 결과를 확인할 수 있다.
즉, 타입은 '객체'이며, 배열이 아니고, 배열과 같지 않다.

배열과의 차이점

유사배열은 배열처럼 보이지만, '배열이 아니'므로 배열 메소드를 활용할 수 없다.

유사배열의 요소를 수정하기 위한 방안

• 배열 메소드를 사용하기 위해 [call] 로 [thisbind]해서 사용하기
• 유사배열을 진짜 배열로 바꿔버리기👊 : Array.from (ES6 부터 사용 가능)

유사배열로 배열 메소드를 사용하거나, 진짜 배열로 만들어 배열 메소드를 사용할 수 있다.

2. 부모-자식 컴포넌트

🔐 부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다. 컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름을 그려볼까요?

참고 이미지 출처

1개의 컴포넌트의 라이프사이클

모든 컴포넌트는 라이프 사이클 플로우를 따라 변경된다.

축약된 사이클

• state, props 의 값 업데이트( Newprops / setState() )
• (재)render
• componentDidUpdate 메소드 수행

2개의 컴포넌트, 2개의 라이프사이클

부모 A 컴포넌트의 동작이 가장 빠르게 시작하지만, 자식 B 컴포넌트의 로딩이 모두 끝난 뒤 A 컴포넌트의 동작이 종료됩니다. 따라서 위 라이프사이클을 고려했을때 부모-자식 컴포넌트의 사이클은 아래와 같습니다.

1) A : constructor
2) A : render
3) B : constructor
4) B : render
5) B : componentDidMount
6) A : componentDidMount

3. 데이터 바인딩

🔐 양방향 바인딩은 무엇일까요? 양방향 바인딩을 사용하는 경우 리렌더링이 어떻게 이루어질 지 그려보세요. (부모 컴포넌트 A와 자식 컴포넌트 B가 있음을 가정하고 그려봅시다.)

데이터 바인딩이란? Data Binding

• View(화면상 노출되는 데이터)와 Model(브라우저 메모리 내 데이터)를 묶어 양측의 데이터를 동기화 하는 것을 의미합니다.

단방향 데이터 바인딩 One-way Data Binding

• 일반적으로 Model 에서 View 로 데이터를 단방향으로 내려주는 방식을 일컬으며, 컴포넌트 간 관계에서는 [부모] 컴포넌트에서 [자식] 컴포넌트로만 데이터를 전달하는 경우를 의미한다.
• React에서는 단방향 데이터 바인딩을 기본으로 함
  *View -> Model 혹은 [자식] -> [부모] 컴포넌트로의 데이터 전달 및 데이터 갱신이 불가하다.

양방향 데이터 바인딩 Two-way Data Binding

• 양방향 데이터 바인딩은 Model(Javascript)과 View(HTML) 사이에 ViewModel 이 존재하여 하나로 묶여있는 구조를 의미한다. 이 경우, View 혹은 Model 중 어느 하나라도 변경이 가능하며, 한쪽이 변경된 경우 다른 한쪽도 함께 변경이 이루어진다.
• 컴포넌트 간 관계에서는 [부모] 컴포넌트에서 [자식] 컴포넌트로 데이터를 전달할때는 단방향 바인딩 방식과 동일하게 'props'를 통해 데이터를 전달하지만, 단방향 바인딩 방식과 달리 양방향 바인딩 방식에서는 [자식] 컴포넌트가 'Emit Event'를 통해 [부모] 컴포넌트로 데이터를 전달하는 것도 가능하다.
• 대표적으로 Vue.js, Angular에서는 양방향 데이터 바인딩을 기본으로 함

양방향 바인딩을 사용한다면, 리렌더링이 이루어지는 플로우는?

해당 플로우는 Vue의 데이터 흐름을 도식화한 것이다.

• [부모] 컴포넌트는 Props를 통해 [자식]컴포넌트에 데이터를 전달하고, [자식] 컴포넌트는 Event를 통해 [부모] 컴포넌트로 메시지를 보낸다.
• 컴포넌트 watcher 가 데이터를 주시하다가, 데이터의 수정이 발생하면 리렌더링을 일으킨다.
• [부모] 컴포넌트와 [자식] 컴포넌트는 Watcher를 통해 데이터의 변화를 감지하고 데이터를 일치시킨다.

🤔뷰의 데이터 왓쳐는 리액트에서 '이벤트 리스너'의 동작과 비슷하게 변화를 감지하고, 변화 여부를 컴포넌트 혹은 메소드에 전달한다는 점에서 유사한 개념으로 보여짐

4. event 리스너의 등록과 해제

🔐 event listener는 등록되면 반드시 해제되어야 합니다. 클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!) 그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야할까요?

이벤트 리스너

• 이벤트 리스너는 DOM 객체에서 이벤트가 발생할 경우 이벤트 처리 관련 핸들러를 추가할 수 있는 객체이다. 특정 DOM에 이벤트가 발생하는 시점에 특정 함수를 호출하는 역할을 수행한다.
• 단, 이벤트 리스너의 경우 상태를 감지하기 위해 메모리를 사용하고 있기 때문에, 더이상 이벤트 리슨이 필요없어졌을 경우 반드시 리스너를 함께 해제해주어야 한다.

함수형 컴포넌트에서의 이벤트 리스너 해제

useEffect

• 함수형 컴포넌트에서는 각각의 라이프사이클 메소드를 useEffect 하나로 통일할 수 있다.
  (시점 구분은 dependency 선언을 통해 한다.)

useEffect(() => {
	console.log("I'm only once.");
    }, []);

위와 같이 빈 배열을 선언하는 경우, 최초에만 렌더링이 된다.

useEffect 이벤트리스너 실행과 해제

• .addEventListener() 를 사용하여 이벤트를 추가하면 이벤트 감지가 시작된다.
• .removeEventLister() 를 사용하여 실행된 이벤트리스너를 해제할 수 있다.

5. React.JS DOM -ref

🔐 리액트에서는 DOM 요소에 접근하기 위해 주로 ref를 씁니다. domcument.getElementsByClassName 등을 쓰는 게 아니라 ref를 쓰는 이유는 무엇일까요?

useRef로 특정 DOM 선택하기

• Javascript와 달리 React에서는 Virtual DOM(가상 DOM)을 활용하고 있기 때문에, DOM에 접근하여 수정이 필요한 경우 useRef 를 사용하여 가상 DOM에 접근하여 컴포넌트의 속성을 조회하고 수정한다. (리렌더링은 포함하지 않음)

useRef

• useRef는 render 메소드에서 생성된 DOM노드, React Element에 접근할 수 있도록 도와주는 메소드
• useState와 비슷한 역할을 수행하지만, 렌더링을 일으키지 않아 메모리 누수를 막을 수 있고, 변수와 달리 렌더링이 되더라도 언마운트 되기 전까지 값을 유지하기 때문에 useState를 사용하는 경우지만 리렌더가 불필요한 경우에도 사용할 수 있다.

6. SPA 방식과 MPA 방식

🔐 SPA 방식과 MPA 방식은 무엇인가요?

참고 이미지: (MS) asp.net -SPA, 2013

MPA Multi Page Application

• 전통적인 웹은 멀티페이지 어플리케이션으로 구분할 수 있다.
• 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고, 이에 맞춰 전체 페이지를 다시 렌더링 한다. 사용자의 액션을 할 때 마다 그에 맞는 html, 이미지 등의 파일이 다운로드 되고 해당 페이지가 리렌더링 되는 형식이다.
• 사용자의 요청이 발생할 때마다 서버에서 데이터를 전달하는 방식으로 SSR(Server Side Rendering) 방식을 사용한다.

MPA 특징

• SEO 최적화에 용이하다.
  (완성된 html 파일을 서버에서 전달받을 수 있기 때문에, 검색엔진 로봇이 탐색하기에 아주 적합한 형태이다.)
• 새로운 페이지에 진입할 때 네트워크 환경, 데이터 양에 따라 사용자는 깜빡이는 흰색 화면을 마주하게 된다. 🙄

SPA Single Page Application

• 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드 한다.
• 이후 새로운 페이지 요청이 있을 경우 업데이트된 데이터만 전달받아 페이지를 갱신한다.
• 최초의 1회 다운로드 이후 필요한 정보만 리렌더링 하는 방식으로 CSR(Client Side Rendering) 방식으로 렌더링한다.

SPA 특징

• 빠른속도 : 전체 페이지를 리렌더링 하지 않고, 변경된 영역만 리렌더링 함으로써 비교적 빠르게 구동된다.
• 단, 전체 페이지를 최초에 전체 다운로드하므로, 초기 구동 속도는 MPA에 비해 떨어진다.
• UI 깜빡거리는 현상 없음 : MPA의 경우 전체 페이지를 렌더링할때 네트워크 환경 혹은 데이터 양에 따라 사용자는 깜빡거리는 현상이 나타나는데, SPA의 경우 이미 웹앱에 접근 시 모든 데이터를 가지게 되므로, 깜빡거리는 흰 화면을 마주하지 않을 수 있다.
• 서버리스 개발이 가능하다.
• SEO 관점에서는 CSR 렌더링 방식을 사용하는 SPA가 MPA에 비해 불리하다.

SPA 방식을 사용하고 있는 대표적인 프레임워크

- React

• Vue.js
• AngularJS
• Ember.js
  .
  .
  .