TIL - 리액트의 특징, 장점 및 Lifecycle

리액트의 특징 및 LifeCycle을 알아보자

1. 리액트란 무엇인가 ?

• SPA(Single Page Application)
• 가상 DOM을 활용하여 부분적인 렌더링을 하는 자바스크립트 라이브러리

2. 리액트의 특징

(1) 화면 view단을 구현하기 위한 최소단위로 재사용가능한 component를 사용
(2) component를 조립하여 완성된 view를 만듬
(3) JSX(Javascript XML) 사용
(4) 단방향 데이터 바인딩 ( 부모->자식으로서의 데이터흐름)

3. 리액트의 장점

(1) component를 사용해서 유지보수가 용이
(2) 생태계가 넓고, 다양한 라이브러리 사용 가능
(3) virtual DOM을 활용하여 빠른 렌더링이 가능
(4) 단방향 데이터 바인딩을 통한 디버깅 용이, 다른 라이브러리에 비해 안정성이 높음
(5) 리액트 네이티브를 활용하여 앱 개발 가능

4. 리액트의 LifeCycle

컴포넌트 life cycle에 따라 각각의 Method가 호출된다.
해당 라이프사이클은 컴포넌트가 생성, 업데이트, 제거 될 때 일어난다.

1. Mounting:컴포넌트가 mount 되었을 때(DOM 또는 페이지에 올라갈 때) , 아래의 순서대로 method가 호출

   (1) constructor

• 컴포넌트가 mount 되기전에 실행되어야 할 부분을 실행되게끔 하는 역할

• 초기 state값 등을 constructor 에 설정

  (2) render

• DOM을 조작하고 화면에 그려지게 함

  (3) componentDidMount

• DOM에 render 함수 아래에 return된 요소가 추가되면, 실행되는 method

• props나 setstate를 통해 상태 값 변경 가능

• mount 직후 초기 렌더싱 시 한번 호출되는 method

• AJAX통신(데이터를 axios, fecth등을 통해 요청하는 것)과 setState를 해당 method에서 진행하는데, setState를 호출하는 경우, 렌더 함수가 두번 호출되기때문에 성능 문제가 있을 수 있음

2. Updating: 컴포넌트 업테이트는 props의 변화 및 그리고 state에 변화에 따라 결정된다.

   (1) componentDidUpdate 

   componnentDidUpdate(prevProps, prevState, snapshot)
   //해당 method는 render를 호출 한 이후 발생하고, this.props와 this.state가 바뀌어있음.
   // 파라미터를 통해 이전의 값인 prevState , prevProps 를 조회할 수 있음.
   // getSanpshorBeforeUpdate 에서 반환한 snapshot 값을 세번 값으로 받아옴 

  - state값이 변경되거나, DOM에 들어있는 값이 변경되면 자동으로 호출되는 method
  - 자동으로 렌더를 되게하는 것은 아님
  - 렌더가 호출된 다음에 변경되는 값이 있을 때 호출되는 method(최초렌더링에서는 호출되지않음)
  - props나 state가 변경되거나 부모컴포넌트가 리렌더될 때와 같이 컴포넌트가 업데이트 됬을 때 DOM을 조작할 때 사용
  - 무한루프를 막기 위해서 해당 method를 사용할 때는, 조건문을 걸어주는 것이 좋음
  
  *참고: getSnapshotBefoeUpdate()*
  *렌더이후 실제 DOM에 변화가 발생하기 전에, 해당 API발생하고 이 리턴값은 componentDidUpdate에서 3번째 파라미터로 받아올 수 있게 됨*	

3. UnMounting
  
   (1) componentWillUnmount
    - 컴포넌트가 소멸될 시점에 실행되는 method
    - 컴포넌트가 unmount되기 전에 호출되는 메소드로 마지막으로 수행할 작업이 있다면 이 메소드에서 수행해줄 수 있음.
    - timer와 같은 함수를 무효화하거나, 네트워크요청을 취소하는 등을 작업을  해당 method를 통해 실행
    - 컴포넌트와 관련된 것들을 제거하는데 쓰이는 method