FED Front-End-Developer

리액트를 다루는 기술을 보면서 학습하던 중 중요한 부분들은 블로그에 정리 중에 있습니다. 아직 정리가 덜 끝나 간단한 부분 몇개만 공개를 하고 추후(언제 될지는 몰라요...) 포스팅 하도록 하겠습니다. 오늘은 어플리케이션 개발에 많은 혼란을 가져오는 부분 중 하나인 라이프 사이클에 대한 정리 부분을 공개합니다.

라이프 사이클

모든 리액트 컴포넌트에느 라이프사이클이 존재. 컴포넌트의 수명은 페이지에 렌더링되기 전인 '준비 과정'에서 시작하여 페이지에서 사라질 때 '끝'남.

메서드

1. Will 접두사 - 어떤 작업을 작동하기 전에 실행되는 메서드
2. Did 접두사 - 어떤 작업을 작동한 후 실행되는 메서드

컴포넌트의 라이프 사이클

1. 마운트 - 페이지에 컴포넌트가 나타남

• 마운트 과정에서 호출하는 메서드

  1. constructor: 컴포넌트를 새롭게 만들 때 호출되는 클래스 생성자
  2. getDerivedStateFromProps: props의 값을 state에 넣을 때 사용하는 메서드
  3. render: UI를 렌더링하는 메서드
  4. componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

2. 업데이트 - 컴포넌트 정보를 업데이트 (리렌더링)

• 업데이트가 일어나는 경우

  1. props가 바뀔 때
  2. state가 바뀔 때
  3. 부모 컴포넌트가 리렌더링될 때
  4. this.forceUpdate로 강제 렌더링을 트리거할 때

• 업데이트가 일어나는 경우 호출하는 메서드

  1. 업데이트를 발생시키는 경우가 실행된 경우 (위의 원인)
  2. getDerivedStateFromProps: (마운트 과정 및 업데이트가 시작하기 전 호출) props의 값을 state에 넣을 때 사용하는 메서드
  3. shouldComponentUpdate: 컴포넌트 리렌더링을 결정하는 flag. true 반환 시 라이프 사이클의 다음 메서드 실행 / false 반환 시 작업중지. this.forceUpdate() 함수를 호출하면 이 과정을 생략하고 바로 render 함수 호출
  4. render: 컴포넌트 리렌더링
  5. getSnapshotBeforeUpdate: 업데이트 반영 전 snapshot을 가져오는 메서드
  6. componentDidUpdate: 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

3. 언마운트 - 페이지에서 컴포넌트가 사라짐

• 언마운트 과정에서 호출하는 메서드

  1. componentWillUnmount: 컴포넌트가 브라우저에서 사라지기 전 호출하는 메서드

출처: 리액트를 다루는 기술

리액트 컨셉

불변성

복잡한 특징들을 구현하기 쉽게 만든다. 직접적인 데이터 변이는 이전 이력을 유지 및 재사용할 수 없다.

변화감지

직접적인 변이는 변경을 감지하는 것이 어렵다. 참조하고 있는 불변 객체가 이전 객체와 다르면 객체는 변한것이라 판단한다.

재(再)렌더링

불변성과 변화감지를 이용하여 순수 컴포넌트를 만들고 이를 이용하여 데이터가 변화할 때 즉각적으로 재렌더링을 실행한다.

render 함수

render() { /\* pass /\* };

render 함수는 컴포넌트(레이아웃, 기능 등)를 정의한다. 해당 함수는 html 형식의 문자열이 아닌 뷰의 shape과 behave를 정의한 객체를 반환한다. 최상위 컴포넌트의 렌더링이 끝나면 해당 객체들을 이용하여 DOM 안에 mount한다. (1. 문자열 형태의 HTML 코드를 생성 2. DOM에 해당 내용을 주입)

reconciliation (조화 과정)

리액트의 뷰는 '변형' 되는것이 아니라 새로운 요소로 '교체'된다. 해당 작업 역시 render 함수가 담당한다. 컴포넌트가 데이터를 업데이트했을 때 해당 과정에서 생성된 새로운 데이터를 활용하여 render 함수가 또 다시 호출되며 그러한 과정에서 새로운 view가 생성된다.

Virtual DOM

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. Virtual DOM은 DOM(이미 추상화 된)의 추상적 개념이다. 데이터가 변경되면 1. View 영역을 Virtual DOM에 리렌더링 2. 이전 Virtual DOM과 현재의 것을 비교 3. 바뀌 부분만 실제 DOM에 적용

클래스 컴포넌트

import React, { Component } from  'react';

class App extends Component {
    render() {
        ...
        return ...
    }
}

export default App;

특징 및 차이점

함수 컴포넌트는 컴포넌트의 default가 함수의 형태이며 반환할 값에 template을 클래스형 컴포넌트에는 render 메서드에 사용할 데이터와 return문을 함께 명시하여 준다. 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있으며 임의 메서드를 정의하여 사용할 수 있다.

state vs props

리액트의 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. (vue.js에서는 store의 프로퍼티, 즉 상태 값을 의미) props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며 컴포넌트에서는 읽기 전용으로만 사용한다. (vue.js에서는 props는 전달되는 데이터 값이며 읽기전용이 아닌 초기화 값으로 사용)

state vs useState

두가지의 state 값이 존재하며 클래스형 컴포넌트에서는 state를, 함수 컴포넌트에서는 useState를 사용한다.

Property Initializer Syntax

클래서형 컴포넌트의 메서드 바인딩은 생성자 안에서 처리하는 것이 Best Practice이지만 불편하고 코드량이 많아지며 구현부가 파편화되고 관리 이슈가 생길 수 있다. transform-class-properties를 사용하면 이를 회피할 수 있다.

ref

ref(=reference)는 id를 대체하는 리액트의 선택자이다. 특정 엘리먼트를 직접 핸들링할 경우에는 id 대신에 ref를 사용하여 처리한다. ref를 설정하는 가장 기본적인 방법은 1.콜백 함수를 활용하는 방법이며 2. createRef 함수를 사용하는 방법이 있다.

SyntheticEvent (합성 이벤트)

합성 이벤트는 네이티브 이벤트와 다르게 이벤트가 끝나고 나면 이벤트가 초기화되므로 정보를 참조할 수 없다. 비동기적으로 이벤트 객체를 참조하려면 e.persist() 함수를 호출한다.