React 관련 기술면접 정리

---

 

#1. React 관련 기술 면접 정리

1. React가 무엇인가요?

리액트는 페이스북(현 Meta)에서 개발한 자바스크립트 라이브러리로서 하나의 HTML에 여러 개의 페이지를 구성하는 싱글 페이지 애플리케이션(SPA) UI를 구성할 때 사용됩니다. 컴포넌트를 기반으로 하여 재사용성이 높고, 대규모 웹페이지를 관리하기에 용이하다는 장점이 있습니다.

Virtual DOM을 사용하며, 자바스크립트 확장 문법인 JSX를 사용하고, 단방향 데이터 흐름을 갖고 있는 게 특징입니다.

 

2. React를 사용하는 이유가 무엇인가요?

컴포넌트 기반 아키텍처이므로 컴포넌트를 여러 부분에서 재사용 할 수 있어 생산성이 높고, 유지보수가 용이합니다. 자바스크립트 코드를 HTML 작성하듯이 사용할 수 있어 편리하며 가독성이 좋습니다. 또, 동적 페이지에서는 사용자에 의한 view의 변화가 빈번한데 리액트는 가상의 DOM을 사용하여 연산 비용이 적게 듭니다.

 

3. 컴포넌트(Component)가 무엇인가요?

컴포넌트는 독립적인 단위의 모듈을 말합니다. 한 페이지 내에서 여러 부분을 컴포넌트 단위로 만들고, 이를 조립해 화면을 구성합니다.

따라서 전체 코드를 파악하기 쉽고, 단위 별로 관리하기 때문에 재사용성이 높다는 장점이 있습니다.

 

4. 클래스형 컴포넌트와 함수형 컴포넌트의 차이는 무엇인가요?

클래스 컴포넌트는 여러 단계의 상속으로 이루어져 있어서 복잡성과 오류 가능성을 증가시켰습니다. 그로인해 함수형 컴포넌트가 등장하게 되었고, 클래스 컴포넌트는 라이프 사이클을 가지며 각각의 생명주기 메소드에 대해 알고있어야 하는 반면, 함수형 컴포넌트는 이런 기능을 hook을 사용하여 원하는 동작을 하게 합니다.

쉽게 말해 클래스형은 라이플사이클 메소드를 사용하고 render함수를 필요로 하며, 함수형은 Hook을 사용해 선언하기 더 편합니다.

 

5. JSX는 무엇인가요?

JSX는 리액트에서 사용 가능한 자바스크립트 확장 문법으로 자바스크립트 코드를 HTML 처럼 사용할 수 있게 합니다.

겉으로 보기엔 HTML과 다를게 없어 보이지만, 리액트의 노드 모듈에 내장되어 있는 Webpack 안에 babel에 의해 자바스크립트로 변환됩니다.

 

6. 가상 돔(Virtual DOM)은 무엇인가요?

Virtual DOM은 애플리케이션의 UI를 구성하는 HTML 엘리먼트 메모리 내에서 구현한 것입니다. 컴포넌트가 다시 렌더링 될 때 Virtual DOM은 가상의 DOM을 만들어 기존의 DOM과 비교해 변경 사항이 있을 경우 전체를 새롭게 만들지 않고, 변경된 부분만 실제 DOM에 반영합니다.

이는 효율성과 속도가 높아진다는 장점이 있습니다.

 

7. DOM과 Virtual DOM의 차이가 무엇인가요?

DOM은 데이터가 변경될 때 마다 매번 처음부터 다시 화면을 불러오는 작업을 수행하기 때문에 변화를 적용할 때 드는 연산 횟수와 비용이 비교적 큽니다. 하지만 Virtual DOM은 변화된 부분만 가려내어 이를 하나로 묶어서 한 번에 실제 DOM에 전달합니다. 그렇기 때문에 연산 횟수가 줄고, 변화에 대한 비용이 비교적 적습니다.

