리액트 라이프사이클(클래스형 vs 함수형), React hooks

😎 라이프사이클(클래스형 vs 함수형),  React hooks

✅ 라이프사이클(클래스형 vs 함수형) 

 

React LifeCycle

 

라이프사이클(LifeCycle)
리액트의 컴포넌트들은 라이프사이클(생명주기)을 가지고 있다.
라이프사이클은 컴포넌트의 생성부터 업데이트, 그리고 소멸(제거)되는 과정을 의미한다.

 

클래스형 컴포넌트 : 라이프사이클 메서드를 통해서 해당 시점에 따라 컴포넌트를 조작한다.
함수형 컴포넌트 : 라이프사이클 메서드가 따로 존재하지 않기 때문에
                              리액트 훅을 사용하여 라이프사이클 메서드와 비슷하게 동작하도록 구현한다.

 

라이프사이클은 크게 세 단계로 나눠진다.

생성(Mount), 업데이트(Update), 제거(Unmount)

• Mount: 컴포넌트를 생성하는 단계
• Update: 아래 5가지 경우로 인해 업데이트 된다(리액트 리렌더링 발생 조건)

state의 변경
setState 메서드를 사용해서 데이터를 변경하면
리액트는 변경을 감지하고 리렌더링 한다. (얕은 복사를 통한 비교)

새로운 props의 전달
전달받은 props 값이 업데이트 되면 리렌더링을 함

부모 컴포넌트의 렌더링
부모 컴포넌트가 리렌더링 되면 자식 컴포넌트도 함께 리렌더링 됨

forceUpdate()의 실행
리렌더링을 하고 싶을 경우 사용할수 있는 메서드 (강제 리렌더링)

shouldComponentUpdate에서 true가 반환될 때
각각의 컴포넌트는 shouldComponentUpdate 라는 메소드를 가지고 있고
state의 변경 또는 새로운 props를 전달 받는 경우 실행된다.
이때 기본적으로 return 값은 true 가 되어 렌더링이 시작되고,
리렌더링이 필요하지 않을 경우 return value = false로 지정해서 리렌더링을 막을 수 있다

 

• Unmount: 페이지를 이동하거나, 사용자의 행동으로 인해 컴포넌트가 화면에서 사라지는 단계

 

리액트의 컴포넌트들은 위 순서에 따라 생성, 업데이트, 제거의 생명주기를 갖는다.

이제 클래스형과 함수형의 라이프사이클 메서드 차이를 알아보자.

 

컴포넌트 정의

1.constructor

컴포넌트 생성 메소드로 컴포넌트가 생성되면 제일 먼저 실행된다.

초기 state를 정할 수 있다.

 

클래스형 컴포넌트

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

 

함수형 컴포넌트(useState hook 사용)

const Example = () => {
    const [number, setNumber] = useState(0);
}

 

2.render

컴포넌트 렌더링 메소드.

 

 

클래스형 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

함수형 컴포넌트(render를 사용하지 않고 컴포넌트 렌더링 가능)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

3. componentDidMount

처음 렌더링이 끝나면 호출되는 메서드로, 현재 컴포넌트가 화면에 그려진 상태다.
여기에서 각종 함수 호출, ajax 요청, 이벤트 등록 등 작업을 처리한다.

 

클래스형 컴포넌트

class Example extends React.Component {
    componentDidMount() {
        ...
    }
}

 

함수형 컴포넌트

useEffect hook을 사용해서

componentDidMount, componentDidUpdate, componentDidUnmount까지 처리 가능.

const Example = () => {
    useEffect(() => {
        ...
    }, [] );  //의존성 배열
}

 

4. componentDidUpdate

리렌더링을 완료한 후 실행하는 메소드.

업데이트가 끝난 직후라서 DOM관련 처리를 할 수 있다.

매개변수로 prevProps와 prevState가 있고, 각각 업데이트 되기 전 props, state다.

 

 

클래스형 컴포넌트

class Example extends React.Component {
    componentDidUpdate(prevProps, prevState) {
        ...
    }
}

 

함수형 컴포넌트(useEffect 의존성 배열에 값 추가)

const Example = () => {
    useEffect(() => {
        ...
    }, [data] );  //의존성 배열에 등록된 값이 변경될 때 마다 리렌더링
}

 

5. componentDidUnmount

컴포넌트를 DOM에서 제거할 때 실행하는 메소드.( ex) removeEventListener )

만약 setTimeout 을 실행했다면 clearTimeout 을 실행해서 제거한다.

 

클래스형 컴포넌트

class Example extends React.Component {
    coomponentWillUnmount() {
        ...
    }
}

 

함수형 컴포넌트

useEffect()의 return 부분에 Unmount 과정에서 정리할 메서드(cleanUp 메서드)를 작성한다.

const Example = () => {
    useEffect(() => {
        return () => {
            ...
        }
    }, []);
}

 

현재는 함수형 방식이 더 많이 사용되고 있고, 리액트 공식문서에서도 함수형 방식을 권장하고 있다.

라이프사이클 메소드를 사용할 수 없다는 게 함수형 방식의 단점이었는데

리액트 16.8버전부터 hooks를 통해 이를 보완했고, 클래스형 방식보다 코드 간결성이 더 좋기 때문이다.

하지만 리액트 작동 방식의 이해와 기존 클래스형 방식으로 작성된 코드들을

유지보수 해야 하는 상황이 있을 수 있기 때문에 알아두면 도움되는 내용이다.

 

 

✅ React Hooks

React Hook
React 버전 16.8부터 React 요소로 새로 추가되었습니다.
기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.
-리액트-

 

리액트 훅을 사용하면 위에서 설명했던 함수형 프로그래밍이 가능해지는 것이다.

함수형 방식에서만 사용 가능하다.

 

React Hook 규칙

최상위(at the Top Level)에서만 Hook을 호출할 것.
반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안되고

항상 React 함수의 최상위(at the top level)에서 return이 실행되기 전에 Hook을 호출해야 한다.

이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서의 Hook 호출이 보장된다.

이러한 점은 React가 useState와 useEffect가 여러 번 호출되는 중에도

Hook의 상태를 올바르게 유지할 수 있도록 해준다.

 

 

React 함수 내에서만 Hook을 호출할 것.
Hook을 일반적인 JavaScript 함수에서 호출하면 안 되고 아래와 같이 호출해야 한다.
  - React 함수 컴포넌트에서 호출
  - Custom Hook에서 호출.

이 규칙을 지키면 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확하게 확인할 수 있다.

자주 사용되는 React Hook

1. useState : 상태 관리

2. useEffect : 라이프사이클 메소드처럼 사용

3. useRef : 특정 DOM에 접근

이 외에 useMemo, useCallback 등이 있다.

 

 

 

❗ 결론

리액트 작동 방식의 흐름을 알기 위해 라이프사이클을 공부하고,

리액트는 현재 공식적으로 함수형 방식을 권장하고 있으니

함수형 방식으로 프로그래밍을 하고,

이것을 가능하게 해주는 리액트 훅 을 잘 사용하자!

 

 

 

훅

 

 

 

 

참고

https://ko.reactjs.org/docs/state-and-lifecycle.html

https://ko.reactjs.org/docs/hooks-reference.html