React 알잘딱깔쎈

면접 공부용이라서

줄글 줄줄줄입니다....

 

뭐부터 봐야 할까

 

---

 

• 리액트란 무엇인가요?
  • "React is the best"
    • https://www.youtube.com/watch?v=pVQPfTleC_4

 

농담입니다

---

• React란 무엇인가
  • 개요
    • Facebook에서 개발한 JavaScript 라이브러리로 사용자 인터페이스를 효율적으로 구축하기 위해 사용
    • React의 핵심은 컴포넌트 기반 아키텍처를 사용해 UI를 재사용 가능한 작은 컴포넌트 단위로 나누는 것
    • 컴포넌트화로 코드의 유지보수성과 재사용성을 높일 수 있다
  • 가상DOM
    • 실제 DOM을 조작하기 전 변경 사항을 메모리 내에서 계산하고 필요한 부분만 실제 DOM에 업데이트한다
    • 브라우저 렌더링 비용을 줄일 수 있다
  • 단방향 데이터 바인딩
    • 상태관리와 데이터 흐름을 단순화 하기 위해 단방향 데이터 바인딩을 채택했다
    • 데이터 흐름이 예측 가능하고 디버깅이 용이하다
  • React 쓰는 이유
    • 초기 학습 곡선이 낮음
    • 대규모 커뮤니티와 생태계 가짐 << 정보나 자료 얻기 매우 굿
    • Redux, React Router, Next.js 등 다양한 도구와 함께 사용되며 유연하게 확장 가능 굿
• React 주요 개념
  
  • 컴포넌트
    • React의 핵심 요소. UI를 재사용 가능한 작은 단위로 나눔
    • 컴포넌트는 함수형 또는 클래스형으로 작성함
    • 역할: UI를 독립적이고 재사용 가능한 블록으로 구성
    • 구조: 하나의 컴포넌트는 HTML, CSS, JS를 포함해 특정 UI의 일부분을 담당
  •  Props
    • 컴포넌트 간 데이터를 전달하기 위한 방법
    • 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용
    • Props는 읽기 전용임. 변경할 수 없음. 자식컴포넌트는 받아서 랜더링에 사용함
  • State
    • 컴포넌트 내부에서 관리하는 동적인 데이터
    • 컴포넌트와 UI 동작을 제어함
    • State가 변경되면 컴포넌트가 다시 렌더링 됨
    • 사용자 입력, 네트워크 요청 등의 변화에 따라 동적으로 UI 업데이트
    • 컴포넌트 내부에서 정의하며, setState 또는 useState로만 변경 가능
  • LifeCycle 메서드
    • 흠 이건 처음 보는데?
    • 클래스형 컴포넌트에서 제공되는 메서드
    • 컴포넌트의 생성mount, 갱신update, 소멸unmount 과정에서 특정 로직을 실행할 수 있음
    • 주요 메서드
      • componentDidMount(): 컴포넌트가 랜더링 된 후 실행
      • componentDidUpdate(): State나 Props가 변경된 후 실행
      • componentWillUnmount(): 컴포넌트가 제거되기 전 실행
  • Hooks
    • React 16.8부터 도입된 기능으로, 함수형 컴포넌트에서 State와 LifeCycle 메서드를 사용할 수 있게 함
    • 주요 Hooks
      • useState: State 관리
      • useEffect: Side Effect 관리 (예: API 호출, 구독)
      • useContext: Context API 사용

---

https://xiubindev.tistory.com/119

실제로 받은 프론트엔드 개발자 면접 질문 모음

이 분의 프론트엔드 질문 중 React 파트

 

• virtual dom 작동 원리에 대해 설명
  • virtual dom은 실제 dom의 사본을 메모리 상에서 유지하며, 변경 사항을 virtual dom에 먼저 반영한 후 실제 dom과 비교(diffing)하여 최소한의 업데이트만 실제 dom에 적용하는 방식으로 작동함.
  • 성능을 최적화하고 랜더링 속도를 높임
• virtual dom이 무엇인가?
  • dom의 가벼운 사본으로, react가 ui를 업데이트할 때 효율적으로 랜더링하기 위해 수행
  • 변경 사항을 virtual dom에 먼저 적용한 뒤, 변경된 부분만 실제 dom에 반영
