React 관련 질문 및 답변

손병진·2020년 11월 27일
1

Why React?

React 선택한 이유

  • 세계적으로 가장 많이 사용되는 프레임워크인 만큼 참고 자료가 풍부하다

장점

  • 기능별로 컴포넌트를 분리하여 구성하면, 재사용성을 확보해서 코드의 중첩을 최소화 할 수 있다.
    그리고 프로젝트 전체의 코드에 대한 높은 가독성 또한 확보할 수 있다.

단점

  • IE8 이하 환경에서는 지원하지 않는다
  • 단방향 데이터 바인딩?
    단방향 데이터 흐름은 하위 Component가 업데이트될 때 상위 Component에 영향을 미치도록 허용하지 않으며, 승인된 Component만 변경되도록 하고 있다. 이러한 단방향 유형의 데이터 바인딩은 코드를 보다 안정적으로 만들지만, 모델과 뷰를 동기화하기 위해서는 추가 작업이 필요하다. 또한 하위 Component의 변경으로 상위 Component까지 업데이트를 반영하려면 더 많은 시간이 소모된다.
    참고 블로그

Virtual DOM

  • 먼저 DOM(Document Object Model) 이란
    문서 객체 모델이라고 하는데 결국은 브라우저에서 다룰 html 문서의 구성요소들을 객체로 구조화하여 나타낸 것이라 할 수 있다

  • 그렇다면 가상 돔이란?
    DOM을 추상화한 가상의 객체

  • 왜 사용하는가?
    DOM 활용의 문제점을 보완하기 위해서

  • DOM의 문제점?
    DOM을 반복적으로 직접 조작하면 그만큼 브라우저가 자주 렌더링하여 자원 소모가 심해진다

  • 가상돔이 보완하는 방법
    DOM을 추상화한 가상의 객체를 메모리에 만들어놓고 직접 DOM을 수정하는 것이 아닌 가상돔을 거쳐 둘의 차이를 판단하는 과정을 거친 후, 렌더린을 최소화하는 것이다.


Redux?

  • 컴포넌트의 상태값 관리의 문제점을 보완하는 장치
    React Component 속성에서는 하위 요소가 바뀔 시에는 상위 수준에는 영향을 주지 않는다.
    이럴 때에 하위 요소에서의 변화가 전역으로 적용되어야 하는 기능이 있을 때에는 해당 상태값 혹은 상태 관리 함수를 위로 끌어올려야 하는 불편함이 있다. 이런 번거로운 과정을 보완하기 위해 상태값을 최상단에서 관리하는 Redux 라이브러리가 적용된다

React Lifecycle Methods

  • componentDidMount
    초기 렌더링이 모두 끝난 뒤에 실행되는 함수

  • componentDidUpdate
    상태값이 변화했을 때 실행되는 함수

  • componentWillUnmount
    모든 렌더링 및 함수가 종료되었을 때 마지막으로 실행되는 함수


함수형 & 클래스형 컴포넌트 차이

  • 클래스 컴포넌트 는 클래스로부터 한번 인스턴스가 생성이 되고 나면 독립적으로 움직일 수 있다

    추가설명
    독립적으로 움직일 수 있다는 것은 메모리 상에서 존재한다는 의미.

  • 이와 달리 함수형 은 한번 호출되고 return값을 출력한 뒤 메모리상에서 사라진다
    (이를 보완하기 위해서 Hooks 탄생)

HOOKS

  • class가 재사용성과 코드 구성을 좀 더 어렵지만 사용했던 이유는 상태관리가 가능했기 때문이다. 하지만 HOOKS 도입으로 함수형 컴포넌트에서도 가능해졌다.

컴포넌트란?

  • 요점은 재사용성
    독립적인 기능을 수행하는 모듈로서, 재사용이 가능한 최소단위.
    하드웨어의 부품 교체처럼 소프트웨어 개발에서 시스템의 유지와 보수를 용이하게 하는 장치
  1. 컴포넌트는 독립적인 소프트웨어 모듈
  2. 컴포넌트는 구현, 명세화, 패키지화 그리고 배포될 수 있어야 한다.
  3. 하나의 컴포넌트는 하나 이상의 클래스들로 구성되어 있다.
  4. 컴포넌트는 인터페이스를 통해서만 접근할 수 있다.

Immutability 유지해야하는 이유

컴포넌트 최적화

  • 상태값을 렌더링하고 수정한다고 할 때
    불변성을 유지해야만 상태값이 변하는 부분만 수정하여 가상 DOM을 구성하고 렌더링을 최소화할 수 있다.
// 불변성 유지 X
const array = [1,2,3,4];
const sameArray = array;
sameArray.push(5);
console.log(array !== sameArray); // false

// 불변성 유지 O
const array = [1,2,3,4];
const differentArray = [...array, 5];
console.log(array !== differentArray); // true
profile
https://castie.tistory.com

0개의 댓글