물고 물어지는 개념 정리하기(웹 프론트엔드): 나만의 사전2

j_wisdom_h·2023년 8월 16일

물고 물어지는 개념 정리하기(웹 프론트엔드)

목록 보기

2/4

물고 물어지는 개념 정리하기(웹 프론트엔드): 나만의 사전2

1. 리액트의 생명주기(Lifecycle)

리액트의 생명주기(Lifecycle)는 컴포넌트가 생성되고 업데이트되며 제거될 때의 단계들을 나타내는 메서드들의 집합이다. 클래스형 컴포넌트와 함수형 컴포넌트에서는 생명주기 메서드를 사용하여 컴포넌트의 동작을 제어하고 상태 변화에 따른 작업을 수행할 수 있다.

생명주기 메소드

constructor(): 컴포넌트가 생성될 때 호출되며, 초기 상태를 설정하거나 메서드를 바인딩할 때 주로 사용된다.
componentDidMount(): 컴포넌트가 화면에 나타난 후(렌더링된 후) 호출되는 메서드다. API 호출이나 초기화 작업 등을 수행할 때 사용된다.
componentDidUpdate(prevProps, prevState): 컴포넌트의 업데이트가 발생한 후 호출되는 메서드다. 이전 프롭스와 상태를 비교하여 필요한 업데이트 작업을 수행할 수 있다.
shouldComponentUpdate(nextProps, nextState): 컴포넌트의 업데이트 여부를 결정하는 메서드로, 불필요한 렌더링을 방지할 때 사용된다.
componentWillUnmount(): 컴포넌트가 제거되기 전 호출되는 메서드로, 리소스 해제나 이벤트 핸들러 등을 정리할 때 사용된다.

함수형 컴포넌트에서의 대응하는 훅

useState: 컴포넌트의 상태를 관리하는 훅으로, 클래스형 컴포넌트의 this.state에 대응된다.
useEffect: 컴포넌트의 생명주기 메서드들을 대체하는 훅으로, componentDidMount, componentDidUpdate, componentWillUnmount 역할을 수행한다.

리액트 16.8 버전부터는 훅(Hook)이 도입되어 함수형 컴포넌트에서도 상태와 생명주기 관련 작업을 편리하게 수행할 수 있게 되었다. 함수형 컴포넌트에서 훅을 사용하여 클래스형 컴포넌트의 생명주기 메서드와 상태 관리를 대체할 수 있다.

클래스형 컴포넌트

class ExampleClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      document.title = `Count: ${this.state.count}`;
    }
  }

  componentWillUnmount() {
    document.title = 'Goodbye!';
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

함수형 컴포넌트와 훅

import React, { useState, useEffect } from 'react';

function ExampleFunctionalComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;

    return () => {
      document.title = 'Goodbye!';
    };
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

함수형 컴포넌트? 클래스형 컴포넌트?

함수형 컴포넌트 : 리액트 컴포넌트를 함수의 형태로 정의하는 방식
클래스형 컴포넌트: 리액트 컴포넌트를 ES6 클래스로 정의하는 방식

함수형 컴포넌트 장점

간결성: 함수형 컴포넌트는 함수의 형태로 작성되기 때문에 코드가 더 간결하고 읽기 쉬워진다. 클래스형 컴포넌트에서 사용되던 boilerplate 코드가 줄어들어 개발자의 생산성을 높여준다.
성능 개선: 함수형 컴포넌트는 클래스형 컴포넌트보다 더 경량화되어 있어서 렌더링 성능이 약간 향상될 수 있다. 함수형 컴포넌트는 내부 최적화와 렌더링 최적화가 더 쉽게 이루어질 수 있도록 돕는다.
함수 컴포넌트의 대중화: 함수형 프로그래밍 개념을 기반으로 하므로 함수형 프로그래밍에 익숙한 개발자나 새로운 개발자들에게 더 친숙한 접근 방식이다.
훅의 사용: 함수형 컴포넌트는 훅을 더욱 간편하게 사용할 수 있는 환경을 제공한다. 훅은 주로 함수형 컴포넌트와 함께 사용되며, 함께 사용하면 코드의 재사용성과 모듈화가 더 쉬워진다.
클래스 단점 회피: 클래스형 컴포넌트의 this 바인딩, 생명주기 메서드의 복잡성 등과 관련된 단점들을 피할 수 있습니다.

클래스형 컴포넌트 특징 및 장점

상태 관리: 클래스형 컴포넌트는 this.state를 사용하여 상태를 관리하고, setState 메서드를 통해 상태를 업데이트합니다. 이를 통해 동적인 UI를 구현할 수 있습니다.
생명주기 메서드: 클래스형 컴포넌트는 componentDidMount, componentDidUpdate, componentWillUnmount 등의 생명주기 메서드를 활용하여 컴포넌트의 라이프사이클 이벤트를 다룰 수 있습니다.
렌더링 제어: render 메서드를 통해 컴포넌트의 렌더링 결과를 반환하며, JSX를 사용하여 UI를 작성합니다.
상속: 클래스 기반으로 정의되므로 다른 클래스에서 상속을 받거나 인터페이스를 확장할 수 있는 장점이 있습니다.
React 컴포넌트 API 사용: 클래스형 컴포넌트는 리액트의 다양한 기능과 API를 더 다양하게 활용할 수 있는 환경을 제공합니다.

2. 리액트 훅

훅(Hook)은 리액트 16.8 버전부터 도입된 개념으로, 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 관련 로직을 관리하기 위한 기능을 제공한다.
훅을 사용하면 클래스형 컴포넌트에서 사용되던 생명주기 메서드와 관련된 로직을 더 간결하고 직관적으로 작성할 수 있다.

등장배경

리액트는 처음에 클래스형 컴포넌트를 사용하여 UI를 개발하였다. 하지만 클래스형 컴포넌트는 코드 중복, 가독성 문제, 복잡한 생명주기 관리 등의 문제점이 있었다. 또한, 컴포넌트 간 로직의 공유와 재사용이 어렵다는 한계가 있었다.

리액트 팀은 이러한 문제를 해결하고 컴포넌트 개발을 더욱 간결하고 유연하게 만들기 위해 훅을 도입하게 되었다. 훅은 함수형 컴포넌트에서 상태와 생명주기 관련 로직을 관리하기 위한 방법을 제공하면서, 클래스형 컴포넌트의 단점을 극복하는 목적으로 등장하게 되었다.

장점

더 간결한 코드: 훅을 사용하면 상태 관리나 생명주기 관련 코드를 함수형 컴포넌트 내부에서 더 간결하게 작성할 수 있다. 클래스형 컴포넌트에서는 여러 생명주기 메서드를 분산되어 작성해야 하는데, 훅을 사용하면 관련된 로직을 하나의 훅 함수로 묶어서 작성할 수 있다.
모듈화와 재사용성: 훅은 로직을 모듈화하여 재사용 가능한 함수로 구성할 수 있다. 이로써 다양한 컴포넌트에서 동일한 로직을 쉽게 재사용할 수 있다.
상태 관리와 생명주기 관리의 통합: 훅은 useState, useEffect와 같은 함수를 통해 상태 관리와 생명주기 관리를 함께 다룰 수 있다. 이로써 컴포넌트 내에서 상태 변화와 관련된 작업을 일관되고 효율적으로 처리할 수 있다.
클래스형 컴포넌트의 단점 극복: 클래스형 컴포넌트는 코드 중복이나 가독성 문제 등이 발생할 수 있는데, 훅은 이러한 문제를 해결하고 더 간결하고 관리하기 쉬운 코드를 작성할 수 있도록 도와준다.
성능 최적화: 훅을 사용하면 불필요한 렌더링을 방지하고, 컴포넌트 업데이트를 최적화하는 작업을 더 쉽게 수행할 수 있다.

클래스형 컴포넌트 - this바인딩

클래스형 컴포넌트에서의 this 바인딩은 컴포넌트의 메서드 내에서 해당 컴포넌트의 인스턴스(=객체)를 참조하기 위한 메커니즘이다.
JavaScript의 클래스에서는 메서드 내에서 this 키워드를 사용하여 해당 클래스의 인스턴스에 접근할 수 있다.

(주의점)
1) 메서드 바인딩: 클래스형 컴포넌트의 메서드를 다른 함수나 이벤트 핸들러에 전달할 때는 명시적으로 메서드를 바인딩해야 합니다. 이를 하지 않으면 this가 예상치 못한 값이 될 수 있습니다

2) 콜백 함수 내에서의 this: 클래스형 컴포넌트에서 이벤트 핸들러나 비동기 작업에서 this를 사용할 때 주의가 필요하다. 콜백 함수 내부의 this는 클래스 인스턴스를 가리키지 않을 수 있다.

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick() {
    // this는 undefined일 수 있음 (바인딩 필요)
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <button onClick={this.handleClick}>Increment</button>
    );
  }
}

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
    // 메서드 바인딩
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    // this.state에 접근 가능
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}

j_wisdom_h

뚜잇뚜잇

이전 포스트

물고 물어지는 개념 정리하기(웹 프론트엔드): 나만의 사전1

다음 포스트

물고 물어지는 개념 정리하기(웹 프론트엔드): 나만의 사전2