자바스크립트 리액트 라이프사이클의 이해

📃리액트 라이프사이클이란? 

리액트는 *컴포넌트 기반의 view를 중심으로 한 라이브러리이다. 

컴포넌트의 라이프 사이클(= 컴포넌트의 생명주기)는 정말 중요한 개념인데, 

컴포넌트가 *렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지가 라이프 사이클입니다. 

 

* 컴포넌트: 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈

* 렌더링 : React입장에서 rendering은 data를 html로 변환해서 renderer에게 전달하는 일괄 작업

 

✔️ 컴포넌트는 생성 > 수정(업데이트 > 제거 

✔️ 생성은 처음으로 컴포넌트를 불러오는 단계 (= 모듈을 불러오는 단계)

✔️ 수정(업데이트)는 사용자의 행동( 클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트가 됨!

     - props 가 바뀔 때, 

     - state가 바뀔 때

     - 부모 컴포넌트가 업데이트 되었을 때 
     - this.forceUpdate 로 강제로 업데이트 했을 경우 ~! 

✔️ 제거는 페이지를 이동하거나, 사용자의 행동 (삭제버튼 클릭 등)으로 인해 컴포넌트가 화면에서 사라지는 단계  

     ㄴ 여기서 내가 이해한 버전은, "리뷰삭제 " 버큰 클릭시 리뷰가 삭제되는 ! 이런 부분으로 이해했지요 

 

 

📃라이프사이클 메서드(함수) 살짝 엿보기  

📌 라이프 사이클 함수에는 클랙스형 컴포넌트 / 함수형 컴포넌트를 사용 할 수 있는데 

     리액트에서 공식 매뉴얼로 함수형 컴포넌트를 권장하고 있음!!!!   

 

📌   constructor()

    : 생성자 함수, 컴포넌트가 생성되면 가장 처음으로 호출되는 함수 ! 

 

📌 render ()

   : 컴포넌트를 렌더링랑 할 때 필요한 함수 

    리액트 요소를 return에 넣어 반환해주는데,

    render() 안에 들어갈 내용은 컴포넌트의 모양에만 관여하는 것이 가장 좋습니다.  

    즉, state나, props를 건드려 데이터를 수정하려고 하면 안됩니다! 

 

📌 componentDidMount()

     : 컴포넌트가 화면에 나타나는 것을 마운트(Mount)한다고 표현하는데 

       didMount는 마운트가 완료되었다는 뜻으로 첫번째 렌더링을 마친 후 딱 한번 실행이 됨 

       컴포넌트가 리렌더링( 업데이트) 될 때는 실행되지 않는 함수 

        ajax 요청, 이벤트 등록, 함수 호출 등 작업을 처리 AJAX

 

📌 componentDidUpdate(prevProps, prevState, snapshot)

    : DidMount()가 첫 렌더링 후에 호출 되는 함수라면, DidUpdate()는 리렌더링을 완료한 후 실행되는 함수

 

📌 componentWillUnmount()

    : DOM에서 제거 할 때 실행되는 함수 , componentDidMount에서 등록한 이벤트가 있다면 여기서 제거 작업