네이버 블로그에서 이전, 원글 작성일시 : 2021.07.22.00:12
React 컴포넌트들의 LifeCycle 에 대해 알아보자.
이 글은 제로초님의 "React 기본 강좌 5. 가위바위보"를 참고하며 작성했습니다.
React를 배우고자 한번이라도 검색해서 글을 읽어봤다면 LifeCycle에 대해 알고 있을 것이다.
생명주기, 단어만 봐서는 감이 오지 않는다. 그림이 필요한 순간이다.
출처 : React Lifecycle Methods diagram
컴포넌트들은 마치 우리들처럼 태어나고 바뀌고 죽는 생명주기를 가진다.
태어나고 죽는것을 각각 Mount, Unmount 라고 부른다. update는 update.
위 그림을 설명해보자면, (class component 기준)
Mount
컴포넌트는 constructor에 의해 생성되고, render 후 DOM에 붙어서 화면에 보여진다.
이후에 componentDidMount 실행
Update
컴포넌트의 state/props가 변경되면 (지난번에 배웠던 shouldComponentUpdate가 실행되고 참이면)
render 후 DOM에 붙어 화면 표출
이후에 componentDidUpdate 실행
UnMount
컴포넌트가 사라지는 경우도 있는데, (부모 컴포넌트가 자식 컴포넌트를 없앤다던지 등)
이때 사라지기 직전에 componentWillUnmount 실행
각 함수의 이름을 보면 직관적으로 어느시점에 실행되는지 느낌이 오긴 한다.
생명주기라는 거창한 이름이 말해주듯, 꽤 중요한 개념으로 보인다.
강의에 의하면, componentDidMount에서는 주로 비동기 요청을,
componentWillUnmount에서는 주로 비동기 요청 정리를 한다고 한다.
컴포넌트가 렌더링된 직후, state가 변할때마다 뭔가를 실행하고 싶을 일은 꽤 자주 있을 것이다.
그렇다면 사용 방법을 알아보자. 먼저 class component 부터!
Class Component
사용방법은 어렵지 않다. 왜?, React.Component에서 제공하는 메소드가 있기 때문에.
class lifecycle extends React.Component{
state = {
...
}
componentDidMount() {
// 컴포넌트가 첫 렌더링된 후 -> 보통 여기서 비동기 요청
}
componentDidUpdate() {
// 컴포넌트 리 렌더링 되었을 때 ( state/props가 변결될 때)
}
componentWillUnmount() {
// 컴포넌트가 제거되기 직전 -> 보통 여기서 비동기 요청 정리
}
render() {
return ( ... );
}
}끝이다. 잘 되는지는 console.log() 몇개 찍어보면 될 것이다.
함수형 Component
문제는 여기다. 위의 class component 처럼 깔끔하게 생명주기를 이용할 수 있는 함수가 없다.
사실 있긴 하다. useEffect, 이 녀석에 대해 알아보자.
React 공식 문서에서는 이렇게 언급한다.
If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.
출처 : https://reactjs.org/docs/hooks-effect.html
class에서의 componentDidMount, componentDidUpdate, componentWillUnmount
이 3가지가 합쳐진 것이 useEffect라고 생각해도 된단다.
코드를 보는게 빨라보인다.
const lifecycle = () => {
const [value, setValue] = React.useState('');
...
React.useEffect(() => {
// componentDidMount, componentDidUpdate 역할(1:1 대응은 아님)
return () => {
// componentWillUnmount 역할
}
}, [value]);
...
return ( ... );
}useEffect(함수, [ ]) 형식으로 사용한다. 보자마자 이해가 안되기 시작한다.
useEffect로 class의 세가지 메소드에 대응해보자.
componentDidMount
React.useEffect(() => { console.log('Mount') }, []);이렇게 [ ] 안에 아무것도 넣지 않고, return도 쓰지 않으면,
componentDIdMount와 같은 시점에 실행된다. 렌더링된 직후 한번.
componentDidUpdate
React.useEffect(() => { console.log('Update') }, [value]);이렇게 하면 value라는 state가 변경될 때만 useEffect의 인자로 전달된 함수가 실행된다.
즉, componentDidUpdate와 같은 시점에 실행
참고로 다른 state들도 개별적으로 지정하고 싶다면 useEffect를 여러번 호출해도 된다.
또한 여러 state가 변경될 때는 [value, somethig] 이런식으로 인자를 전달하면 된다.
componentWillUnmount
React.useEffect(() => { return () => { console.log('Unmount') } }, []);결과를 확인해보진 않았다. 컴포넌트를 unmount하는 방법을 아직 몰라서...
return 함수;를 가지는 함수를 useEffect에 전달하면 return 뒤의 함수가
componentWillUnmount 시점에 실행될 것이다.
이렇게 각각 어떻게든 대응이 된다고 생각하면, 어떻게든 조합해서 사용할 수는 있어 보인다.
하지만 아직도 확실히 이해를 못해서 실제로 사용하게 되는건 먼 훗날의 일이지 않을까..
(class component가 좀 더 눈/손에 익기도 하고,,)
오늘 내용은 어려웠다. class는 안어려웠는데 useEffect는 자주 못보던 것들이라 이해가 제대로 안됐다.
LifeCycle에 대해서는 이해가 나름 확실히 되었는데, 실제로 사용해보질 않아서 와닿지 않는 느낌..?