• react를 사용하는 이유?
  • 컴포넌트 기반 아키텍쳐와 가상 dom을 사용해 ui를 효율적으로 개발
  • 코드의 재사용성과 유지보수성을 높이고, 대규모 어플리케이션에서도 성능을 최적화할 수 있음
• 제어 컴포넌트와 비제어 컴포넌트 차이
  • 제어 컴포넌트: 컴포넌트의 상태를 React state로 관리하며, 입력 값이 state를 통해 제어됨
  • 비제어 컴포넌트: dom 자체의 상태를 관리하며, react state 대신 ref를 사용해 값을 창조
• key props 사용하는 이유?
  • key는 react에서 리스트를 랜더링할 때, 각 항목을 고유하게 식별하기 위해 사용
  • virtual dom이 변경 사항을 효율적으로 추적해 성능을 최적화할 수 있음
• prop과 state의 차이?
  • props: 부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터
  • state: 컴포넌트 내부에서 관리되는 동적인 데이터, 상태 변경 시 컴포넌트가 다시 랜더링 됨
• pure component란?
  • react에서 제공하는 클래스형 컴포넌트
  • shouldComponentUpdate를 자동으로 구현해 이전 props와 state를 얕은 비교(shallow comparison)으로 비교한 후 렌더링 여부 결정
• shouldComponentUpdate란?
  • 클래스형 컴포넌트에서 특정 조건에 따라 랜더링을 방지하거나 허용하는 메서드
  • 성능 최적화를 도울 수 있음
• 클래스형 컴포넌트와 함수형 컴포넌트의 차이?
  • 클래스형 컴포넌트: react 이전 버전에서 주로 사용되었으며, 상태 관리와 라이프사이클 메서드 지원
  • 함수형 컴포넌트: React 16.8 이후 Hooks 도입으로 상태 관리와 라이프사이클을 지원, 간결하고 쓰기 쉬워짐
• 생명주기 메서드란?
  • 앞에서 말한 LifeCycle임
  • React 컴포넌트는 생성(Mount), 업데이트(Update), 소멸(Unmount) 단계에서 특정 메서드 호출할 수 있음
  • componentDidMount: 컴포넌트가 DOM에 삽입된 후 실행
  • componentDidUpdate: 상태 또는 props 변경 후 실행
  • componentWillUnmount: 컴포넌트가 DOM에서 제거되기 전 실행
• 리액트에서 JSX 문법이 어떻게 사용되나?
  • JSX는 JavaScript와 HTML을 결합한 문법, React 컴포넌트와 UI를 선언적으로 표현할 수 있음.
  • JSX는 React.createElement로 변환되어 브라우저에서 동작함
• 왜 상태를 직접 바꾸지 않고 useState를 사용해야 하나?
  • React의 상태는 직접 변경할 수 없음
  • useState의 setter함수를 통해 변경해야 React가 상태 변경을 감지하고 컴포넌트를 다시 랜더링함
• useMemo란?
  • 값의 메모이제이션
  • 변하지 않으면 이전 값을 재사용한다
• useCallback이란?
  • 함수의 메모이제이션
  • 함수가 종속성 배열이 변경되지 않으면 이전 함수를 재사용한다
• 리액트에서 메모이제이션을 하는 방법?
  • React.memo, useMemo, useCallback을 사용해 컴포넌트 값, 함수를 메모이제이션
  • 불필요한 재랜더링을 방지하고 성능을 최적화
• 리액트 관련 패키지 중 선호하는 것?
  • 사바사
  • Next.js가 대표적이지 않을까?
  • 서버사이드 렌더링ssr과 정적 사이트 생성ssg을 지원해 seo와 초기 로딩 속도를 개선함
• 리액트의 렌더링 성능 향상을 위해 어떻게 해야 하는가?
  • 컴포넌트 메모이제이션 React.memo
  • useMemo와 useCallback 사용
  • Virtualization 라이브러리 react-window
  • 리스트 렌더링 시 적절한 key 설정
• 리액터 쿼리란?
  • React Query는 서버 상태를 관리하기 위한 라이브러리
  • 데이터 fetching, 캐싱, 동기화를 간단하게 처리함
  • 주로 API 데이터를 효율적으로 관리하는 데 사용됨
