[항해99] Day15. TIL – 주특기 입문시작 / 라이프 사이클이란?

👩🏻‍💻 Today I Learned 📚

 

 

⭐라이프 사이클이란?

라이프 사이클을 이야기 하기 전에 ‘리액트’의 특징적인 부분을 먼저 이야기 해야합니다. 리액트는 컴포넌트를 기반으로 하는 View 중심의 자바스크립트의 라이브러리입니다. html단위 하나하나를 객체로 생각하는 DOM은 여러가지 하위 값을 가지고 있습니다. 이걸 트리 구조라고 합니다. 이 때 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고 수정할 걸 찾고 수정한다면 불필요한 연산들이 엄청 많이 일어납니다.

리액트는 이 부분의 보안할 수 있는데요. 이게 가상DOM이라는 것입니다. 기존 DOM과 어떤 행동 후 새로 업뎃된 부분이 가상DOM에 표현되고 두 가지를 비교해서 수정된 부분은 바꿔줍니다. 그러면 불필요한 연산들이 일어날 필요가 없겠죠?
리액트에서는 컴포넌트라 불리는 걸 사용해서 표현합니다! 컴포넌트들끼리 props 라 불리는 데이터 값을 주고 받으며 컴포넌트에 주기라는 것이 존재합니다

이 주기라는 것을 라이프 사이클이라고 말하는데, 컴포넌트에 생성(mount)되고 수정(update)되고 삭제(unmount)까지를 이야기합니다.

 

• 컴포넌트는 생성되고 → 수정(업데이트)되고 → 사라집니다.
• 생성은 처음으로 컴포넌트를 불러오는 단계입니다.
• 수정(업데이트)는 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트 됩니다. 아래의 경우죠!
  • props가 바뀔 때
  • state가 바뀔 때
  • 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때)
  • 또는, 강제로 업데이트 했을 경우! (forceUpdate()를 통해 강제로 컴포넌트를 업데이트할 수 있습니다.)
• 제거는 페이지를 이동하거나, 사용자의 행동(삭제 버튼 클릭 등)으로 인해 컴포넌트가 화면에서 사라지는 단계입니다.

 

 

⭐ 주특기 (React) 입문 시작

리액트 입문 강의가 시작되었다. 개인 과제부터 팀 과제까지 부여 받았고 새로운 한 주가 시작되었다.

기다리고 기다렸던 리액트 강의. 혼자서 독학으로 리액트를 공부했었기에 더욱 기대되었다. 영어 강의를 주로 봐와서 사용법은 알아도 정확한 개념을 잡는 부분이 스스로 많이 부족하다고 생각했고, 그래서 더 자신감이 없었던 것도 있었다.

리액트 입문 강의는 나같이 리액트를 어느 정도 사용해봤지만 개념이 부족한 사람들이 보기에는 빠른 이해를 도울 수 있는 강의였는데, 처음 리액트를 접하는 사람들은 막 몰아치는 내용들에 정신이 없을 것 같았다.

함수형 컴포넌트에 익숙한 내가 클래스형도 배우게 된 점도 좋았다. 클래스형은 구조만 어느정도 알 뿐 제대로 사용해 본적이 없어서 무지한데 강의에서 두 가지 모두를 어느 정도 보여준다.