[WIL] 4주차 → 라이프 사이클, Hook

1) 리액트의 라이프 사이클이란?

: 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리 입니다.

그래서 각각의 컴포넌트에는 라이프 사이클(생명 주기)라는 것이 있습니다.

컴포넌트의 수명은 페이지에서 렌더딩 되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때까지를 의미합니다.

 

라이프 사이클은 총 9개가 존재합니다.

크게 세가지 유형으로 나눌 수 있는 데 생성 될 때, 업데이트(수정 될 때), 제거 될 때입니다.

이를 리액트에서는 마운트, 업데이트, 언마운트라고 부릅니다.

 

-> 마운트는 DOM이 처음 생성 된 후 웹브라우저 상에 나타나는 것을 의미합니다.

-> 업데이터는 4가지 상황에서 발생 됩니다.

1) props가 바뀔 때

2) state가 바뀔 때

3) 부모 컴포넌트가 리렌더링 될 때

4) this.forceUpdate로 강제로 렌더링을 트리거 할 때

-> 언마운트는 DOM이 제거 되는 것을 말하고, 이는 웹브라우저 상에서 컴포넌트가 사라지는 것과 같습니다.

 

2) 클래스형, 함수형 라이프 사이클 비교

 

(1) Contructor

: 컴포넌트를 만들 때 처음으로 실행되는 생성자 메소드 입니다. 이 메소드로 초기 state를 정할 수 있습니다.

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

// Hooks
const Example = () => {
    const [count,setCount] = useState(0);
}

클래스형에서는 초기 state를 정할 때 constructor를 사용 해야 합니다.

<-> 함수형 컴포넌트에서 훅을 사용하면 useState hook을 사용해서 초기 상태를 쉽게 정할 수 있습니다.

 

(2) render

: 가장 기초적인 메소드이면서 가장 중요한 메소드입니다.

컴포넌트를 렌더링 할 때 필요한 메소드로써 유일한 필수 메소드입니다.

<-> 함수형 컴포넌트에서는 render를 안쓰고 컴포넌트를 렌더링 할 수 있습니다.

// Class
class Example extends React.Component {
  render() {
    return <div>컴포넌트</div>
  }
}

// Hooks
const example = () => {
  return <div>컴포넌트</div>
}

 

(3) componentDidMount -> 컴포넌트가 마운트 될 때

: 이 메소드는 컴포넌트를 생성하고 첫 렌더링을 마친 후 실행 됩니다. (즉, 컴포넌트가 처음 생성 될 때 한번만 실행됩니다.) <-> 함수형 Hooks에서는 useEffect를 활용하여 한꺼번에 설정 할 수 있습니다.

// Class
class Example extends React.Component {
  render() {
    return <div>컴포넌트</div>
  }
}

// Hooks
const example = () => {
  return <div>컴포넌트</div>
}

 

(4) componentDidUpdate -> 컴포넌트가 리렌더링 될 때 

: 이 메소드는 컴포넌트가 리렌더링 된 후 실행됩니다. 업데이트가 끝난 직후이기 때문에 DOM 관련 처리를 할 수 있습니다.

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

// Hooks
const Example = () => {
    useEffect(() => {
        ...
    }, [변경되면 리렌더링 될 조건]);
}

 

(5) componentDidUnmount -> 컴포넌트가 제거 될 때

: 이 메소드는 컴포넌트가 DOM에서 제거 될 때 실행 됩니다.

componentDidMount에서 등록한 이벤트가 있다면 여기서 제거 작업을 해야한다.

<-> 함수형 컴포넌트에서는 useEffect CleanUp 함수를 통해 해당 메서드를 구현 할 수 있다.

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

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

 

(출처)

https://kyun2da.dev/react/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4%EC%9D%98-%EC%9D%B4%ED%95%B4/

리액트 라이프사이클의 이해

---

1) React Hooks이란?

: 함수형 컴포넌트에서 사용되는 기술을 Hook이라고 합니다.

함수형 컴포넌트에서는 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공합니다.

 

그렇다면 왜 굳이 클래스형 컴포넌트를 함수형 컴포넌트로 바꿔야 할까요??

react를 배우는 데 있어 클래스는 큰 진입장벽 이었습니다. 코드의 재사용성과 코드 구성을 어렵게 만들고,

this의 사용이나 이벤트 핸들러의 등록 등 기본적은 JS 문법 사항을 알고 있어야 다룰 수 있었기 때문이죠.

또한 클래스는 잘 축소되지 않고, reloading이 깨지기 쉽고 신뢰하기 어렵게 만듭니다.

따라서 react의 최신 기술들이 클래스형 컴포넌트에 효과적으로 적용되지 않는다는 단점들이 있었습니다.

 

-> 이러한 클래스의 단점들을 함수형 컴포넌트로 커버 할 수 있게 되었습니다.

하지만 클래스 컴포넌트의 장점인 state 사용이나 life cycle을 직접 다루는 등의 기능을 사용하지 못한다는 문제가 있었고 이를 해결하기 위해 Hook이 등장 했습니다.

 

2) Hook이란?

 

: Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능입니다.

useState나 useEffect를 사용하여 특징적으로 state와 lifecycle과 같은 기능을 사용 할 수 있게 도와줍니다

 

-> State Hook은 useState를 사용합니다.

-> Effect Hook은 useEffect를 사용합니다.

 

(출처)

https://devbirdfeet.tistory.com/52

React(23) 리액트 훅이란?