프론트엔드 개발자 면접 준비 (React)

React의 라이프사이클에 대해 설명해주세요.

React의 클래스형 컴포넌트에서 사용하는 LifeCycle API는, 컴포넌트가 DOM 위에 생성되거나 사라질 때, 혹은 업데이트될 때 호출되는 API입니다.

Virtual DOM에 대해 설명해주세요.

DOM과 유사한 객체를 메모리에 올리고, 변경사항이 생기면 메모리에 올라간 Virtual DOM을 수정하고, DOM에 대해 비교를 수행하여 변경사항에 대해서만 DOM에 반영하는 것을 말합니다.
이로 인해 더 반응성이 빠른 웹을 구현할 수 있습니다.

Virtual DOM은 트리가 변경되었는지 어떻게 비교를 하나요?

React의 경우, Reconciliation을 사용합니다.
React의 Reconciliation은 변경 전과 변경 후의 엘리먼트 노드에 대해 디핑(diffing) 비교 알고리즘을 수행합니다.

하지만 일반적의 경우 디핑 알고리즘은 O(n^3)의 시간복잡도를 가지고 있으며, React에 이 알고리즘을 적용한다면, 1000개의 엘리먼트 노드에 대해 알고리즘을 수행할 경우 10억 번의 비교연산을 수행해야합니다.

React는 대신 다음 두 가지 가정을 기반하여 O(n)의 시간복잡도를 가지는 휴리스틱 알고리즘을 구현했습니다.

1. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다.
2. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해줄 수 있다.

이러한 처리로, 일반 디핑 알고리즘에 비해 현저히 낮은 비용으로 비교 및 UI 렌더링이 가능하다.

리액트 훅이란 무엇일까요?

훅은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능입니다.
훅을 통해서 함수형 컴포넌트에서도 컴포넌트의 상태값을 관리할수도, 컴포넌트의 생명 주기 메소드또한 이용할 수 있게 해줍니다.

추가적으로 커스텀훅을 통해 재사용성 있는 함수를 여러 컴포넌트에서 쉽게 사용할 수 있습니다.
이러한 훅은 React 버전 16.8에 추가되었습니다.

리액트에서 Key는 무엇인가요?

리액트에서 Key는 컴포넌트 배열을 렌더링했을 때, 어떤 원소에 변동이 있었는지 알아내려고 사용합니다.
Key가 없을 대는 가상 DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지합니다.
하지만, key가 있다면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알 수 있습니다.

useEffect에 대해 설명해주세요.

useEffect 함수는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 실행할 수 있도록 하는 Hook입니다.
useEffect는 컴포넌트가 마운트 됐을 때, 혹은 언마운트되거나 업데이트 됐을 때, 특정 작업을 처리할 수 있습니다.
즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것입니다.
useEffect Hook을 사용할때는 첫 번째 인수로 실행할 콜백함수를 넣고, 두 번째 인수로 검사하고자하는 특정 값이나 빈 배열을 넣습니다.

useCallback에 대해 설명해주세요.

useCallback 함수는 첫 번째 인수로 입력된 콜백의 메모이제이션 버전을 반환합니다.
반환된 메모이제이션 버전은 콜백의 의존성이 변경되었을 때만 변경되며, 이는 불필요한 렌더링을 방지하기 위해 참조의 동일성에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용합니다.
예로 React의 Memo로 감싸진 컴포넌트에 프롭으로 전달하는 경우, 자주 사용됩니다.

useMemo에 대해 설명해주세요.

useCallback 함수와 마찬가지로 메모이제이션된 값을 반환합니다.
의존성이 변경되었을 때만 메모이제이션된 값을 다시 계산하므로, 불필요한 계산을 방지합니다.

메모이제이션에 대해 설명해주세요.

일반적으로 메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술입니다.
이는 리액트에서도 불필요한 계산 혹은 리렌더링의 방지를 위해 사용됩니다.

useRef에 대해 설명해주세요.

useRef 은 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환하며, 이 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다.
이 전 생애주기를 통한 유지란 컴포넌트가 리렌더링되어도 값이 유지가된다는 뜻입니다.

리액트의 에러 바운더리에 대해 아시나요?

에러 바운더리('Error Boundaries')는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트입니다.

함수형 컴포넌트의 장점이 무엇인가요?

1. 클래스형 컴포넌트보다 선언이 간편합니다.
2. 클래스형 컴포넌트보다 메모리 자원을 덜 사용합니다.
3. 프로젝트 빌드 후 배포할 때 결과물의 파일 크기가 더 작습니다.
4. 이전에는 라이프사이클 API를 사용하지 못한다는 단점이 있었는데, 이제는 16.8부터 지원하는 Hook을 통해 이러한 단점이 사라졌습니다.

Redux와 Mobx 중에 Redux를 사용한 이유가 있나요?

1. Redux는 상태값 변경 시 순수함수만을 사용하여 사이드 이펙트가 없으며, 이로 인해 테스트 코드를 작성하기 쉽다는 장점이 있습니다.
2. MobX의 경우 클래스형 컴포넌트가 기본 기준으로 잡혀있어, 함수형 컴포넌트에서 Hook과 함께 사용하려고 하면 오류가 발생했었습니다.

Redux 미들웨어 中 Thunk와 Saga의 차이는 무엇이 있나요?

Saga는 thunk에 비해 액션이 Pure Object 만을 반환해 Thunk보다 깔끔하다는 점으로 테스트 코드 작성이 편했습니다.

Angular, React의 차이는 무엇이 있나요?

Angular은 MVC 패턴을 사용하는데, 이 패턴은 모델과 뷰의 양방향 데이터 전달로 인해 상태 관리가 어려운 단점이 있어, 페이스북팀에는 이러한 단점을 해결하고자 데이터 흐름이 단방향인 FLUX 패턴을 고안해냈습니다.