React 라이프사이클(Life Cycle)

React의 각각의 컴포넌트는 컴포넌트의 생명주기, 라이프 사이클이 존재한다.
컴포넌트의 생명은 일반적으로 페이제이서 렌더링 되기 전 준비과정에서 시작해 페이지에서 사라질 때 끝이 난다.
이를 나타내는 LifeCycle Method는 클래스형 컴포넌트에서만 사용 하는 메서드인데 useEffect와 은근히 비슷하다고 생각하면 된다.

출처 : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

라이프 사이클의 유형

라이프 사이클은 크게 3가지 유형으로 나눌 수 있는데

• 생성 될 때(Mount)
• 업데이트 할 때(Update)
• 제거 할 때(Unmount)
  로 나눌수 있다.

생성 될 때(Mount)는 DOM(Document Object Model)이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻한다.

업데이트 할 때(Update)는 다음과 같은 4가지 상황에서 발생한다.

• Props가 바뀔 때
• state가 바뀔 때
• 부모 컴포넌트가 리렌더링 될 때
• this.forceUpdate로 강제 렌더링 할 때

마지막으로 제거 할 때(Unmount)는 DOM에서 제거되는 것을 뜻한다.

그럼 위 사진의 내용들을 파악해 보자

리액트 사이클 메서드

constructor

컴포넌트가 처음 만들어질 때 실행되는 생성자(constructor)이다. 이 메서드에서 초기 state를 정할 수 있다.
클래스형에선 초기 state를 정할 때 constructor를 사용해야 한다.
훅에서는 useState hook를 사용하면 상태를 쉽게 생성 할 수 있다.

//Class형
class LifeCycle extends Component {
  constructor(props) {
    super(props);
  }
  //Hooks 함수형
  const LifeCycle = ()=>{
  const [test,setTest] = useState(0);
  }

render

컴포넌트를 렌더링할 때 필요한 메서드로 유일한 필수 메서드이다.
(렌더링이란 html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말한다.)
함수형 컴포넌트에선 render를 쓰지 않고 컴포넌트를 렌더링할 수 있다.
컴포넌트의 props,state를 변경하지 않아야 하며, 호출될 때마다 같은 결과를 반환해야 한다는 특징이 있다.

// Class형
class LifeCycle extends Component {
  render() {
    return <h1>렌더링</h1>
  }
}

// Hooks 함수형
const LifeCycle = () => {
  return <h1>렌더링</h1>
}

componentDidMount

컴포넌트의 첫 번째 렌더링이 마치고 나면 호출되는 메서드이다. 이 메서드가 호출되는 시점에 우리가 만든 컴포넌트가 화면에 나타난 상태이다. DOM의 속성을 읽거나 직접 변경하는 작업을 진행한다.
이 메서드는 컴포넌트를 만들고 첫 렌더링을 마친 후 실행하며 함수형 컴포넌트에서는 useEffect를 통해 활용 할 수 있다.

//Class형
class LifeCycle extends Component {
    componentDidMount() {
       내용~
    }
}

// Hooks 함수형
const LifeCycle = () => {
    useEffect(() => {
       내용~
    }, []);
}

componentDidUpdate

재렌더링을 완료하고, 화면에 원하는 변화가 반영되고 난 뒤에 호출되는 메서드이다. 컴포넌트가 업데이트 되었을 떄, DOM을 조작할 떄
활용할 수 있다.

// Class 형
class LifeCycle extends Component {
    componentDidUpdate(prevProps, prevState) {
        내용~
    }
}

// Hooks 함수형
const LifeCycle = () => {
    useEffect(() => {
        내용~
    });
}

componentWillUnmount

이컴포넌트를 DOM에서 제거할 때 실행한다. 컴포넌트가 화면에서 사라지는 것을 의미하며 CoponentDIdMount에서 등록한 이벤트가 있다면 여기서 제거 해야한다.

// Class 형
class LifeCycle extends Component {
    coomponentWillUnmount() {
       내용~
    }
}

// Hooks 함수형
const LifeCycle = () => {
    useEffect(() => {
        return () => {
            내용~
        }
    }, []);
}

참고
리엑트 공식 문서
리액트 LifeCycle