[React.js] 라이프사이클(생애주기)

라이프 사이클 : 생애주기(탄생~죽음까지의 기간)

리액트 컴포넌트도 라이프 사이클이 존재
 

Mount : 컴포넌트가 만들어지고 처음 렌더링 되는 순간
Update : 컴포넌트가 리렌더링 되는 순간
UnMount : 컴포넌트가 렌더링에서 제외되는 순간(화면에서 사라짐)
 
https://mm-study-front.tistory.com/45

[React.js] useEffect

useEffect 이용해서 라이프사이클 제어 가능
 

---

 
1. 마운트
 

  useEffect(() => {  }, []);

 
[]을 빈 상태로 주면 마운트 될 때 말고는 다시 실행되지 않는다.
 
2. 업데이트
 

  useEffect(() => {});

 
[]을 없애주면 상태가 변할 때마다 제어 가능
근데 이 안에 콘솔로그 추가해서 보면 mount가 될 때도 실행된다.
 
이를 원하지 않으면
if문과 
https://mm-study-front.tistory.com/42

[React.js]useRef

 
사용해서 통제 가능
 

  const isMount = useRef(false);

 

  if (!isMount.current) {

      isMount.current = true;

      return;

    }

 
하면 mount 할 때는 뜨지 않고, 상태가 변화할 때만 작동한다
 
 
3. 언마운트
 

  useEffect(() => {

    return () => {

    };

  }, []);

 

 
return문 안에 새로운 콜백함수 추가하기
이 함수를 정리함수라고 부른다.
 
 
3가지를 이용해서 마운트 할 때는 새로운 데이터를 보여주고
업데이트될 때만 다른 스타일을 구상하는 등등 구현할 수 있다