UseEffect, ref

UseEffect, ref

ref 태그들을 변수에 담아서 쓸 수 있다.

(담기위해 ref를 사용한다)

 

// componentDidMount와 동일 (그리고(render) 난 뒤 실행)

useEffect(() => {

}, []);  [] - 의존성 배열(dependency array)

괄호 안에 바뀔때 마다 useEffect 실행된다.

 

---

👉 의존성 배열이 없으면?

useEffect(() => {

});

뭐 하나라도 바뀌면 다시실행된다.

class component에서 componentDidUpdate와 비슷하다.

 

💡  componentDidUpdate와의 차이점

componentDidUpdate()는 변경이 일어났을때만 실행되고,

useEffect(() => { }); 는 처음에는 무조건 실행되고, 뭐라도 하나 바뀌면 실행.

 

💡 의존성 배열의 유 무 차이점?

useEffect(() => {

}, []); 처음 한번 실행후, 의존성 배열이 비어있기 때문에 실행하지 않음

useEffect(() => { }); 는 처음에는 무조건 실행되고, 의존성 배열이 없기에 뭐라도 하나 바뀌면 실행.

---

// componentWillUnmount와 동일

useEffect(() => {

   return () => {

   }
}, []);

컴포넌트가 사라질때 return 부분이 실행이된다.