그렇다고 Virutal DOM이 무조건 좋은것은 아닙니다. 정보만 제공하는 정적인 웹 페이지라면 DOM의 변화가 없기 때문에 일반 DOM의 성능이 좋을 수도 있습니다.

 

8. React에서 DOM을 어떻게 렌더링하고 브라우저 이벤트를 처리하나요?

실제로 DOM을 제어하지 않고 중간에 가상 DOM을 두어 변경될 때 실제 DOM을 변경하도록 되어있습니다. 이 작업을 Reconciliation이라고 합니다. 가상 DOM을 갱신하는 방법에는 setState를 호출하는 방법과 redux의 store가 변하면 컴포넌트의 render 함수를 호출해서 갱신하는 2가지 방법이 있습니다.

 

9. SPA는 무엇인가요?

Single Page Application의 약자로 하나의 HTML 페이지로 다수의 페이지 효과를 내는 구현 방식이며, js 파일로 웹 페이지 화면을 변경하는 형태입니다.

페이지 이동 없이 자바스크립트에 의해 화면이 갱신 되므로 네트워크 통신이 발생하지 않아 실행 속도가 빠르고, 새 페이지 요청시 갱신에 필요한 데이터만 받기 때문에 전체적인 트래픽이 감소하는 장점이 있지만, 서버가 해야할 일을 자바스크립트가 대신 하다보니 코드가 비대해 질 수 있고, 하나의 HTML 이므로 검색엔진 최적화에 취약하다는 단점이 있습니다.

 

10 React에서 렌더링이 동작하는 원리는 무엇인가요?

리액트에서 렌더링은 render() 함수를 통해 이루어지는데, 이 함수가 호출되면 DOM 요소를 나타내는 요소가 반환됩니다.

 

11. React에서 Key는 무엇인가요?

리액트는 반복적으로 처리되는 컴포넌트 요소를 식별하기 위해 Key값을 요구합니다. Key값은 고유해야 하며, 고유한 값을 부여하지 못할 때는 index 번호를 사용할 수 있습니다. Key를 사용하지 않으면 추가하거나 제거할 때 예상치 못한 동작 결과가 발생할 수 있습니다.

 

12. state와 props는 무엇인가요?

state는 사용자와의 상호작용을 통해 동적인 데이터를 다룰 때 사용되며, 컴포넌트의 생명 주기 동안 수정될 수 있는 내부 데이터입니다.

props는 수정될 수 없는 읽기 전용 데이터로 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말합니다.

 

13. state를 직접 변경하지 않고 setState를 사용하는 이유가 무엇인가요?

state는 불변성을 유지해야하기 때문입니다. 컴포넌트는 setState를 비교해서 업데이트가 필요한 경우에만 render 함수를 호출하는데, state를 직접 변경하게 되면 상태 변경이 일어나도 렌더링 되지 않을 수 있습니다.

 

14. Hook이 무엇인가요?

클래스형 컴포넌트는 여러 단계의 상속으로 인해 복잡하고 오류 가능성이 많은데, hook은 이런 단점을 극복하고자 16.8 버전 부터 새롭게 업데이트 된 함수형 컴포넌트에 대한 기능입니다. 쉽게 말해 함수형 컴포넌트에서 클래스형 컴포넌트의 기능을 사용하는 기술입니다.

공통 기능을 커스텀하여  hook으로 만들어 재사용 할 수 있다는 특징이 있습니다.

 

15. React의 라이프 사이클 메소드는 무엇인가요?

라이프 사이클 메소드는 컴포넌트가 브라우저상에 나타나고, 업데이트 되고, 사라지게 될 때 호출되는 메소드들을 말합니다. 추가적으로 컴포넌트에서 에러가 발생할 때 호출되는 메소드도 있으며, 크게 컴포넌트가 생성될 때는 mount, 데이터가 변경될 때는 update, 마지막으로 컴포넌트가 제거 될 때는 unmount 3가지로 나눌 수 있습니다.

 

16. Props Drilling이 무엇인가요?

