WEB/React

[React] 함수형 컴포넌트와 클래스형 컴포넌트, useEffect는 어떨 때 쓸까?

explorer999 2024. 5. 15. 12:19

 

  • 함수형 컴포넌트: props를 입력값으로 받아들이고, JSX를 반환한다. 함수형 컴포넌트는 상태를 갖지 않는다.
function FunComp() {
  return (
    <div className="container">
      <h2>함수형 컴포넌트</h2>
    </div>
  )
}

 

 

  • 클래스형 컴포넌트: 클래스로 정의된다. render() 메서드를 사용해서 JSX를 반환하며, 상태값을 가질 수 있다.
class ClassComp extends React.Component{
  render() {
    return (
      <div className = "container">
        <h2>클래스형 컴포넌트</h2>
      </div>    )
  }
}

 

 

 

 

 

컴포넌트 생명주기의 관점에서

 

클래스형 컴포넌트에서는 
componentWillMount()라는 걸로 리액트가 그 컴포넌트에 구현되어 있는 메서드를 호출하도록 약속되어 있다. 
컴포넌트가 생성되기 전에 처리해야 할 함수들은 이 메서드 안에 넣으면 된다. 


그 다음에 render()메서드로 컴포넌트를 마운트하고, 
componentDidMount()에서는 컴포넌트가 생성된 후에 해야할 일을 정의한다.

 

 

 

예를 들어서, 


classComp라는 클래스형 컴포넌트를 만들어서

componentWillMount()라는 것을 구현하고

그 안에 console.log로 아무 말이나 출력되도록 한다. 

그러면 그 말이 출력되고, 
그 다음 render 메서드가 호출되고, 

그 다음 componentDidMount가 호출된다는 것을 확인할 수 있다. 


render 되기 전에 해야 하는 일은 componentWillMount 저 메소드를 구현하고 내용을 가져다놓는 것.

그러면 리액트가 알아서 렌더 전에 호출해 준다. 

componentDid~이거는 render 이후에 실행되기로 약속되어있다. 

 

 



component가 한번 만들어진 다음에는 컴포넌트에 뭔가 변화가 생긴다. state가 바뀌든 props가 바뀌든.  이럴 때 쓰는 또 다른 메서드들이 있다. 
shouldComponentUpdate 는 트루, 폴스를 리턴하는 함수인데
여기서 true가 나오면
componentWillUpdate, render, componentDidUpdate가 차례대로 실행이 된다~

 

 



클래스형 컴포넌트 방식에서는 이렇게 생명주기에 따라서 정해진 이름의 메서드들을 구현하는 것으로 컴포넌트의 생명주기를 관리할 수 있다. 반면 함수형 컴포넌트에서는 이러한 생명주기를 관리하는 것이 불가능했는데, 이걸 가능하게 만들어 준 것이 리액트의 Hook이다. 

 

 

 

useEffect라는 hook을 쓰는 이유



함수형 컴포넌트에서 쓰는 useEffect라는 훅은 클래스 컴포넌트의 componentDidMount, componentDidUpdaate와 같은 기능을 한다. 

여기서 efffect는 side effect의 줄임말로, 뭔가 부가적인 효과를 말한다. 

 


함수 컴포넌트가 호출되는 원래목적(==main effect)은 그 함수로부터 return되는 결과, 즉 컴포넌트 자신을 그려서 화면에 보여주는 것이다. 
근데 뭐 예를 들어서 컴포넌트의 정보를 ajax같은 걸로 가져와서 내용을 변경시킨다든지(네트워크 통신), 문서의 타이틀 값을 바꾼다든지. 컴포넌트 자체의 모습이 렌더링되는 것과는 상관이 없는 것이다. 

 

 

이런 사이드이펙트를 적당한 타이밍에 실행되도록 하는 것. useEffect라는 api를 통해서 클래스형 컴포넌트가 아닌 함수형 컴포넌트에서도 이런 작업을 가능하게 할 수 있다. 하나의 컴포넌트에 복수의 useEffect를 설치해도 된다!

 


useEffect에는 cleanup이라는 게 있다. ==클래스 컴포넌트의 componentWillUnmount에서 하던 그 사이드 이펙트에 대한 뒷처리 작업 같은 것을 여기서 수행한다. 컴포넌트가 퇴장할 때 하는 작업.

 

 

 

본문과 예시 코드 출처: React class vs function style - 2. 수업의 목표 (youtube.com)