[기술 면접 준비] Mockterview_React_50제_11~16번

11. Arrow Function 이란 무엇인지 설명해주실 수 있을까요?

화살표 함수는 본문이 한 줄인 함수를 작성할 때 유용. 중괄호 없이 작성: (...args) => expression – 화살표 오른쪽에 표현식. 함수는 이 표현식을 평가하고, 평가 결과를 반환함. 중괄호와 함께 작성: (...args) => { body } – 본문이 여러 줄로 구성될 때. 이 경우는 반드시 return 지시자를 사용해 반환 값을 명기해 주어야 함. 화살표 함수에서의 this는 상위 스코프의 this를 의미하며(Lexical this), 함수가 호출될 때가 아닌 함수가 정의될 때 이미 결정된다. this가 필요 없는 일반 함수에서 또는 내부 함수 등에서 bind(this)의 대체할 때(외부의 this를 주입해야 하는 경우 화살표 함수를 사용할 수 있다.

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Arrow function expressions - JavaScript | MDN

https://javascript.info/arrow-functions-basics

Arrow functions, the basics

https://velog.io/@zinukk/Arrow-function

Arrow function 화살표 함수

https://paperblock.tistory.com/51

[ES6] 화살표 함수 (Arrow Function) 파헤치기

https://catsbi.oopy.io/497bb044-1027-432b-bb37-3a33c8470926

Arrow Function

12. ‘==’와 ‘===’ 연산자의 차이는 무엇인지 설명해주실 수 있을까요?

==는 Equal Operator(동등 연산자)이고,  ===는 Strict Equal Operator(일치 연산자). == 의 경우 두 피연산자의 타입이 서로 다르면 비교를 위해서 강제로 타입을 같게 변환함. 예를 들어서 문자 "10" 과 숫자 10을 비교하게 되면 ("10" == 10) 타입이 달라도 서로 타입을 일치시켜서 비교하므로 true가 나옴. 값 자체는 10으로써 동일하니 강제 형변환에 의해 "10" == 10 : true 라는 결과값을 얻게 됨. === 의 경우엔 == 와는 다르게 타입의 변환 없이 타입과 값이 모두 같을 경우에만 true를 반환함. "10" === 10 의 결과값은 false.

 

https://steemit.com/kr-dev/@cheonmr/js-operator

[JS Operator] ==와 ===의 차이점 — Steemit

13. Virtual DOM이란 무엇이고 Real DOM과의 차이는 무엇인가요?

Virtual DOM은 UI의 이상적인 또는 “가상”적인 표현을 자바스크립트 객체 형태로 메모리에 저장하고, ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념임. 이 과정을 Resconsiliation(재조정)이라 함. 가상 돔끼리 Diffing(비교)을 통해서 변경된 부분을 파악한 후, Batch update(일괄 업데이트)를 수행하여 실제 돔에 한번에 적용함. 가상의 DOM 에 먼저 view의 변화를 적용시키고 그 최종적인 결과를 실제 DOM 으로 전달함. 이로써, 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선되는 것. 돔을 변경 해야 하는 경우 구성요소에 따라 여러번 렌더링이 되어야 하는 문제가 있는데 가상돔을 적용하면 한번 렌더링이 일어나면 된다는 장점이 있음. 

https://ko.reactjs.org/docs/faq-internals.html

Virtual DOM과 Internals – React

https://velog.io/@mollog/React%EC%97%90%EC%84%9C%EC%9D%98-%EA%B0%80%EC%83%81%EB%8F%94-%EA%B0%9C%EB%85%90

React에서의 가상돔 개념

15. useRef 에 대해 아는 만큼 설명해주실 수 있을까요?

Virtual DOM은 UI의 이상적인 또는 “가상”적인 표현을 자바스크립트 객체 형태로 메모리에 저장하고, ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념임. 이 과정을 Resconsiliation(재조정)이라 함. 가상 돔끼리 Diffing(비교)을 통해서 변경된 부분을 파악한 후, Batch update(일괄 업데이트)를 수행하여 실제 돔에 한번에 적용함. 가상의 DOM 에 먼저 view의 변화를 적용시키고 그 최종적인 결과를 실제 DOM 으로 전달함. 이로써, 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선되는 것. 돔을 변경 해야 하는 경우 구성요소에 따라 여러번 렌더링이 되어야 하는 문제가 있는데 가상돔을 적용하면 한번 렌더링이 일어나면 된다는 장점이 있음. useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook임

https://ko.reactjs.org/docs/hooks-reference.html#useref

Hooks API Reference – React

https://www.daleseo.com/react-hooks-use-ref/

React Hooks: useRef 사용법

16. 리액트 컴포넌트의 라이프사이클에 대해 설명해주실 수 있을까요?

리액트의 컴포넌트는 모두 라이프사이클을 가짐. 라이프 사이클은 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지를 나타냄. 크게 ‘생성(mounting) -> 업데이트(updating) -> 제거(unmounting)’ 3단계의 생명주기를 가짐. props 또는 state가 바뀌거나, 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때), 강제로 업데이트 했을 때 (forceUpdate()) 4가지 경우로 인해 업데이트됨. 생명주기의 때에 따라 어떤 작업을 처리해야 하는지 지정해줘야 불필요한 업데이트를 방지할 수 있음. 리액트의 클래스 컴포넌트는 라이프사이클 메서드를 활용하고, 함수형 컴포넌트는 Hook으로 생명주기를 직접 다루거나 state를 사용함. 

2022.12.11 - [⛵ 부트캠프, 항해99/WIL] - [WIL] React - LifeCycle, Hooks

 

*추후

14. 즐겨 보는 테크 유튜버나 뉴스레터가 있다면 알려주실 수 있을까요?