• useEffect, useLayoutEffect의 차이에 대해?
  • useEffect - 랜더링 후 비동기적으로 실행
  • useLayoutEffect: DOM 업데이트 후 동기적으로 실행. UI 업데이트 전 실행 되므로 레이아웃 조정에 유리함
• Context API
  • React에서 props 드릴링 없이 컴포넌트 계층 전체에 데이터 전달할 수 있는 방법
  • 전역 상태 관리를 단순화 함

---

 

React vs Vue vs Angular

 

• 기본 개념
  
  • React
    • 라이브러리: 사용자 인터페이스(UI) 구축에 초점을 맞춘 JS 라이브러리
    • 컴포넌트 기반: UI를 재사용 가능한 컴포넌트로 나눔
    • virtual DOM을 사용해 빠른 랜더링 지원
    • 상태 관리를 위해 Redux, React, Router 같은 외부 라이브러리 필요함
  • Vue
    • 프레임워크: 기본적으로 상태 관리 및 라우팅 라이브러리 포함
    • 반응형 데이터 바인딩과 virtual DOM 제공
    • Vue Router나 Vuex
  • Angular
    • 프레임워크: 모든 기능이 포함된 올인원 솔루션
    • 라우팅, 상태 관리, HTTP 요청 등을 위한 여러 기능이 내장되어 있어, 추가 라이브러리 없이도 개발 가능
• 언어
  • React: JS+TS, 함수형 프로그래밍 스타일 지향. JSX로 UI 작성
  • Vue: JS+TS, 템플릿 기반 문법. Vue 템플릿은 HTML과 매우 유사
  • Angular: TS 기본 언어로 사용. 클래스 기반 설계
• 데이터 바인딩
  • React: 단방향. 데이터가 부모에서 자식으로 전달됨. 양방향도 가능하긴 한데 기본적으로 단방향
  • Vue: 양방향 바인딩(v-model) 지원하지만, 단방향 데이터 흐름(Vuex)과도 호환됨. 
  • Angular: 양방향 데이터 바인딩 지원, 모델과 뷰가 자동으로 동기화. 데이터 변경 시 UI 즉시 변경
• 컴포넌트 기반 개발
  • React: 컴포넌트 기반 라이브러리. 함수형 컴포넌트와 클래스형 컴포넌트 지원. 함수형 컴포넌트와 훅 사용
  • Vue: 컴포넌트 기반이지만, 템플릿 구문이 있어 더 간단하게 작성 가능
  • Angular: 모든 것이 컴포넌트로 구성. MVC 패턴에 가까움. 모듈화가 강력하게 구현됨.
• 상태 관리
  • React: 자체적으로 상태 관리 라이브러리가 없음. Redux, Context API, Recoil 같은 외부에서 가져옴
  • Vue: 컴포넌트 기반이지만, 템플릿 구문이 있어 더 간단하게 작성할 수 있음.
  • Angular: 기본적으로 RxJS 반응형 확장 라이브러리와 서비스 패턴으로 상태 관리
• 라우팅
  • React: React Router라는 외부 라이브러리 주로 사용. 단방향 데이터 흐름과 잘 연계됨
  • Vue: Vue Router라는 공식 라이브러리있음
  • Angular: Angular Router라는 내장 라우팅 모듈 제공.
• 성능
  • React: 가상DOM. 필요한 부분만 렌더링, 경량화된 어플리케이션에 유리
  • Vue: 가상DOM. 필요한 부분만 업데이트, 성능 우수. 초기 로딩 속도 빠름.
  • Angular: 프레임워크가 무겁고 초기 로딩 시간이 다소 길지만, 잘 최적화된 상태에서는 복잡한 어플리케이션에서도 적합
• 학습 난이도
  • React: JSX 문법과 단방향 데이터 흐름을 이해해야 함. 기본적인 구조는 간단해서 많은 개발자에게 인기 있음
    • 어떤 개발자는 외부 라이브러리가 많아 다양한 기능이 많지만, 그만큼 러닝커브도 비례한다고 말함
  • Vue: HTML과 비슷한 템플릿 문법 덕에 배우기 쉬운 편. 초보자에게 접근성 좋으면서도 강력한 기능 제공
  • Angular: TS강제. 배워야됨. 초반 진입장벽 있을 수 있음. 주로 기업용 어플리케이션에 적합.

GPT피셜

---