[IT 면접준비] React_01

한재엽님 깃허브, 규글님 깃허브를 기준으로 공부한 것을 작성한 글이며, 부족한 부분은 구글링을 하며 작성할 예정

GitHub - JaeYeopHan/Interview_Question_for_Beginner: :boy: Technical-Interview guidelines written for those who started studying

 

GitHub - gyoogle/tech-interview-for-developer: 👶🏻 신입 개발자 전공 지식 & 기술 면접 백과사전 📖

 

React Fiber 아키텍처와 Reconciliation

리액트는 JSX를 지원하고, virtual DOM을 활용하여 UI 업데이트 시 변경된 부분만 효율적으로 DOM에 반영하는 프레임워크이다. 여기서 말하고 있는 React Fiber 아키텍처는, 기존의 스택 기반 알고리즘을 대체하며, 비동기 렌더링과 동시성 제어를 가능하게 하는 아키텍처이다.

 

여기서 Reconciliation의 뜻은, React에서 두 개의 트리(이전의 virtual DOM과 새로 생성된 virtual DOM)를 비교하면서 어떤 부분이 변경됐는지 찾아내고, 변경된 부분만 실제 DOM에 반영하는 과정을 말한다.

이 과정은 가끔 굉장히 복잡도가 높아질 수 있기에, 최적화 규칙을 적용해야만 했다. 

• 1. 타입이 다른 두 엘리먼트는 서로 다른 트리로 간주하여, 다른 트리는 전체를 새로 렌더링 한다.
• 2. key 속성을 이용해서 변경된 엘리먼트와 기존 엘리먼트를 연결하여 비교 작업을 효율적으로 처리한다.

기존의 스택 기반 리컨실러는 동기식 렌더링을 했다. 즉, 한 번 리렌더링이 진행되면 스택에 쌓인 작업들이 모두 처리될 때까지 다른 작업은 진행될 수 없었고, 대규모 업데이트가 발생한 경우 UI가 잠시 멈추는 문제까지 있었다. 

---

리액트 17버전의 Fiber 아키텍처에서는 동시성 제어를 지원하게 되었다. 예를 들어, useTransition과 같은 Hook가 생긴 것이다. 

이를 이용해서 UI 렌더링에 있어 우선순위를 관리할 수 있고, 데이터 로딩과 같은 느린 작업들은 사용자 상호작용과 분리하여 처리할 수 있게 된 것이다. 예를 들어, 사용자가 특정한 버튼을 클릭하면 동작 자체는 하지만, 뒤에서는 오래 걸리는 작업을 수행할 때, UI 업데이트를 자연스럽게 느끼도록 제어할 수 있는 것이다. 다시 말해, 사용자 경험을 더욱 살릴 수 있게 되었다.

 

 

Fragment

여러 요소를 하나의 부모 요소로 묶어줄 필요가 있을 때 사용되는 도구이다.

JSX 문법 규칙상, 컴포넌트에서 여러 개의 태그를 반환할 때는 하나의 부모 요소로 감싸야 하는데, div로 묶어버리면 불필요한 HTML 태그가 생성될 수 있어서 코드가 복잡해질 수 있다.

 

이를 위해 Fragment를 사용하는 것이다. 화면에는 아무런 영향을 주지 않고, JSX에서 여러 요소를 반환할 수 있게 도와준다.

<Fragment> </Fragment> 를 사용해도 되고, <> </> 처럼 빈 태그를 사용해도 된다.

 

 

Hook: useState(), useEffect()

React에서 컴포넌트는 크게 클래스형과 함수형으로 나뉜다. 클래스형 컴포넌트에서는 원래 상태 관리와 생명주기 메서드를 사용했지만, 상태(State) 로직을 재사용하기 어렵고, 코드가 복잡해지기 쉬우며, 로직들이 하나의 메서드에 섞여 있어서 이해가 잘 되지 않는 경우가 많았다.

 

이를 해결하기 위해 Hook를 사용하는 것이다. 함수형 컴포넌트에서 이러한 문제를 도와주는데, 클래스형 컴포넌트에서는 동작하지 않는다.

그중 가장 많이 사용되는 것이 이 useState()와 useEffect()인 것이다.

 

• useState() : 상태 관리 Hook 
  • [state, setState]로 각각 현재 상태 값을 나타내고, 상태를 업데이트 할 수 있다. 
  • 그리고 처음에 정의할 때 상태의 초기값을 지정할 수 있다.
• useEffect() : 사이드 이팩트 관리 Hook. 컴포넌트가 렌더링될 때와 상태가 업데이트될 때 특정 작업을 실행할 수 있게 해준다.
  • React의 생명주기인 componentDidMount와 componentDidUpdate를 결합한 형태라고 생각하면 된다.
  • 그리고 리턴값으로 함수를 반환할 수 있는데, 이 함수는 컴포넌트가 언마운트될 때나 다시 렌더링되기 전에 호출된다. 그래서 타이머 같은걸 정리할 수 있다.

 

 

