[React] LifeCycle (라이프사이클, 생명주기)

웹을 공부하다보면 빠질 수 없는게 또 바로 라이프사이클이다.

지금까지 나는 라이프 사이클 개념만 공부를 해서 정확하게 어디에 쓰이고 내가 사용하면서도 이게 라이프사이클이 어떻게 사용되는지조차 정확하게 알지 못하고 넘어갔었는데 이번 기회를 통해 정확히 짚고 넘어가려고 한다.

---

일단, 구글에 react lifecycle이라고 치면 항상 나오는 그림이 있다. mount부터 unmount까지 좌르륵 있는 사진이다. 

나는 그냥 이것만 공부하고 알고있었다. 근데 왜 라이프사이클에 대해서 알아야하는지 근본적인 부분에 대해 부족하다고 느껴서 이번엔 그 부분을 좀 더 자세히 알아보도록 해야겠다!

 

라이프사이클이란?

라이프 사이클은 간단히 워딩만 보더라도 '한 화면이 생성되고 사라지기까지의 과정'이라고 볼 수 있다.

 

왜 라이프사이클(생명주기)란 개념이 탄생했을까?

사용자와의 상호작용

나는 웹의 규모가 커지면서 웹페이지에서 사용자와 상호작용할때 좀 더 사용자친화적이게 만들게 위해서 라이프사이클이라는 개념을 사용하게 된 것 같다고 보았다. 즉, 웹페이지에 들어와서 값이 바꼈을때, 페이지 이동 등 상태값을 좀 더 상호작용에 경우의 수를 자세하게 체크를 해서 해당 기능을 수행할 수 있게끔 만들기 위해서 생명주기라는 개념이 탄생하지 않았나,,,라는 생각

이 외에도 효율성, 재사용, 리소스낭비 감소 등등의 이점이 있었다.

리액트 훅에서의 라이프 사이클

• 화면이 나타났을 때
• 화면이 사라졌을 때
• state, props가 변화했을 때

라이프사이클은 어디에서 사용이 될까?

라이프사이클을 개념적으로 많이 사용을 했지만, 내가 사용했던 기능들에 어떻게 사용됐는지 의식을 가지고 생각해본 적이 없었던 것같다.

그래서 이번에 좀 더 생각해보는 시간을 가지게 되었다.

요즘 나는 넷플릭스 서비스를 클론코딩하고 있는데 그 부분에서 라이프사이클이 어디에서 사용이 됐는지 알아보도록 하겠다.

• 데이터 불러오기
• 로딩 페이지
• Navbar에서 선택한 곳으로 화면 옮기기
• 좋아요, 마음에 안들어요, 찜하기 버튼
• 페이지에서 벗어났을때 기존 데이터 삭제
• 페이지 전환

라이프사이클이 거의 모든 곳에 적용되지만 일단 지금 생각나는 건 이런 부분들이었던 것 같다.

 

오늘은 라이프 사이클의 필요성?과 같이 내가 공부하면서 생각해보지 못했던 부분들에 대해서 새롭게 접근해볼 수 있었어서 너무 좋았다. 앞으로 공부를 할 때 이런 식으로 접근한다면 더 깊이있게 공부할 수 있지 않을까 생각하게 되었다.