React의 setState가 비동기인 이유
🔑 배치업데이트
setState 호출을 모아서 한 번의 배치 업데이트로 처리함으로써 성능을 최적화하기 위함입니다.
불변성이 무엇인가요?
왜 리액트는 불변성을 지켜야하나요?
🔑 side effect, 주소값 비교
리액트는 이전과 현재의 참조값을 비교해 상태변화를 감지하고 업데이트합니다.
불변성을 유지하면 상태의 변경이 예측 가능하며 직접 수정으로 인한 사이드 이펙트를 방지할 수 있습니다.
또 업데이트시 참조 주소값만 비교하면 되므로 효율적이고 빠르게 렌더링을 최적화할 수 있습니다.
어떻게 불변성을 지킬 수 있나요?
- 데이터를 직접 변경해 수정하지 않고 새로운 데이터를 생성
- Object.assign 메서드를 사용
- 새로운 객체 또는 배열 생성
- spread operator, map, filter, slice, reduce, concat 등
cf. splice는 원본데이터 변경함
- setState이용시 원시타입은 값 바로 넣어줘도 되나, 참조타입은 새로운 객체나 배열을 생성한 후에 값을 넣어주어야 함
- Immutable.js 라이브러리 사용
- 객체나 배열을 깊은 복사 - lodash라이브러리(_.cloneDepp()), 재귀적으로 깊은 복사, JSON.parse(), JSON.stringify()
React의 Virtual DOM의 작동원리
🔑 diffing, DOM, 부분 업데이트
React의 Virtual DOM은 가상의 브라우저 메모리 내에 실제 DOM과 대응하는 가벼운 복제품입니다. 컴포넌트 업데이트가 발생하면, Virtual DOM은 새로운 가상 트리를 생성하고 이전 트리와 비교하여 변경된 부분을 찾아냅니다. 그런 다음 변경된 부분만을 실제 DOM에 적용하여 최소한의 렌더링 작업만 수행하므로 성능을 향상시키고 웹 애플리케이션의 빠른 업데이트를 가능하게 합니다.
Props Drilling에 대해 설명해주세요
🔑 단방향, 중간 컴포넌트
예를 들어, 부모 컴포넌트가 데이터를 가지고 있고, 이 데이터를 그 부모의 자식 컴포넌트가 아닌 또 다른 하위 컴포넌트에 전달해야 할 때, 중간 컴포넌트가 이 데이터를 받아서 props로 넘기는 과정을 Props Drilling이라고 합니다. 이로 인해 컴포넌트 계층 구조가 복잡해지고 데이터를 전달하는 과정이 번거로워질 수 있으며, 컴포넌트 간의 결합도가 높아질 수 있습니다.
Props Drilling을 어떻게 해결할 수 있나요?
Props Drilling을 해결하기 위해 Context API나 Redux와 같은 상태 관리 도구를 사용하거나, 데이터를 직접적으로 전달하지 않고 필요한 컴포넌트에 데이터를 제공하는 방식을 고려할 수 있습니다.
상태관리 방법에 대해 알고 계신게 있나요?
🔑 전역, context API, useState
context api에 대해 설명해주세요
🔑 전역, props drilling
Context API는 리액트에 내장된 기능으로, 컴포넌트 간에 값을 공유할 수 있게 해줍니다.
props로 데이터를 전달할 때 컴포넌트가 깊어지면, 불필요하게 중간 컴포넌트를 거쳐야하는 props drilling의 문제점이 발생할 수 있는데 이를 방지해줄 수 있습니다.
context api를 사용할때 발생하는 문제점은 무엇인가요?
🔑 리렌더링, Provider hell, 컴포넌트간 의존성
클래스 컴포넌트와 함수형 컴포넌트에 대해 설명해주세요
🔑 라이프사이클 , 훅
이전에는 클래스형 컴포넌트에서만 상태와 라이프사이클을 관리 할 수 있었습니다.
리액트 16.8에 훅이 도입되며 함수형 컴포넌트에서도 이를 가능하게 되었는데요.
클래스 컴포넌에서는 This.state와 라이프 사이클 메서드를 활용하고,
함수형 컴포넌트에서는 useState, useEffect훅을 사용해 상태와 생명주기를 관리할 수 있게 되었습니다.
리액트의 생명주기가 클래스/ 함수형 컴포넌트에서 어떻게 구현되나요?
리액트의 컴포넌트는 일반적으로 브라우저에 최초 화면이 그려지는 mount, 상태값이 변경되는 update, 화면에서 Ui가 사라지는 unmout의 세 가지 생명주기 단계를 거칩니다.
클래스 컴포넌트는 각 단계에서 정해진 메서드가 순서대로 호출되는데 이러한 메서드를 생명주기 메서드라고 합니다.
반면 함수형 컴포넌트는 useEffect 훅을 사용해 생명주기에 관련된 작업을 하는 데에 차이점이 있습니다.
리액트에서 렌더링을 최적화할 수 있는 방법은 어떤 것들이 있나요?
리액트는 렌더링 횟수를 줄이거나 불필요한 렌더링을 방지하는 방법으로 렌더링을 최적화 할 수 있습니다.
최적화의 대표적인 방법으로는 useMemo나 useCallback 훅을 사용하여 메모이제이션을 수행하는 방법이 있습니다.
또 React.memo와 shoudlComponentUpdate 메서드를 통해 조건부로 리렌더링을 수행하는 방법이 있습니다.
메모이제이션이란 무엇인가요?
값비싼 함수 호출의 결과를 캐싱하고 동일한 입력이 다시 발생할 때 연산을 다시 하지 안혹, 캐싱된 결과를 반환하는 프로그래밍 기술 - useCallback, useMemo
useMemo, useCallback에 대해 설명해주세요
- useMemo
- 메모이제이션된 값을 반환하는 리액트 훅
- 의존성이 변경되었을 때에만 메모이제이션된 값을 다시 계산
- 인자 : 연산 및 값을 반환하는 함수, 의존성 배열
- 복잡한 계산이나 외부 데이터가 필요한 작업에 용이
- useCallback
- 메모이제이션된 콜백 함수, 즉 이미 생성된 함수를 반환하는 리액트 훅
리렌더링이 발생하는 조건에 대해 설명해주세요.
- 본인의 state가 변경될 때
- 부모 컴포넌트로부터 받아오는 props가 변경될 때
- 부모 컴포넌트가 리렌더링 될 때
- shouldComponentUpdate(), forceUpdate() 등 강제 업데이트 메서드 호출
왜 리액트는 key props를 사용하나요?
key는 리액트에서 엘리먼트를 고유하게 식별하기 위해 사용합니다.
가상돔을 활용해 렌더링할때 고유한 Key값을 통해 빠르게 엘리먼트를 식별할 수 있습니다.
Reconcilation을 최적화해줍니다.
또 컴포넌트가 다시 렌더링되어도 해당 컴포넌트의 상태를 유지하고 있어 이전 값을 참조할 수 있습니다.
🔑 고유값, reconcilation
reconcilation이 무엇인가요
🔑 virtual dom, key
reconciliation은 리액트와 같은 가상 돔 기반 라이브러리에서 UI를 업데이트하는 과정 중 하나입니다.
이전 돔과 현재 돔을 비교해 변경된 부분만을 실제 dom에 적용하여 돔의 조작을 최소화해줍니다.
때문에 빠른 UI업데이트를 통해 사용자 경험을 향상시켜주고 렌더링을 최적화 할 수 있습니다.
Redux-thunk의 동작원리를 설명해주세요
thunk는 액션을 리듀서에 전달할때 이를 가로채 비동기 함수와 같은 작업을 수행하고 완료되면
뷰에서 클릭 등 이벤트가 발생하면 액션이 생성되어 store로 전달됩니다.
이때 thunk 미들웨어에서 이를 가로채 비동기 함수 같은 추가작업을 수행합니다.
작업이 완료된후 다시 액션을 리듀서에 dispatchg합니다.
리듀서는 state와 action을 받아 액션을 처리하고 새로운 state를 반환해 store에 저장합니다.
이후 스토어의 상태값이 변경될때 store를 구독하고 있는,컴포넌트들의 ui가 업데이트 됩니다.
미들웨어가 무엇인가요?
RTK에 대해 설명해주세요
flux 패턴과 mvvm패턴이 대해 아시나요?
리덕스란 무엇인가요?
리액트18버전과 이전 버전의 차이점은 무엇인가요?
🔑 동시성, 배치업데이트, suspense지원 -SSR개선
고차컴포넌트란 무엇인가요
🔑 공통로직 분리, 횡단 관심사
고차 컴포넌트는 리액트에서 여러 컴포넌트에서 중복되는 로직을 분리해 재사용하기 위해 사용하는 기술입니다.
고차컴포넌트는 함수로 작성되며, 컴포넌트를 입력으로 받아서 새로운 컴포넌트를 반환합니다.
이때 반환된 새로운 컴포넌트에서 기존 컴포넌트의 기능을 확장하거나 수정할 수 있습니다.
리액트의 의존성 배열과 역할, 사용되는 곳에 대해 설명해주세요
🔑 훅, 상태, 렌더링
의존성배열은 useEffect, useCallback, useMemo 등 훅의 인자로 전달되는 배열입니다.
컴포넌트가 렌더링 될때, 의존성 배열 내의 값들이 변경될 때에만 해당 훅이 실행되도록 설정해주어 불필요한 렌더링이나 연산을 방지해줄 수 있습니다.
리액트 component vs element vs instance의 차이점을 각각 설명해주세요
