React - Lifecycle, Hook(useState, useEffect, useRef)

• Lifecycle: 생성(mounting) -> 업데이트(updating) -> 삭제(unmounting) -> 각각이 생명주기 메서드라고 함
• React Hook : 함수형 컴포넌트에서 사용되는 몇가지 기술, 함수현 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해줌
  • 규칙 1. 반복문, 조건문, 중첩된 함수 내에서 호출이 불가능, 반드시 최상위에서만 Hook을 호출해야함
  • 규칙 2. React 함수 내에서만 호출해야함
    
    • 대표적인 예) useState, useEffect
      1. useState: Component에서 상태값을 추가할 때 사용
         •   const[변수명, 상태를 업데이트 할 함수명] = useState(초기값) -> useState로 선언된 변수는 상태가 변할 때마다 페이지를 리렌더링 시킴, 상태를 업데이트 할 함수는 비동기적으로 처리
      2. useEffect: 화면이 렌더링 될 때마다, 특정 작업을 실행할 수 있도록 하는 Hook
         •   함수형 컴포넌트에서 Side Effect를 사용할 수 있게 되고, 클래스형 컴포넌트의 Life Cycle method에서 사용되는 최초렌더링과 렌더링 후 업데이트가 같이 이루어지는 형태로 페이지가 렌더링 될 때 변화된 값으로 인해 바뀌어야 할 화면의 데이터들을 처리!
         •   useEffect(() => {익명함수},[]) -> 빈 배열의 종류에 따라 렌더링의 횟수를 조절 가능
         • 의존성 배열 -> useEffect에 입력하는 두번째 매개변수 
           1. [] -> 최초 렌더링 될 때 한번 실행
           2. [상태1, 상태2] -> 선언한 상태값들이 업데이트 될 때만 실행
           3. 생략 -> 리렌더링시 반드시 실행
         •   의존성 배열 -> 사용시 타이밍이 늦어짐
      3. useRef: 저장공간 또는 DOM요소에 접근하기 위해 사용되는 Hook(ref: reference 참조)
         •   렌더링에 필요하지 않은 값을 참조할 수 있는, 컴포넌트가 특정 정보를 기억하도록 하고 싶지만 정보가 랜더링되지는 않게 하는거지(변화는 감지해야하지만, 그 변화가 렌더링을 발생시키지 않을 때)
         •   const 변수명 = useRef(초기값) -> 결과값으로 {current: 초기값}을 지닌 객체가 반환
         •   current라는 키값을 지닌 프로퍼티 생성, 값에 어떤 변경을 줄 때도 이 current를 이용해서 한다

-> useState를 통해 상태변수 선언, useEffect를 통해 변화 감지