리액트의 컴포넌트 트리에서 데이터를 전달하기 위한 필요 과정을 말합니다. 부모 컴포넌트에서 하위 컴포넌트까지 데이터를 전달하다가 변경사항이 발생하면 일일히 고쳐야 하는 불편함이 있는데, 전역 상태 관리 라이브러리인 Redux, Mobx 등을 활용하여 해당 값이 필요한 컴포넌트에서 직접 호출하여 사용하는 해결 방안이 있습니다.

 

17. useCallback과 useMemo는 무엇인가요?

useCallback과 useMemo는 성능 최적화를 위해서 사용되는 Hook입니다. 이 때, useMemo는 특정 결과 값을 재사용하고, useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용합니다.

 

18. useCallback의 동작원리는 무엇인가요?

useCallback은 변수가 선언 되어지면 해당 함수가 실행됩니다. 그 후 deps의 변경을 통해 값이 변경 되면 새로운 함수를 return하고, 값이 변경 되어지지 않는 다면 기존 함수를 return합니다.

 

19. React.memo는 무엇인가요?

메모이제이션은 연산의 결과값을 메모리에 저장해 두고 이전 값과 같은 값이 나오면 재사용하는 방법입니다.

React.memo()는 컴포넌트 자체를 메모이제이션 하며, 자체적으로 props값을 비교해서 달라진 부분이 없다면 리액트 DOM의 내용을 재사용합니다.

props로 렌더링이 자주 일어나는 컴포넌트에 사용하면 효과를 볼 수 있지만, 그렇지 못한 상황에는 성능이 오히려 악화 될 수 있기 때문에 사용하지 않는 것이 좋습니다.

 

20. Context API는 무엇인가요?

일반적으로 부모 컴포넌트와 자식 컴포넌트는 props를 통해 데이터를 전달하지만, Context는 컴포넌트 트리안에서 전역적으로 데이터를 공유하도록 나온 기능입니다. 즉, Context를 사용하면 단계마다 일일이 props로 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 전달할 수 있습니다.

Redux 보다 개념이 어렵지 않고, 사용하기 쉽습니다.

 

21. Redux가 무엇인가요?

리액트의 전역 상태 관리 라이브러리 중 하나로, 여러개의 컴포넌트가 개별적으로 관리하는 상태값들을 하나의 소스에 모아 놓고 통합 관리합니다. 즉, store라는 상태관리 컨테이너에 값을 저장해 두고 여러 컴포넌트에서 그 값을 호출해 사용하는 방식입니다.

동작 순서는 컴포넌트에서 변경된 값을 action 함수로 보내고, action값은 dispatch를 통해 reducer로 보내집니다. reducer에서는 기존의 state 값과 action을 받아 새로운 state를 만들어냅니다.

순정 리덕스를 리액트에 적용하는 것은 매우 복잡한 처리를 요구하기 때문에 최근에는 Redux-Toolkit이라는 라이브러리를 통하여 리덕스 구조를 단순화 하고 있습니다.

 

22. Redux를 사용하는 이유가 무엇인가요?

리액트의 상태 관리는 Context API, Redux, MobX 등을 사용하여 관리할 수 있는데, Redux를 사용하는 이유는 대규모 개발에 있어 유지보수성이나 작업효율을 높이기에는 리덕스가 좋기 때문에 사용합니다. 하지만 적용하기 매우 복잡하다는 단점이 있습니다.

 

23. Context API와 Redux의 차이가 무엇인가요?

전역 상태를 관리한다는 공통점이 있지만, 리덕스에는 미들웨어라는 개념이 존재하고, Hook을 통해 손쉽게 상태를 조회하거나 디스패치할 수 있습니다.

Context API는 전역 상태 관리를 기능별로 Context를 만들어서 사용하지만, 리덕스는 하나의 커다란 객체에 넣어 사용합니다.

리덕스는 리액트 뿐만 아니라 다른 프레임워크(Angular, Vue)에서도 사용할 수 있지만, Context API는 리액트에서만 사용가능합니다.