[Ch 3-3] 리액트 라이프사이클과 Hooks (WIL)

ssjeu·2022년 6월 6일
0

Project

목록 보기
5/6

1. 라이프사이클 - 클래스형 vs 함수형

리액트에서 컴포넌트들은 클래스형 컴포넌트 혹은 함수형 컴포넌트로 표현
컴포넌트는 UI를 만들고, 라이프사이클을 통해 화면에 나타나거나 사라지는 것과 같은 상황에서 특정 동작을 실행

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

클래스형 컴포넌트 : 상태값(state)과 LifeCycle를 가짐, 메모리 자원을 함수형보다 더 사용, 임의 메소드 정의 가능
함수형 컴포넌트 : 상태값(state)과 LifeCycle를 가질 수 없음, 메모리 자원을 클래스형보다 덜 사용, 편리한 컴포넌트 선언

리액트 버전 16.8부터 훅(Hook)이 등장하면서 함수형 컴포넌트에서도 상태값과 생명 주기 함수 코드를 작성 할 수 있게 되어 점차 클래스형보다 함수형 컴포넌트를 사용하는 추세이다.

클래스형 컴포넌트

  • class 키워드로 시작
  • Component로 상속 받음
  • render() 함수를 사용해서 JSX를 반환
  • props를 조회할 때 this 키워드 사용
import React, { Component } from 'react';

class App extends Component {
  render() {
    const str = 'world';
    return (<div>Hello, {str}</div>);
  }
}

클래스형에서 state 사용

state : 컴포넌트 내부에서 바뀔 수 있는 값

  • constructor 안에서 this.state 초기 값 설정 가능
  • constructor 없이 바로 state 초기값을 설정 가능
  • 클래스형 컴포넌트의 state는 객체 형식
  • this.setState 함수로 state의 값을 변경 가능

함수형 컴포넌트

  • state 사용 불가
  • 생명 주기 함수 작성 불가능
  • return문을 사용해서 JSX를 반환
import React from 'react';

const App = () => {
  const str = 'world';
  return (<div>Hello, {str}</div>);
}

함수형에서 state 사용 역할

  • useState 함수로 state를 사용
  • useState 함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꾸어 주는 함수

라이프 사이클

React에서 컴포넌트는 여러 종류의 "생명주기 메소드" 를 가지며 이 메소드를 오버라이딩(상속하여 재정의) 하여 특정 시점에 코드가 실행되도록 설정

"Life Cycle Method"는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메소드들, 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 존재

클래스 컴포넌트에만 해당되는 내용이며, 함수형 컴포넌트는 Hook를 사용하여 생명주기에 원하는 동작을 실행



2. React Hooks

Hook의 개요

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었다. Hook은 기존에 사용하던 class를 이용한 코드를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다.

함수형 컴포넌트가 어떤 값을 유지할 수 있도록, '캐시'를 만들었는데 이 캐시를 이용하고자 만든 여러개의 API가 'React Hook' 함수이다. 훅에 의해 함수형 컴포넌트도 클래스형 컴포넌트처럼 사용할 수 있다.

  • Class형 컴포넌트에서만 쓸 수 있었던 state와 life cycle을 Function형 컴포넌트에서도 사용 가능
  • 현재 공식문서에서는, Class형 컴포넌트보다는 Function형 컴포넌트로 훅과 함께 React 프로젝트를 만들기를 권장
  • 단, 기존의 Class형 컴포넌트들을 Hook을 이용한 Function형 컴포넌트로 refactoring할 이유는 전혀 없음

React Hooks 사용규칙

참고자료

React Hooks 총정리
React Hooks 사용법
React Hooks 공식문서

3. 결론

현재 " 함수형 컴포넌트 + Hook " 을 주로 사용

비교적 더 간결한 코드와 로직으로 최적화 가능

  • 라이프 사이클 메소드가 없으니 명확하고, 값과 레펄런스가 바뀌면 리렌더링 되는 단순한 규칙을 사용하기 때문
  • 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로직을 구성
  • 함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려줌

Hook들을 필요한 곳에 사용하며 Logic의 재사용이 가능하다는 장점

0개의 댓글