리액트 면접준비 [ 41~50문항 ]

41. 타입스크립트란?

- 정적 타입을 명시하는 컴파일 언어

- 타입스크립트 컴파일러 or babel을 통해 자바스크립트 코드로 변환
  코드 작성 단계에서 타입을 체크해 오류를 확인 할 수 있고
  미리 타입을 결정하기 때문에 실행속도가 매우 빠르다는 장점이 있습니다.
  하지만 코드작성 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며
  컴파일 시간이 오래걸린다는 단점이 있습니다.
- 타입스크립트는 자바스크립트의 슈퍼셋
- 자바스크립트 기본문법 + 자료형 문법 추가 유효한 자바스크립트로 작성한 코드는 ts로 변환할 수도 있음

42. Angular와 React의 차이점

- angular는 실제 돔 방식, SSR 지원, 양방향 바인딩, 주요 언어 ts, MVC모델,객체
- React : virtual dom 지원, SSR-next.js, JSX 문법, 네이티브

- Angular: 타입스크립트 기반 오픈소스 프레임 워크, 양방향 바인딩 지원, RxJs,

- Vue : 가상돔 지원, SSR, 양방향,단방향 바인딩 지원, ts 지원,
            single file component - html, css, script를 하나로 묶어서 직관적 구성가능

43. SEO란?

- SEO (Search Engine Optimization)
  구글, 네이버와 같은 검색 엔진들은 웹사이트를 돌아다니며,
   HTML문서를 분석해 우리가 검색할 때 빠르게 검색하도록 도와줌
  검색엔진이 찾기 쉽도록 사이트를 개선하는 프로세스
  방법으로는 Meta Tag, <title>, <description>, Opgen Graph 처럼 다양한 태그를 활용 할 수 있다.

44. 이벤트 위임이란?

- 상위 요소에서 하위 요소의 이벤트를 제어하는 방식
- 캡쳐링, 버블링을 이용
   → 여러 엘리먼트마다 각각의 이벤트 핸들러를 할당하지않고
  공통되는 부모에 이벤트 핸들러를 할당하여 이벤트를 관리하는 방법
*장점
  다수의 핸들러 할당 대신 하나의 핸들러만 할당 → 코드 단순, 메모리 절약
*단점
  이벤트 위임을 쓰기위해서는 반드시 버블링 되어야함 버블링 되지않는 이벤트나,
   stopPropagation()을 사용한 경우 이벤트 위임x

45. 메모이제이션이란?

- 메모이제이션은 함수호출 결과를 저장하고 동일한 입력이 다시 제공될 때 캐시된 결과를 반환하여
  응용프로그램의 속도를 높이는 최적화 기술
- React.memo() - 컴포넌트 자체를 메모이제이션,
  props를 비교해 달라진 부분이 없으면 dom 비교작업 x
- useCallBack() - 함수 자체를 메모이제이션
                            자바스크립트에서 함수는 객체취급,
                            리렌더링 시 새로운 함수 생성 자식 컴포넌트의 불필요한 리렌더링을 막기 위해
                             useCallback() deps의 의존성 값이 변경되지 않는 다면 이전 생성 함수 참조 값 반환
- useMemo() - 함수의 리턴 값을 메모이제이션 deps에 들어있는 의존성 값이 변경되지 않는다면 메모된 값 사용

46. 이벤트 버블링이란

- 이벤트 버블링은 특정 화면요소에서 이벤트가 발생했을 때
   해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미합니다.
- 하위요소에서 상위요소로 이벤트 전파 방식

47. 부모에서 자식으로 이벤트상속방법

- 이벤트 캡쳐링은 버블링과 반대방향으로 진행되는 이벤트 전파방식
- addEventListener() API에서 옵션 객체 capture:true 설정

48. 이벤트버블링을 막는 방법

- event.stopPropagation() 을 사용하면 해당 이벤트가 전파되는 것을 막음
- 버블링의 경우 클릭한 요소의 이벤트만 발생, 상위요소 전달 x
- 캡쳐링의 경우 최상위 요소 이벤트만 동작하고 하위요소 전달 x
   단, stopPropagation()으로 버블링을 막아놓은 영역에선 분석 시스템의 코드가 동작하지 않기 때문에,
        죽은 영역(dead zone)이 되어버림

49. 이벤트버블링 활용 방법

- 하위 요소에서 각각 이벤트를 붙이지 않고 상위 요소에서 하위요소의 이벤트를 제어하는 방식으로
   이벤트 버블링을 활용할 수 있습니다.
*이벤트 위임을 통해 하위를 클릭하면 상위가 동작하므로 상위에 하나 설정하면 전체 동작하도록 최적화 가능

50. React, 왜 사용하시나요?

- SPA 방식으로써, 과거 동적 응답이 발생 했을경우 모든 페이지를 새로 고쳐야 했는데
  React는 변경이 필요한 부분만 고쳐 렌더링을 하여 더 편한 유저 경험을 선사하며,
  컴포넌트 기반으로 UI를 짜게 되는데 이는 재사용률을 높인다.
*html 1개만 사용하고 다른페이지 보여주고 싶을 때 html만 변환하여 보여줌 html을 함수,
  array, object에 보관하고 재사용 할 수 있어 html 관리 용이