[React]Lifecycle과 useEffect 1

오늘은 Lifecycle이랑 useEffect라는 함수에 대해 알아봅시다.

Lifecycle 이라는 개념이 있는데 실은 별거아닙니다.

이걸 배우는 이유는 componentDidMount() 이런 유용한 Lifecycle 함수들을 쓰기 위해서 배우는겁니다.

요즘 사람들은 저렇게 긴 함수 안쓰고 useEffect() 라는 깔끔한 함수를 사용하기 때문에 우리도 그걸 알아봅시다.

 

 

 

 

컴포넌트의 인생 

 

여러분이 만들어쓰고있는 컴포넌트는 Lifecycle이라는 개념이 있습니다. 컴포넌트도 인생이 있다는겁니다.

 

 

컴포넌트는

1. 생성이 될 수도 있고 (전문용어로 mount)
2. 재렌더링이 될 수도 있고 (전문용어로 update)
3. 삭제가 될 수도 있습니다. (전문용어로 unmount)

 

 

우리 인생 살기도 힘든데 컴포넌트의 인생 알아서 뭐합니까

뭔가를 배우면 어디다 쓸지 생각해보아야 합니다. 그래야 나중에 활용하겠죠?

컴포넌트의 인생을 배우는 이유는 컴포넌트 인생 중간중간에 간섭할 수 있기 때문입니다.

간섭이 뭐냐면 그냥 코드실행인데 

컴포넌트가 장착이 될 때 특정 코드를 실행할 수도 있고 

컴포넌트가 업데이트될 때 특정 코드를 실행할 수도 있다는 겁니다.

 

 

 

 

 

 

 

인생에 간섭하는 방법

 

"Detail 컴포넌트 등장 전에 이것좀 해줘"

"Detail 컴포넌트 사라지기 전에 이것좀 해줘"

"Detail 컴포넌트 업데이트 되고나서 이것좀 해줘"

이렇게 코드좀 실행해달라고 간섭할 수 있는데

간섭은 갈고리를 달아서 합니다. 

 

 

 

갈고리를 달아서 코드를 넣어주면 됩니다.

그럼 진짜 페이지 장착시, 업데이트시, 제거시 코드실행가능합니다. 

갈고리는 영어로 hook이라고 합니다. 

그래서 저걸 Lifecycle hook 이라고 부릅니다. 

 

 

상단에서 useEffect import해오고

콜백함수 추가해서 안에 코드 적으면 이제 그 코드는 컴포넌트가 mount & update시 실행됩니다.

그래서 이게 Lifecycle hook 입니다. 

 

 

 

재렌더링시에도 진짜 '안녕' 출력되나 테스트해보려고

버튼누르면 재렌더링되게 코드짜봤습니다.

버튼을 누르면 setCount에 의해 count가 재랜더링되면서 안녕이 출력된다.

 

 

 

 

Q. 왜 저는 '안녕' 2번 출력됨?

index.js에 <React.StrictMode>라는 태그가 있으면 2번 출력해줍니다.

디버깅용으로 편하라고 2번 출력해주는데 싫으면 저 태그를 제거하거나 그럽시다. 

 

 

 

 

 

 

근데 useEffect 밖에 적어도 똑같은데요

그렇죠?

실은 useEffect 바깥에 적어도 똑같이 컴포넌트 mount & update시 실행됩니다.

컴포넌트가 mount & update시 function 안에 있는 코드도 다시 읽고 지나가서 그렇습니다. 

그럼 대체 useEffect 왜 만들어놓은 것이죠 

 

그래서 문법 배우는게 중요한게 아니라 이걸 배웠으면 어떤 상황에서 언제 사용할지도 함께 배워야합니다.

 

useEffect 안에 적은 코드는 html 렌더링 이후에 동작합니다.

그럼 이제 useEffect가 뭔가 유용할 것 같지 않습니까 

예를 들어서 굉장히 시간이 오래걸리는 쓸데없는 코드가 필요하다고 가정해봅시다.

 

 

 

▲ 위처럼 useEffect 밖에서 코드를 작성하면 반복문 10억번 돌리고 나서 return에 있는 html을 보여주게됩니다.

 

 

 

▲ 하지만 useEffect 안에 적으면 html 보여주고 나서 반복문 돌리게 됩니다.

 

 

이런 식으로 코드의 실행 시점을 조절할 수 있기 때문에 조금이라도 html 렌더링이 빠른 사이트를 원하면

쓸데없는 것들은 useEffect 안에 넣어보길 바랍니다. 

 

 

그래서 이걸 알면 리액트만든 사람이 이 함수를 useEffect라고 작명한 이유도 알 수 있는데 

함수안에 이것저것 코드짤 때 함수의 핵심기능 외에 쓸데없는 기능들을 프로그래밍 용어로 side effect라고 부릅니다.

 

그래서 useEffect도 거기서 따온건데 컴포넌트의 핵심 기능은 html 렌더링이라 그거 외의 쓸데없는 기능들은 useEffect 안에 적으라는 소리입니다. 

오래걸리는 반복연산, 서버에서 데이터가져오는 작업, 타이머다는거 이런건 useEffect 안에 많이 적습니다.

 

 

 

 

<출처 : 코딩애플 : React 리액트 기초부터 쇼핑몰 프로젝트까지!>