1. setState가 비동기적으로 동작하는 이유를 설명 해주세요.
동적으로 변경되는 웹 사이트의 변경 사항마다 DOM을 업데이트하는 대신 렌더링 비용을 최소화 하기 위해 rendering/reconciliation 단계에서 WIP 트리를 구축하고 변경 사항을 파악하는 작업은 비동기적이며 commit 단계에서 동기적으로 일괄(batch) 업데이트 합니다
2. JSX에 대해 설명해 주세요.
JSX(JavaScript XML)라는 JavaScript에 XML, HTML을 추가하여 확장한 문법으로 자바스크립트의 정식문법은 아니며 babel같은 트랜스파일러에 의해 자바스크립트 코드로 변환되어 사용됩니다.
3. state와 props의 차이를 설명 해주세요.
props는 부모 컴포넌트로 부터 전달 받는 read-only 불변 데이터이고 state는 컴포넌트 내부의 변경 가능한 데이터라는 것이 차이점입니다
4. 컴포넌트에 대해 설명해 주세요.
컴포넌트는 html CSS 및 JS가 결합된 웹 앱의 독립적으로 재사용 가능한 UI 요소를 의미합니다
5. 함수형 컴포넌트와 클래스형 컴포넌트의 차이점을 설명해 주세요.
클래스형 컴포넌트와 함수형 컴포넌트의 차이점으로는 함수형 컴포넌트는 immutable한 props를 받기 때문에 랜더링 결과가 보장되고 클래스형 컴포넌트는 this를 통해 props를 참조하기 때문에 렌더링을 결과를 보장할 수 없는 차이점이 있습니다 또한 클래스형 컴포넌트에서는 리액트 라이프 사이클을 사용할 수 있고 함수형 컴포넌트에서는 hook을 사용할 수 있는 차이가 있습니다
6. 리액트의 렌더링 단계에 대해 설명해 주세요
리액트 렌더링은 렌더 단계와 커밋 단계로 나눌 수 있습니다 렌더 단계는 재조정으로 가상 DOM 요소의 변화를 감지하고 필요한 업데이트를 결정하는 단계입니다. 커밋 단계는 렌더 단계에서 결정된 변경 사항들을 실제 DOM에 반영하는 단계입니다.
리액트에서 배열을 렌더링할 때 forEach를 사용하지 않고 map을 사용하는 이유
원시타입과 참조타입에 대해 설명해 주세요
깊은 복사와 얕은 복사의 차이점을 설명해주세요
초기 렌더링시 VDOM
useEffect가 실행되는 3가지 방식
useState가 한번만 업데이트 되는 이유
custom hook이란 무엇인가요?
hook을 사용하는 조건
기술 동향 파악은 어떻게 하고 계신가요
CSS 선택자의 종류와 각각에 대해 설명해주세요
CSS 선택자의 우선순위
전역 상태 관리 라이브러리 사용 경험에 대해 말해주세요
tailwindcss 혹은 styled-component를 사용한 이유
HOC란 무었인가요
리액트 최적화 방법
useMemo랑 useCallback의 차이점
react.memo와 useMemo의 차이
SPA, MPA, SSR, CSR, SSG 차이점
flux 패턴에 대해 설명 해주세요
Context API란 무었인가요?
정의 :
-
Context API는 React 컴포넌트 간에 값을 공유할 수 있게 해주는 기능입니다. 전역적으로 공유할 값을 다룰 때 주로 사용되지만, 반드시 전역적일 필요는 없습니다.
-
사용 이유: props drilling을 해결할 때 사용합니다.