- JavaScript 클로져에 대해서 설명하세요.
클로저란 반환된 내부함수가 lexical scope을 기억하여 자신이 선언됐을 때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수입니다. => 이거를 풀어서 설명할 수 있어야함
함수는 생명주기가 있고 주기가 끝나면 활용하지 못하는게 맞지만 생명주기가 끝났음에도 사용할 수 있다.=> 캡슐화 은닉화
훅스 메소드에도 클로저 사용 !
Lexical scope: 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하는 것을 렉시컬스코프라고 한다.
클로저 함수에서 외부함수 내에 내부함수를 사용할 경우가 있는데, 그 함수 안에서만 사용하는 함수이기 때문에 외부에서 무엇인가가 끼어들 가능성을 최소화 할 수 있는 장점이 있습니다. 이런 경우에 외부함수에 지역변수가 있다면 그 지역변수를 내부함수에서 접근할 수 있는데, 이것을 보고 클로저라고 합니다. 클로저의 특징은 외부함수가 더이상 사용하지 않는 경우에도 내부함수가 외부함수에 접근할 수 있다는 것입니다. 예를 들어 외부함수 아우터라는 것을 만들고 안에 변수를 하나 지정을 한 후, 리턴에 내부함수를 실행하는데 그 함수가 외부함수에 있는 변수를 사용한다고 생각해봅시다. 그렇다면 이 외부함수를 실행을 하게되면 내부함수를 리턴하기 때문에 이미 이 함수는 죽은겁니다. 그런데, 그 와중에 내부함수에서 외부함수의 지역변수에 접근이 성공적으로 이루어지는데, 이것이 클로저의 특징입니다.
즉 클로저란 내부함수에서 외부함수에 접근을 할 수 있을 뿐만 아니라 외부함수가 종료가 되더라도 내부함수에서 접근이 가능한 특징을 지닌 것입니다.
- JavaScript 호이스팅과 Temporal Dead Zone이 어떻게 연관되어있는지 설명하세요.
호이스팅이란 함수 안에 있는 선언들을 모두 끌어 올려서 해당 함수 유효 스코프의 최상단에 선언 하는 것을 말합니다 이 특징으로 인해 Temporal Dead Zone이 생겨납니다.
const, let, class는 TDZ에 영향을 받습니다. 즉 const, let, class는 선언 전에 변수를 사용하는것을 허용하지 않습니다. 반대로 var, function, import의 선언은 TDZ의 영향을 받지 않습니다. 특히 var 변수는 선언 전에도 사용할 수 있는 점에서 var 변수 사용을 피해 예기치 못한 오류를 방지하는 것이 좋습니다.
변수가 먼저 선언이 된 경우, 초기화에 따라서 TDZ가 생깁니다. 특히 let,const와 var는 초기화 시점이 다릅니다. var는 암묵적으로 undefined로 초기화 된 상태에서 자바스크립트 코드를 읽기 때문에, TDZ에서 에러가 나지 않습니다.
Temporal Dead Zone이란 선언 전에 변수를 사용하는 것을 비 허용하는 개념상의 공간
- JavaScript callback, promise, async/await 의 특징과 차이점에 대해서 설명하세요.
자바스크립트는 동기적인 언어로써 코드를 차례대로 실행합니다. Callback, promise, async, await는 자바스크립트를 비동기 처리를 하기 위한 방식입니다.
비동기 상황에서 코드를 순차적으로 실행하고 싶을 때 콜백함수를 활용하는데 다른 함수의 인자로 전달되는 함수를 콜백함수라고 합니다. 하지만 콜백함수가 많아지면 콜백지옥에 빠져 코드의 가독성이 좋지 않게 됩니다.
그렇기에 promise 문법을 사용하는데 콜백 함수를 사용했을 때보다 가독성이 좋고 에러처리가 쉽기 때문에 사용합니다. 프로미스는 성공(rejolve)과 실패(reject)에 따라 then(), catch()메소드를 이용해서 분기 처리가 가능하고 pending, fulfilled, rejected 중 하나의 상태를 가집니다.
하지만 프로미스도 then을 여러번 사용하다보면 헷갈릴 수도 있기 때문에 이것을 보안하고자 async/await 문법을 사용합니다.
async/await은 비동기 코드가 동기 코드처럼 읽히게 해줘서 가독성이 더 좋아지는 장점이 있습니다.
- React React 에서 virtual DOM이 무엇인가요? virtual DOM이 좋은 이유에 대해서 설명하세요.
virtual DOM은 메모리 상에 가상의 DOM을 두고 reconciliation(가상 DOM을 ReactDOM과 같은 라이브러리를 통해 진짜 DOM에 반영하는 과정을) 과정을 통해 실제 DOM과 동기화하는 것을 말합니다. Virtual DOM의 좋은 점은 버츄얼돔을 사용할 때는 바뀐 부분만을 변경하기 때문에 실제 DOM을 직접 바꾸는 것보다 시간 복잡도가 현저히 낮아집니다.
버츄얼 돔을 갱신하는 방법은? 상태를 변경하면 버츄얼 돔이 갱신이 됨
왜 실제 dom을 제어하지 않고 버츄얼 돔을 이용하나요? 시간복잡도를 줄여서 효율성을 극대화시키려고
돔이 변화하기 위해서는 돔트리를 그리고 렌더링 트리 페인팅 어쩌구 (브라우저렌더링)
- React Props Drilling 이란 무엇인가요?
하위 컴포넌트로 데이터를 전달하기 위해 계속해서 props를 전달해 나가야하는 과정을 말합니다. 이것은 데이터의 흐름을 쉽게 추적할 수 있다는 장점이 있지만 계층 구조로된 컴포넌트들을 분리하기가 어렵고, props가 변경되면 많은 코드를 수정해야 합니다. 과도한 Props Drilling 을 피하기 위해서는 redux 같은 전역 상태관리 라이브러리 사용하는 방법이 있다.
- React JSX가 무엇인가요?
자바스크립트와 XML이 합쳐진 확장 문법으로 React 엘리먼트를 생성하는 언어입니다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능.
자바스크립트와 XML이 합쳐진 확장된 문법으로 리액트 element를 생성할 때 사용되며 브라우저에서 실행하기 전 바벨과 같은 트랜스파일러를 통해 js코드로 변환됩니다.
- React state를 직접 변경하지 않고 setState를 사용하는 이유에 대해서 설명하세
state를 직접 변경하지 않고 setState를 사용하는 이유는 state는 불변성을 유지해야 하기 때문입니다. 컴포넌트는 현재 state와 setState를 비교해 업데이트가 필요한 경우에만 render 함수를 호출하므로 state를 직접 수정 시 변경된 값이 렌더링되지 않기 때문에 setState를 사용해야합니다.
- React React에 있는 라이프사이클과 각 라이프사이클의 역할을 설명하세요.
라이프사이클은 컴포넌트 생명주기를 말하며, mount, update, unmount로 구분할 수 있습니다. 컴포넌트 생명주기는 컴포넌트가 생성되고, 사용되고, 소멸되기까지의 과정을 말합니다. 라이프사이클 과정에서 호출되는 메소드들이 있는데 componentDidMount()는 컴포넌트가 생성될때 한 번 호출되며, componentDidUpdate는 컴포넌트의 속성 값 혹은 상태 값이 변경되었을 때, componentWillUnMount는 컴포넌트가 소멸될 때 호출됩니다. 또한 render 메소드는 초기 화면을 그려줄 때와 업데이트 시에 호출됩니다.
