기술 면접 대비 - React, Front

CodeModel·2023년 3월 9일
0

기술 면접

목록 보기
2/6

🟡 React

👍 Virtual DOM에 대해 설명해주세요

Virtual DOM은 DOM의 가벼운 사본이라 생각할 수 있습니다. DOM은 한 부분이 바뀌면 모든 부분을 리렌더링 하지만 Virtual DOM은 바뀐 부분만 비교해서 그 부분만 렌더링합니다.

  1. React는 새로운 요소가 추가되면 가상의 DOM이 만들어집니다.
  2. 이 가상DOM의 상태가 변경이 되면 또 새로운 가상DOM이 만들어집니다.
  3. 두 가상DOM의 차이를 비교합니다.
  4. 실제 DOM에 바뀐 부분만 렌더링합니다.

용어 정리
DOM - < body > 같은 태그들에 접근하고 조작할 수 있도록 태그들을 트리 구조로 만든 객체 모델

👍 리덕스

Redux의 기본 개념 : 세 가지 원칙
1. Single source of truth
동일한 데이터는 항상 같은 곳에서 가지고 온다.
즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다.
2. State is read-only
리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다.
리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.
3. Changes are made with pure functions
변경은 순수함수로만 가능하다.
리듀서와 연관되는 개념이다.
Store(스토어) – Action(액션) – Reducer(리듀서)

  • Provider : 전역적으로 상태 관리를 할 컴포넌트들을 감쌉니다.
  • Reducer : 변화를 일으키는 함수 (action 에 따라 기존 상태를 새로운 상태로 만들어냄)
  • Action : 상태에 변화가 필요할 때 액션을 발생
  • Store : 전역에서 유일하게 상태를 저장하는 저장소
  • useDispatch : 액션을 발생시키고 액션을 스토어에 전달
  • useSelector : 스토어에서 값을 가져옴

순수함수
동일한 인자가 들어갈 경우 항상 같은 값이 나와야 한다.
return 값으로만 소통한다.

ex) 전달인자 (2,3)
return a + b : 순수함수
return a + b + c : 순수함수 아님 -> c에 의해 결과가 달라지기 때문에 순수함수가 아님

👍 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해-

제어 컴포넌트 - 사용자의 입력한 값을 useState()로 값을 저장하는 방식, 사용자가 입력한 값이 실시간으로 변하여 항상 최신값을 유지한다.
비제어 컴포넌트 - ref를 이용해 관리, 사용자가 실행해야 값을 변화 시키거나 리렌더링을 일으킨다.

그럼 제어 컴포넌트는 언제 사용할까?

유효성 검사
유효한 데이터가 없는 경우 전송 불가 표시
신용카드와 같은 특정 입력 방식 적용하기

제어 컴포넌트를 사용할 때 문제점?

불필요한 리렌더링, 불필요한 api요청으로 인한 자원 낭비 문제.
이를 막기 위해 디바운싱을 사용할 수 있다.

디바운싱 - 연속적으로 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것

👍 React Hooks는 무엇이고 어떤 장점이 있나요.

클래스 형태 컴포넌트에서만 할 수 있었던 state관리나 라이프사이클 등을 함수 형태 컴포넌트에서도 사용할 수 있게 만들어주는 기능입니다.

장점
코드가 간결해진다.
로직의 재사용 가능, 관리가 쉽다
로직을 한 곳으로 모을수 있어서 가독성이 좋다
useEffect, useState등이 있다.

👍 React의 개념과 특징, 그리고 컴포넌트란 무엇인가요?

리액트는 자바스크립트 라이브러리로써 싱글 페이지 애플리케이션의 UI(User Interface)를 만드는데 중점을 둔 라이브러리입니다. 리액트는 5개의 특징이 있습니다.

