라이프사이클?
생명주기 메서드, 즉 리액트의 데이터가 실행되고 움직이는 순서같은 거라고 생각하면 된다.
클래스방식
위 그림을 보면, 클래스 방식으로 리액트 컴포넌트를 만들 때 그 컴포넌트의 여러 메소드 들이 어떤 순서로 호출되는가를 보여준다.
시작점에서 시작하여 componentWillMount() 라는 메소드는 리액트가 그 컴포넌트에 구현되어있는 메소드를 호출하는 것으로 약속되어있다. 어떤 컴포넌트가 생성되기 전에 처리해야 할 일이 있다면, componentWillMount()라는 메소드를 구현하는것을 통해서 (컴포넌트가 우리가 필요로 하는 코드를 갖다놓는 과정을 통해서) 컴포넌트가 생성되기 직전에, 즉 랜더가 호출되기 전에 해야될 일을 갖다놓을 수 있다.
이후, Render()메소드가 호출되면 마운트가 된다. 즉 화면에 그려진다.
그 다음에 해야될 일이 있다면, componentDidMount() 라고 하는 메소드를 컴포넌트가 생성된 후에 해야 될 일을 처리할 수 있게 할 수 있다.
코드로 확인하기
componentWillMount(렌더 되기 전에 실행 될 것) -> render (화면에 그려줌)-> componentDidMount(렌더 다음에 처리애야 할 일)
컴포넌트가 한번 만들어지고 난 다음에는 역시 render() 메소드가 호출 될 것인데, 렌더가 호출될 필요가 있냐 없냐를 결정하는 shouldComponentUpdate가 있고,
componentWillUpdate 라는 애도 있고, componentDidUpdate 들이 있다.
컴포넌트 상태가 바뀔때
함수형
useEffect 라는 React Hook을 사용하여 렌더가 완전히 끝난 다음, useEffect 의 인자로 전달 된 함수가 랜더가 끝난 다음에 호출되도록 약속되어있다.
useEffect 라고 하는 hook 은 웹페이지가 처음으로 랜더 끝낚ㅆ을 때 실행되고, 컴포넌트가 업데이트 될 때마다 실행되는것으로 보아 이게 클래스형에서 componentDidMount, componentDidUpdate 와 똑같은 효과를 내는것이 useEffect라는 것을 알 수 있다.
useEffect 라는 말은 side Effect 가 생갹된 말이다.
참조: 생활코딩
React Hook?
기본적으로 리액트가 제공하는 내장된 Hook. 사용자 hook도 있음. 이름이 보통 use 로 시작하는것은 내장된 Hook.
