[22.03.19] TIL 기술면접 준비하기2

Arrow Function 설명

• ES6부터 도입된 새로운 함수 표현식.
• 자신만의 this를 가지지 않는 대신 Arrow Function 내부에서 this를 사용하면 상위 스코프의 this를 참조한다.
• 자신만의 this를 가지지 않아 생성자 함수로 사용할 수 없다.
• 단일 표현식에서 값을 반환하는 경우 중괄호를 생략 할 수 있는데 이 경우, 자동으로 해당 표현식의 값을 반환한다.

---

== 연산자와 === 연산자의 차이

• == 연산자는 값만을 비교하며 비교 시 자동 형 변환을 수행한다.
• 비교하는 두 값이 서로 다른 데이터 타입을 가지고 있다면 자동으로 형 변환을 하여 같은 타입으로 만든 후 비교하게 된다.
• === 연산자는 값과 데이터 타입까지 비교한다.
• 자동 형 변환이 일어나지 않기 때문에 비교하는 값이 서로 다른 데이터 타입이면 false를 반환한다.

---

Virtual DOM 설명과 Real DOM과의 차이 설명

• DOM이란 웹페이지에 들어가있는 html element들을 트리의 형태의 구조로 표현한 것,
• 리액트의 가상돔은 실제 돔과 같은 내용을 담고있는 복사본이고 이 복사본은 자바스크립트 객체 형태로 메모리상에 저장되어 있다.
• 리액트는 항상 두개의 가상돔을 갖고있는데 첫번째는 변경 이전의 내용을 담고있고, 두번째는 변경 이후 보여질 내용을 담고 있다.
• 실제 돔이 변경되기 이전에 리액트는 두개의 가상돔을 비교해서 정확히 어떤 부분이 바뀌었는지 효율적으로 비교하여 파악
• 이 과정을 Diffing이라고 한다.
• Diffing을 통해서 변경된 부분을 파악한 후, Batch update를 수행하여 실제 돔에 한번에 적용시켜 준다.
• 그 과정을 Resconsiliation 재조정 이라고 한다.
• 돔을 변경 해야 하는 경우 구성요소에 따라 여러번 렌더링이 되어야 하는 문제가 있는데 가상돔을 적용하면 한번 렌더링이 일어나면 된다는 장점이 있다.
• Diffing 과정
  • 1. 이전 Virtual DOM과 현재 Virtual DOM을 비교하여 변경된 요소를 찾습니다.
    2. 변경된 요소를 식별하고, 각 요소의 속성을 비교합니다. 이전 요소와 현재 요소의 속성이 같다면, 해당 요소를 건너뜁니다.
    3. 이전 요소와 현재 요소의 속성이 다르다면, 해당 요소를 업데이트합니다.
    4. 변경된 요소를 식별한 후, 추가된 요소와 삭제된 요소를 찾습니다.
    5. 추가된 요소는 Real DOM에 추가하고, 삭제된 요소는 Real DOM에서 제거합니다.
• Batch update 과정
  • 1. 변경된 내용을 모아서 업데이트 대상 리스트에 추가합니다.
    2. 다음 렌더링 사이클에서 해당 리스트를 반복하여 변경된 내용을 실제 DOM에 적용합니다.
    3. 변경된 내용이 모두 적용되면, 업데이트 대상 리스트는 초기화됩니다.
  • React는 기본적으로 Batch update를 사용하며, 이를 위해 setState 함수를 비동기적으로 처리한다.
  • 이를 통해 여러개의 setState 호출이 있을 경우, 변경된 내용을 모아 일괄 처리할 수 있다.

---

useRef에 대한 설명

• React의 함수형 컴포넌트에서 특정 돔에 접근하고 싶을 때 사용하는 Hook
• 보통 focus나 미디어 플레이백, 애니메이션 적용 등 특정 엘리먼트에 접근하는 용도로 사용되지만 함수형 컴포넌트에서 불필요한 리렌더링 방지를 위해 사용할 수 있다.
• 간단한 예로 Input에 onChange로 event값을 받아 state를 변경하면 불필요한 리렌더링이 여러번 발생하게 되는데
  그 Input을 ref로 지정하고 state를 버튼 클릭 시 ref의 current.value값을 받아서 변경하면 딱 한번의 state변경이 일어나므로 리렌더링이 한번 발생하게 된다.

---

리액트 컴포넌트의 라이프사이클 설명

• 라이프 사이클이란 생명주기를 말한다.
• 생명주기란 컴포넌트가 렌더링을 준비하는 시점부터 페이지가 언마운트 될 때 까지의 사이클을 말한다.
• 라이프사이클에는 9가지 단계가 있는데, 크게는 Mount, Update, Unmount로 나뉜다.
• Mount는 컴포넌트가 생성되고 브라우저에 처음 나타났을 때
• Update는 부모 컴포넌트가 렌더링 할 때
• Unmount는 컴포넌트가 브라우저에서 사라질 때를 말한다.
• 리액트에서는 처음에 클래스형 컴포넌트를 사용했는데, 이를 사용 시 코드의 재사용성 저하, 코드 구성의 난이도 상승 등의 문제가 많았고 진입장벽이 너무높았던 탓에 함수형 컴포넌트를 사용하게 되었고, state의 사용이나 생명주기를 직접 다루는 기능은 Hook이라는 것으로 모든 것 들을 해결해 주었다.

---

JSX 설명

• 리액트에서만 사용되는 자바스크립트의 확장 문법으로 일반적인 자바스크립트에서는 인식하지 못한다.
• 보통 babel과 같은 도구를 이용하여 JSX를 자바스크립트로 변환한다.
• HTML과 비슷한 문법을 사용하여 컴포넌트의 UI를 정의하고 이것을 자바스크립트로 변환하여 브라우저에서 실행한다.

---

세션과 쿠키를 비교하여 설명

쿠키

• 서버 -> 클라이언트에게 전송하며 클라이언트에 저장된다.
• 클라이언트 측에서 관리되기 때문에  보안에 취약하다.
• 도메인,경로,만료기간 등으로 보안을 강화할 수는 있지만 클라이언트에서 쉽게 삭제할 수 있기 때문에 보안이 중요한 정보를 저장하지 않도록 주의해야 한다.

세션

• 클라이언트가 요청을 보낼 때 마다 새로운 세션ID를 생성하여 서버에 저장한다.
• 서버 측에서 관리되기 때문에 보안에 강하다. 그리고 클라이언트에서 삭제할 수 없다.
• 세션ID는 쿠키를 이용하여 클라이언트에게 전송되는데, 이 부분으로 클라이언트가 쿠키를 비활성화 하면 세션도 사용할 수 없다.