React Hooks 에서 lifecycle 사용하기

리액트 훅스에서 side effect 로 라이프사이클을 조정할 수 있다.

 

리액트 훅스에서 기존 생명주기 메소드 (componentDidMount, componentDidUpdate, componentWillUnmount 등의 이펙트를

함수형 컴포넌트에서 사용하는 것에 대해 다시 한 번 정리한다.

 

componentDidMount => 컴포넌트가 마운트 될 때 한 번 실행된다.

 

useEffect(() => { 
// Your code here 
}, []);

 

두 번째 매개 변수로 빈 배열을 주면 어떤 값을 감지할 때 렌더되는 것을 막기 때문에 처음 한 번만 실행된다.

두 번째 매개 변수없이 useEffect 사용 시 모든 렌더에서 호출되므로 주의.

 

useEffect(() => {
 // Your code here 
});

 

componentWillUnmount 는 정리에 사용된다. (이벤트 리스너 제거, 타이머 취소 등)

componentDidMount 에 이벤트 리스터를 추가하고 아래와 같이 componentWillUnmount 에서

이벤트 리미터를 제거하는 것.

componentDidMount() { 
	window.addEventListener('mousemove', () => {}) 
} 

componentWillUnmount() { 
	window.removeEventListener('mousemove', () => {}) 
}

 

위 코드와 동등한 훅스에 이펙트는 아래처럼 구현한다.

useEffect(() => { 
	window.addEventListener('mousemove', () => {}); 
    // returned function will be called on component unmount 

	return () => { 
		window.removeEventListener('mousemove', () => {}) } 
}, [])

다음과 같이 return 에 함수를 주면 컴포넌트가 unmount 될 때 함수를 실행한다.

위에 언급한 것처럼 일반적으로 eventListner의 역할을 다하면 다시 remove할때 이 useEffect의 return값을 이용한다 .

 

 

Reactjs.org에 따르면 componentWillMount는 향후 지원되지 않을 것이다?! 

https://reactjs.org/docs/react-component.html#unsafe_componentwillmount

React.Component – React

 

 

ComponentWillMount를 요청하는 이유는 렌더링 전에 상태를 초기화하려고하기 때문일 수 있다.

 

이 부분은 UseState에서 initState 를 설정해서 초기화 할 수 있다.

const helloWorld=()=>{ 
	const [value,setValue]=useState(0) //initialize your state here 


return <p>{value}</p> } 

export default helloWorld;

---

2019 년 8 월 21 일에 업데이트 됨

useEffect 를 didmount 처럼 사용할 때 ( useEffect(()=>{},[]) )

 

React는 배열 []에 전달한 값을 비교할 때 Object.is ()를 사용하여 비교한다. 객체를 전달하면

useEffect(()=>{},[{name:'Tom'}])

이것은 다음과 같이 동작한다 :

useEffect(()=>{})

Object.is ()가 객체를 비교할 때 값 자체가 아닌 참조를 비교하기 때문에 매번 다시 렌더링된다.

참조하는 객체가 다르기 때문에 {} === {}가 false를 반환하는 이유와 동일.

여전히 참조 객체가 아닌 객체 자체를 비교하려면 다음과 같이 비교한다.

useEffect(()=>{},[JSON.stringify({name:'Tom'})])