React - 생명주기(life cycle)

생명주기(life cycle)

1. class컴포넌트

1. constructor() : 컴포넌트의 생성자 메소드로, 가장 먼저 실행된다.
2. getDerivedStateFromProps : prop으로 받아온 것을 state에 설정하고 싶을 때 사용한다.
3. render() : 컴포넌트를 렌더링한다.
4. ref
5. componentDidMount() (렌더함수가 실행되고 리액트가 jsx를 돔에 붙이는 순간!)
6. setState/props 바뀜
7. getDerivedStateFromProps : 컴포넌트의 props나 state가 바뀌었을 때도 해당 메소드를 호출한다.
8. shouldComponentUpdate값이 true (값이 false면, componentWillunmount로 이동.)
9. render()
10. componentDidUpdate() : 리렌더링을 마치고 화면에 변화가 모두 반영된 후 호출하는 메서드. 
    세 번째 파라미터로 getSnapshotBeforeupdate 에서 반환한 값을 조회할 수 있다.
11. (부모가 나를 없앴을 때) componentWillunmount() : 컴포넌트가 화면에서 사라지기 직전에 호출.
12. 소멸

 

2. 함수 컴포넌트(hooks)

class컴포넌트처럼 생명주기를 지원하는 메서드는 없지만, hook을 사용해서 대처할 수 있다.

useEffect(() => {
       // 여기에 componentDidmount, componentDidUpdate 로직

        return() => {
            // 여기에 componentWillUnmount 로직
        }
    }, [dependency list]);

- [dependency list]이 빈 배열이면, componentDidmount() 와 같다.

- [dependency list]에 값이 있으면 componentDidmount(), componentDidupdate() 둘 다 수행.

- [dependency list]에 조건문이나 useRef를  넣을 수도 있음.

- [dependency list]에 들어가는 값이 배열일 경우, "timeouts.current[i] = x; " 이렇게 배열의 요소 값 변경하는건 감지 못함.  

    "timeouts.current = x;" 이렇게 직접 변경하는경우만 감지.

 

 

 

 

참조

https://adjh54.tistory.com/43

https://shape-coding.tistory.com/entry/React-React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98-%EC%83%9D%EB%AA%85-%EC%A3%BC%EA%B8%B0-Life-Cycle

https://www.zerocho.com/category/React/post/579b5ec26958781500ed9955#google_vignette