React vs React Native

React와 React Native는 둘 다 Meta(구 Facebook)에서 개발한 프레임워크로, 각각 웹 애플리케이션과 모바일 애플리케이션 개발을 위한 도구이다. 두 기술은 많은 공통점을 가지고 있지만, 적용되는 환경과 기술적 구현에서 차이가 있다.

React는 주로 웹 브라우저 환경에서 동작하는 UI 프레임워크로, HTML과 CSS를 사용하여 컴포넌트를 구성하고 스타일링한다. 반면에 React Native는 모바일 애플리케이션 개발을 위해 사용되며, React 코드를 네이티브 모바일 컴포넌트로 변환해 iOS와 Android에서 동작하도록 한다.

---

React에서 React Native로 전환 시 유사한 점

1. 컴포넌트 생명주기: React Native도 React와 동일한 생명주기 메서드와 Hook을 사용한다. 예를 들어 useEffect로 컴포넌트가 마운트되거나 언마운트될 때 코드를 실행할 수 있다.
2. 상태 관리: React Native는 React와 동일하게 useState, useReducer 등으로 상태 관리를 처리할 수 있으며, Redux나 Context API 같은 글로벌 상태 관리 도구도 동일하게 사용할 수 있다.
3. JSX: React와 마찬가지로 React Native에서도 JSX 문법을 사용해 UI를 정의한다.
4. 성능 최적화: React에서 사용하는 React.memo, React.lazy 같은 성능 최적화 기법도 React Native에서 동일하게 적용된다.

React에서 React Native로 전환 시 차이점

1. 스타일링: React에서는 CSS를 사용하지만, React Native에서는 JavaScript 객체로 스타일을 작성하며, CSS의 모든 속성이 사용되지 않기 때문에 스타일링 방식에 차이가 있다.
2. 라이브러리: 웹용 UI 라이브러리(예: Material-UI)는 모바일 환경에서는 사용할 수 없고, React Native 전용 UI 라이브러리(예: React Native Paper)를 사용해야 한다.
3. 네이티브 기능: React Native는 카메라, GPS 같은 모바일 기기 하드웨어와 직접 상호작용할 수 있지만, 웹에서는 이런 기능을 제어하는 것이 훨씬 제한적이다.
4. 네비게이션: React에서는 React Router를 사용해 웹 애플리케이션의 페이지 이동을 관리하지만, React Native에서는 React Navigation을 사용해 모바일 앱의 스택 또는 탭 네비게이션을 관리한다.
5. 앱 배포: React 웹 앱은 CI/CD 파이프라인을 통해 서버에 빌드 후 배포할 수 있지만, React Native 앱은 iOS와 Android 앱 스토어에 배포해야 하며, 검수 및 승인을 받아야 한다.

 

 

Flutter vs React Native (번외. 필자의 개인적인 생각이 많이 포함됐다.)

이 부분은 필자가 Flutter로 프로젝트를 진행해 왔어서, 차이점이 무엇인지 정리해보고 싶어서 작성했다.

 

1. 프로그래밍 언어의 차이 : 
   • Flutter는 Dart 언어를 사용하고, 이는 Google이 개발한 오픈 소스 UI 툴킷이다. Dart 언어 자체는 객체 지향적이며, 빠르고 직관적인 개발 환경을 제공할 수 있다.
   • React Native는 JavaScript를 사용하고, 널리 사용되는 언어라서, 많은 웹 개발자들이 쉽게 모바일 앱 개발로 전환할 수 있게 한다.
2. UI 개발의 차이 : 
   1. Flutter는 자체 커스터마이징이 가능한 위젯을 제공하고, 플랫폼에 상관없이 일관된 UI와 성능을 유지할 수 있다. 모든 UI 요소들을 하나의 코드베이스로 관리해서, 안드로이드와 ios 전부에서 동일한 디자인으로 구현할 수 있다.
   2. React Native는 네이티브 UI 컴포넌트를 사용해서 UI를 구성한다. 각 플랫폼에 맞게 조정된 UI를 제공하지만, 더 퀄리티있는 커스터마이징을 위해 추가적인 작업이 필요할 수 있다.
3. 개발 속도 및 유지보수
   1. Flutter는 사전에 구축된 UI 컴포넌트 라이브러리를 통해서 빠른 개발이 가능하고, 특히 MVP 개발에 적합하다. 그리고 자동화된 도구를 통해서 쉽게 업데이트가 가능하고, 배포할 수 있다.
   2. React Native는 JavaScript로 개발하여 많은 개발자들이 본인의 개발 경험을 살리기 쉽고, 익숙할 수 있다. 라이브러리 또한 지원된다.
4. 퍼포먼스
   1. Flutter는 자체 렌더링 엔진을 사용하고, 모든 플랫폼에서 일관된 프레임 속도를 유지할 수 있다.
   2. React Native는 자바스크립트 브리지를 활용해서 네이티브 모듈과 상호작용하고, 가끔 성능에 병목 현상을 일으킬 수 있다.