#51. 1년차 개발자의 React 개념 정리

React에 관한 대표적인 질문들과 그에 대한 답변입니다.

리액트를 사용하는 실무자라도 반복해서 학습하지 않으면 까먹기 쉽상입니다. 새로운 기술스택을 적용하거나, 리팩토링, 다른 할일도 많기 때문입니다. 그러나 역시 기본이 중요하다는 것을 실감하고 있습니다. React로 개발한 지 어느덧 1년이 넘어가는 중에 기본 개념을 제대로 잡고 싶어서 정리한 내용입니다. 직접 답변을 적은 다음, 여러 문서와 답지를 보고 이해하면서 글을 작성했습니다. 개념이 부족하다고 생각된다면 이 페이지를 참고하시면 좋습니다.

아래 질문들은 URClass를 참조했으며, 꼬리에 꼬리를 무는 질문들과 제가 생각하는 답변을 덧붙였습니다. 틀린점이 있다면, 아래 코멘트 부탁드립니다.

1. 리액트란?

• 리액트는 자바스크립트 프론트엔드 라이브러리이며 SPA 제작을 위해 주로 사용됩니다.

2. SPA란 무엇이고 MPA와의 차이점은 무엇인가요?

• SPA란 Single Page Application으로 HTML파일을 초기에 한 번만 서버에 요청하여 하나의 HTML 페이지로 전체 사이트를 구현하는 방식입니다. 페이지 컨텐츠가 바뀔 때 Virtual DOM과 실제 돔을 비교하여 다른 부분만 업데이트하는 방식입니다. MPA는 페이지 컨텐츠가 바뀔때마다 서버에 HTML, CSS, JavaScript 등을 요청하기 때문에 성능저하가 발생합니다.

3. 리액트의 장점은?

• 위와 같이 Virtual DOM을 사용해서 변화된 부분에 대해서만 업데이트 해주기 때문에 속도가 빠릅니다.
• SSR과 CSR 모두 지원합니다.
• 컴포넌트의 사용으로 유지보수 및 재사용이 쉽습니다.
• 독립적인 기능단위로 모듈화하여 개발이 가능합니다.
• Next.js 등 다른 프레임워크와 혼용이 가능합니다.

4. SSR과 CSR의 차이점은?

• CSR은 웹 페이지의 렌더링이 클라이언트(브라우저)에서 일어나는 것이다. 먼저, HTML을 브라우저에 띄운 뒤, JS를 다운받아서 동적인 웹뷰를 구현한다.
• SSR은 첫 페이지의 렌더링을 서버 측에서 처리해주는 방식으로, 컨텐츠 구성이 완료되면 사용자에게 뷰를 보여준다. 따라서 검색엔진에 노출되며 첫 렌더링에 불필요한 파일이나 모듈이 있다면 성능을 위해 삭제하는 것이 좋다.

5. 컴포넌트란?

• 컴포넌트란 앱 구성의 최소한의 단위이며, 레고블럭을 조립하듯이 컴포넌트의 조합으로 새로운 페이지를 생성할 수 있다. 하나의 독립적인 컴포넌트를 만들면, 재사용과 유지보수가 쉽다. ES6의 Extends.Component 처럼 확장성도 용이하고 모듈화, 캡슐화가 쉽게 가능하다.

6. 리액트의 내부 작동 원리는 무엇인가요?

• 사용자가 브라우저에서 이벤트를 호출하면 실제로 DOM을 제어하지 않고, virtual DOM이 변경될 때, 실제 DOM을 변경하도록 설계합니다. virtual DOM과 DOM을 비교해 DOM을 갱신하는 작업을 Reconciliation(재조정)라고 합니다.

7. 재조정 (Reconciliation)이란 무엇인가요?

• virtual DOM과 DOM을 비교해 DOM을 갱신하는 작업입니다. 최근의 DOM Tree에서 작업을 덜 하는 방식으로 갱신하며, n개의 DOM tree가 있을 때 최신알고리즘이 O(n^3)을 갖는다면 React에 사용되는 디핑 알고리즘은 O(n)으로 작업이 가능하게 합니다. map() 메서드에서 엘리먼트에 고유의 key값을 부여해야하는 이유도 react가 어떤 항목을 추가, 변경, 삭제할지 식별하는 것을 돕기 때문입니다.

8. 리액트에 있는 라이프사이클과 각 라이프사이클의 역할은?

• ComponentDidMount() 함수는 최초로 컴포넌트 객체가 생성될 때 한 번 수행합니다.
• ComponentDidUpdate() 함수는 컴포넌트의 프로퍼티나 상태값이 변경되면 호출합니다.
• ComponentWillUnmount() 함수는 이 컴포넌트가 소멸될 때 호출합니다.

9. Class Component의 생명주기 메소드란?

• Class 객체에서 최초 생성자함수 constructor()는 객체를 바인딩하거나 상태값이 변화하는 경우가 아니라면 없어도 무방합니다. 그러나 render()메소드는 Class 객체에서 반드시 명시해야 합니다. 라이프사이클은 위의 Mounting, Updating, Unmounting의 과정을 거칩니다. (위의 메소드 참고)