가상돔, 단방향 데이터 바인딩, JSX문법, 선언형 프로그래밍, 컴포넌트 기반이 있습니다.

  1. 가상돔
  • 가상돔은 리플로우와 리페인트가 자주 수행되는 문제를 해결하기 위해 화면에 표시되는 DOM과 동일한 DOM을 메모리에 만들고 DOM에 변경이 생기면 메모리의 가상 돔에 모든 연산을 수행 후, 실제 DOM을 갱신하는 방식입니다.
  1. 단방향 데이터 바인딩
  • 단방향 데이터 바인딩 - 하나의 Watcher가 자바스크립트의 데이터 갱신을 감지하여 사용자의 UI 데이터를 갱신. 사용자가 UI를 통한 자바스크립트의 데이터를 갱신할 때는, 이벤트를 통해 갱신

  • 양방향 데이터 바인딩 - 사용자 UI의 데이터 변경을 감시하는 Watcher와 자바스크립트 데이터의 변경을 감시하는 Watcher가 UI와 자바스크립트 데이터를 자동으로 동기화 시켜주는 방식

  1. JSX 문법
  • JSX는 자바스크립트와 HTML을 동시에 사용할 수 있는 문법입니다. 사용 방법으로는 html 요소를 작성한 후 중괄호{}를 이용해 자바스크립트 문법을 사용합니다.
  1. 선언형 프로그래밍
  • 함수가 어떻게 동작하는지 보다 함수가 동작해서 얻는 결과에 집중하는 프로그래밍 방법. ex) for문 vs map
  • 비선언형적인 부분을 캡슐화함으로써 명령형 프로그래밍 언어로 선언형 프로그래밍을 할 수 있습니다
  1. 컴포넌트 기반
  • 컴포넌트는 "웹 페이지를 만드는 퍼즐 조각" 입니다. 개발자는 컴포넌트를 만들고 조합해서 UI를 구축합니다. 재사용성 할 수 있다는 장점이 있습니다.

👍 리액트 최적화 방법

1. useMemo - 리턴되는 값을 Memoization 하는데 사용한다.

  • Memoization - 이미 계산 해 본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면 다시 연산하지 않고 기억 해 두었던 데이터를 반환 시키는 방법. 시험을 볼 때 이미 풀어본 문제는 다시 풀어보지 않아도 답을 알고 있는 것과 비슷함.

  • 사용 방법
    const newRusult = useMemo(콜백함수,[변화 할 값])
    변화 할 값이 변경될때만 콜백 함수가 다시 실행됩니다. 변화 할 값이 변경되지 않으면 함수가 호출한다 해도 변경이 없다 판단되어 이전에 호출한 똑같은 값을 반환합니다. 리턴 값은 함수가 아닌 값을 리턴한다.

2. React.memo - props로 동일하다면 Memoization을 사용합니다.

  • 사용 방법
    const newComponent = React.memo( (props)=> { }, areEqual)
    컴포넌트를 만드는 콜백함수를 React.memo로 감싸 고차 컴포넌트를 만듭니다.
    두번째 인자로 areEqual을 받을 수 있습니다. 첫번째 인자와 두번째 인자를 비교해 동일하다면 true 다르다면 false를 반환합니다. areEqual 함수로 얕은 비교에서의 문제를 막을 수 있다.

  • 고차 컴포넌트 - 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수. 예를 들면 가죽을 주면 구두를 만들어 준다 라는 의미

3. useCallback - 함수 선언을 Memoization 하는데 사용된다.

  • 사용 방법
    const newFun = useCallback( 콜백 함수 ,[ 변화할 값 ])
    변화한 값이 변경하지 않으면 메모이제이션 된 함수를 반환합니다.

4. props로 객체를 넘겨줄 경우 변형하지말고 넘겨주기
5. 컴포넌트를 매핑할 때 key값으로 index를 사용하지 않는다.
6. useState의 함수형 업데이트
7. Input에 onChange 최적화

👍 클래스형 컴포넌트와 함수형 컴포넌트의 차이를 설명해주세요

클래스형 컴포넌트 - state, lifeCycle 관련 기능 사용 가능, 메모리 자원을 더 사용한다.

함수형 컴포넌트 - state, lifeCycle 관련 기능 사용 불가능 [Hook을 통해 해결 됨]
메모리 자원을 덜 사용한다.

클래스형 컴포넌트

import React, {Component} from 'react';

class App extends Component { // class 키워드 필요, Component로 상속을 받아야한다.
  render() { // render() 메소드가 반드시 있어야한다.
    const name = 'react';
    return <div className="react">{name}</div>
  }
}

export default App;

함수형 컴포넌트

import React from 'react';
import './App.css';

function App() {
  const name = 'react';
  return <div className = "react">{name}</div>
}

export default App;

🟡 Front

profile
개발자가 되기 위한 일기

0개의 댓글