React에서 중요하게 알아야 할 몇가지 개념 정리

기술면접 준비를 위해 React 관련해서 중요한 내용을 정리하게 되었다.
간단하게 정리했으니 더 자세한 사항은 React 공식문서와 velopert 님의 강의문서를 참고하길 바란다.

 

 

 

 

React 공식문서에서는 React를 이렇게 설명하고 있다.

 

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

1. React 특징

• 선언형(Declarative)
  • 인터렉티브한 UI를 만들 때 생기는 어려움을 줄여줌
  • 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링 함
• 컴포넌트 기반
  • 스스로 상태를 관리하는 캡슐화된 컴포넌트
  • 컴포넌트 로직은 JavaScript로 작성되기 때문에 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있음

 

2. React 기본적인 요소

• JSX
  • React에서 생김새를 정의할 때 사용하는 문법
  • HTML처럼 생겼지만 실제로는 JavaScript 이다.
  • Babel은 자바스크립트 문법을 확장해주는 도구이다. 아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로서 구형 브라우저같은 환경에서도 제대로 실행할 수 있게 해준다.
  • 단순히 두개의 태그를 감싸야 한다면 Fragment를 활용하여 하나의 태그로 감싸면 된다.
  • JSX 내부에 자바스크립트 변수를 보여줘야 할 때는 { }로 감싸면 된다.
• props
  • React에서는 어떠한 값을 컴포넌트에 전달해야 할 때 props를 사용한다.
• state
  • 컴포넌트에서 동적인 값을 말함

 

3. Virtual DOM

• 가상의 돔
• 브라우저에서 실제로 보여지는 DOM이 아니라 메모리에 가상으로 존재하는 DOM으로서 JavaScript 객체이다. 때문에 작동 성능이 실제로 브라우저에서 DOM을 보여주는 것 보다 속도가 훨씬 빠르다.
• 작동방식
• 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해 렌더링한다. 그 후 리액트 개발팀이 만들어 놓은 효율적인 비교 알고리즘을 통하여 브라우저에서 보여지고 있는 DOM과 비교한 후, 차이가 있는 곳을 감지하여 실제 DOM에 패치시켜 준다.
• 따라서 다른 프레임워크(Ember, Backbone, AngularJS)들과 달리 업데이트를 어떻게 할지에 대한 고민을 하지 않으면서, 빠른 성능도 지켜진다.

 

4. 메모리 최적화

• useMemo, useCallback 으로 최적화시킨다.
  • useMemo
    • 메모이제이션된 값을 반환한다. 즉 성능 최적화를 위해 연산된 값을 useMemo라는 Hook을 사용하여 재사용하는 것이다.
    • 메모이제이션이란 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적 계획법의 핵심이 되는 기술이다.
    • useMemo의 첫번째 파라미터에는 어떻게 연산할지 정의하는 함수를 넣고, 두번째 파라미터에는 deps 배열을 넣어주면 된다. 이 deps 배열 안에 넣은 내용이 바뀌면 등록한 함수를 호출해서 값을 연산해주고, 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용한다.
  • useCallback
    • 메모이제이션된 콜백을 반환한다. 즉 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다.
    • 컴포넌트에 선언된 함수들은 컴포넌트가 리렌더링 될 때마다 새로 만들어진다. 물론 함수를 선언하는 것 자체는 메모리, CPU, 리소스를 많이 차지하는 작업이 아니기 때문에, 함수를 새로 선언하는 것 만으로 큰 부하가 생길 일은 없다. 하지만 한번 만든 함수를 필요할 때만 새로 만들고 재사용하는 것은 여전히 중요한 일이다.
    • 그 이유는 컴포넌트에서 props가 바뀌지 않았으면 Virtual DOM에 새로 렌더링하는 것조차 하지 않고 컴포넌트의 결과물을 재사용하는 최적화 작업을 하기 위해서이다. 이를 위해서는 함수를 재사용하는 것이 필수이다.
  • 주의점
    • useCallback, useMemo, React.memo는 컴포넌트의 성능을 실제로 개선할 수 있는 상황에서만 해야 한다. 또한 렌더링 최적화를 하지 않을 컴포넌트에 React.memo를 사용하는 것은 불필요한 props 를 비교만 하는 것이기 때문에 실제로 렌더링을 방지할 수 있는 상황이 있는 경우에만 사용해야 한다.
• 컴포넌트가 re-rendering 되는 조건
  • 자신의 상태(state)가 변경될 때
  • 부모 컴포넌트가 리렌더링될 때
  • 자신이 전달받은 props가 변경될 때
  • forceUpdate 함수가 실행될 때

실제 프로덕션에서 실행되는 앱은 거대한 트리처럼 수 많은 컴포넌트들이 부모-자식 관계로 복잡하게 얽혀있다. 거기서 만약 불필요한(의도하지 않았고 다시 렌더링 될 필요가 없는 요소) 렌더링이 일어난다면 이를 방지해줘야 한다. 그때 사용하는 방법 중 하나가 React.memo(고차 컴포넌트: 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수)이다.

 

 

 

 

https://react.vlpt.us/ 및 리액트 공식문서를 활용하여 작성되었습니다.