10. 리액트 라우터같은 Client Side Routing 이란?

• 웹 페이지의 렌더링이 클라이언트(브라우저) 측에서 일어나는 것입니다.
• 서버와 클라이언트 간의 데이터 트래픽이 감소하고 렌더링이 한번만 있기 때문에 페이지 이동이 빠르다는 장점이 있습니다. 그러나 SEO(검색최적화) 사용에는 SSR 방식에 비해 활용도가 낮습니다.
• CRA만 설치하는 경우, 오직 CSR만 지원합니다.

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

• 자바스크립트의 불변성을 유지하기 위함입니다. 현재의 state와 setState를 비교해서 업데이트가 필요한 경우에 render()메소드를 호출하기 때문에 state 값만 바꾸면 렌더링이 되지 않을 수 있습니다.

12. Props Drilling 이란?

• 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 어떻게 전달할까요? 이 때 Props Drilling 방식을 사용하여 데이터를 전달합니다.

13. 리액트 Hooks의 장점은?

• 함수형이기 때문에 로직의 재사용이 쉽다.
• 기존의 상속은 복잡성, 오류가능성이 증가하는데, Hooks로 해결이 가능하다.
• Custom Hook을 만들 수 있다.
• 라이프사이클을 useEffect() 함수를 사용해서 한번에 구현할 수 있습니다.
• useMemo, useCallback등의 내장함수를 사용하여 리렌더링을 줄임으로써 성능을 쉽게 최적화할 수 있습니다.
• 함수 안에서 다른 함수를 호출하는 것으로 새로운 hook을 만들 수 있습니다.

14. Class Component와 Function Component의 차이점은?

• Class Component는 ProtoType 또는 Class를 상속받아 선언해 주어야 하며, 반드시 render() 함수를 포함해야 하고, 로직 재사용이 어려웠다. 이에 비해, Function Component는 로직 재사용이 편리하고 Class형보다 내부구조가 복잡하지 않다. 메모리도 절약할 수 있다.

15. virtual DOM이 무엇이며, virtual DOM이 좋은 이유는?

• 실제 DOM의 변화를 최소화 시켜주는 가상 돔이 있기 때문에 시간복잡도가 낮아진다.
  (새로 알게 된 내용: 브라우저의 역할)
  - 브라우저는 HTML 파일을 스크린에 보여주기 위해 DOM 노드 트리 생성, 렌더트리 생성, 레이아웃, 페인팅 과정을 거칩니다. DOM 노드는 HTML의 각 엘리먼트와 연관되어 있기 때문에 HTML 파일에 20개의 변화가 생기면 DOM 노드가 변경되고 그 이후의 과정역시 20회 다시 이루어집니다. 작은 변화에도 매우 복잡한 과정들이 다시 실행되기 때문에 DOM 변화가 잦을 경우 성능이 저하됩니다. Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달합니다. 따라서 동시에 많은 변화가 있어도 Virtual DOM이 변화된 부분만 가려내서 실제 DOM에 전달하고 실제 DOM은 그 변화를 1회로 인식하여 단 한번의 렌더링 과정만 거치게 됩니다.

16. JSX가 무엇인가요?

• JavaScript의 확장 문법으로, 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 개발이 용이합니다.

17. useMemo와 useCallback 메소드를 활용해 성능을 최적화하는 원리는?

• 렌더링할 때 메모리 소모가 많은 값은 계산하지 않고 의존성 배열을 생성해 그 중 하나가 변경되면 값을 계산하도록 합니다. 즉, 불필요한 연산과 렌더링을 줄입니다. useCallback은 함수를, useMemo는 특정 값을 기억합니다.

18. React 에서 상태 변화가 생겼을 때, 변화를 어떻게 알아챌까요?

• React는 불변성을 유지해야 한다.
• 상태를 변경하면 상태 객체의 주소값이 바뀐다.
• O(n) -> O(1)

19. 여러가지 상태 관리 라이브러리(Apollo, Redux, MobX 등)의 차이점은?

• 모두 전역 상태관리 라이브러리로, MobX는 객체지향 느낌이 강합니다. Component와 State를 연결하는 코드들을 데코레이터(@) 제공으로 깔끔하게 해결하며, Redux에 비해 Learning Curve가 낮은 편입니다. Next.js의 Class형에 가장 잘 맞는 것 같습니다.
• Redux는 REST API를 사용하기 때문에 자원의 크기가 서버에서 결정됩니다. 그러나 Apollo Client는 GraphQL 기반으로, 클라이언트에서 렌더링에 필요한 데이터를 요청하기 때문에 깔끔하고 효과적입니다.

20. useEffect 메소드로 componentWillUnmount 가 동작할 수 있는 방법은?

• useEffect 내부에서 콜백함수 반환.
• ex) return () => console.log('ComponentWillUnmount');