React 개념정리

react의 개념과 장점, 그리고 컴포넌트란 무엇인가요?

주로 SPA 를 만들 때 사용되는 UI를 구축하기 위한 자바스크립트 프론트엔드 라이브러리입니다.

장점은 컴포넌트의 가독성이 높고 간단하여 유지보수가 쉽습니다.

컴포넌트란 레고 블록과 같이 작은 단위로 만들어서 그것들을 조립하듯이 개발하는 방법입니다. 캡슐화, 확장성, 결합성, 재사용성과 같은 이점이 있습니다.

리액트의 내부 작동 원리를 재조정(Reconciliation) 개념과 함께 설명하세요.

실제로 DOM을 제어하지 않고 중간에 가상의 virtual DOM을 두어 virtual DOM이 변경이 될 때, 실제 DOM을 변경하도록 설계합니다. 이 작업을 재조정이라고 합니다.

리액트에 있는 라이프사이클과 각 라이프사이클의 역할을 설명하세요.

componentDidMount() 는 최초로 컴포넌트 객체가 생성될 때 한 번 수행하고
componentDidUpdate() 는 컴포넌트의 속성 값 또는 상태값이 변경되면 호출합니다.
그리고 componentWillUnmount() 는 이 컴포넌트가 소멸될 때 호출하고
render() 는 초기에 화면에 그려줄 때, 그리고 업데이트가 될 때 호출합니다.

리액트 라우터같은 Client Side Routing 에 대해서 설명하세요.

웹 페이지의 렌더링이 클라이언트 (브라우저) 측에서 일어나는 것으로

서버와 클라이언트 간의 데이터 트래픽이 감소하고 렌더링이 한번만 있기 때문에 페이지 이동이 빠르다는 장점이 있지만 SEO(검색최적화) 사용에는 SSR 방식에 비해 활용도가 낮다는 단점이 있습니다.

보안 관련해서는 쿠키에 사용자 정보를 저장해야 해서 위험 요소가 될 수 있습니다.

state를 직접 변경하지 않고 setState를 사용하는 이유에 대해서 설명하세요.

state는 immutable(불변성)을 유지해야하기 때문입니다.

컴포넌트는 현재의 this.state와 setState를 비교해서 업데이트가 필요한 경우에만 render 함수를 호출하는데 state를 직접 수정하게 되면 리액트가 render 함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 일어나지 않을 수 있습니다.

리액트 Hooks의 장점은 무엇인가요?

로직의 재사용이 가능하고 관리가 쉽습니다. 함수 안에서 다른 함수를 호출하는 것으로 새로운 hook을 만들어 볼 수도 있습니다.

function component에 hooks가 도입되며 class component가 가지고 있는 기능을 모두 사용할 수 있고, 기존 class component 복잡성, 재사용성의 단점들까지 해결됩니다.

virtual DOM이 무엇인가요? virtual DOM이 좋은 이유에 대해서 설명하세요.

Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할을 합니다.

virtualDOM을 이용하는 이유는 효율성 때문인데, virtualDOM을 활용하면 실제 DOM을 직접 바꾸는 것보다 시간 복잡도가 현저히 낮아집니다. Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달하게 됩니다.

JSX가 무엇인가요?

JSX의 확장 문법으로 React 엘리먼트를 생성하는 언어입니다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능합니다.

웹 성능 향상을 위해 최적화를 해 본 경험이 있나요? 혹은 useMemo와 useCallback 메소드를 활용해 최적화하는 원리에 대해서 설명하세요.

useMemo는 렌더링을 할 때마다 메모리가 많이 소모되는 값은 계산하지 않고 functional components를 최적화하는데 도움을 줍니다. 의존성(dependency) 리스트를 생성해 그 중 하나가 변경되면 바로 값을 계산합니다.

useCallback도 useMemo와 비슷한데, useMemo는 값을 기억하는 대신 useCallback은 함수를 기억합니다.

React 에서 상태 변화가 생겼을 때, 변화를 어떻게 알아채는지에 대해서 설명하세요.

React는 상태를 immutable(불변성) 하게 변경하기 때문에 상태 객체의 주소값이 변경되면 상태가 변화되었다는 것을 알아챌 수 있습니다.이전 문제해설 확인다음 문제

여러가지 상태 관리 라이브러리(Apollo, Redux, MobX 등)의 차이점에 대해서 설명하세요.

• Redux는 Flux개념을 바탕으로한 React에서 현재 가장 많이 사용되는 State 관리 라이브러리 입니다.
• MobX는 Redux와 또 다른 State관리 라이브러리입니다. 기본적으로 객체지향 느낌이 강하며 Component와 State를 연결하는 코드들(보일러 플레이트 코드)을 데코레이터(애노테이션)제공으로 깔끔하게 해결합니다.
• Apollo는 Redux와 차이가 있는데, Redux는 REST API를 사용하기 때문에 리소스의 크기가 서버에서 결정됩니다. 데이터 교환이 복잡하게 이루어지고, 엔드포인트 증가 및 overfetching과 underfetching 등의 문제점을 가지고 있습니다. 반면에 Apollo Client는 GraphQL을 기반으로 합니다. 서버에서는 어떠한 자원을 사용할 수 있는지 정의하고, 클라이언트에서 렌더링에 필요한 데이터를 요청하는 방식이기 때문에 꼭 필요한 데이터 교환이 이루어지기 때문에 매우 깔끔하며 효과적입니다.

useEffect 메소드로 componentWillUnmount 가 동작할 수 있는 방법에 대해서 설명하세요.

useEffect 코드 내부에서 return 하는 익명 함수를 작성하는 방법으로 componentWillUnmount를 구현할 수 있습니다.

props Drilling이란?

Prop Drilling은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정입니다.
props 전달이 적다면 문제가 없지만 prop 전달이 많은 과정을 거치게 되면 코드를 읽을 때 해당 prop을 추적하기 힘들어집니다. 이를 해결하기 위해 보통 전역 상태관리 라이브러리 사용을 합니다.