[공부] Hook 함수

Hook

ㅡ State와 React 기능을 관리하는 메서드

ㅡ 함수형 컴포넌트에서만 동작한다.

 

* 클래스형 컴포넌트 / 함수형 컴포넌트
클래스 : state, lifecycle 기능 사용 가능 / 메모리 자원을 상대적으로 함수형보다 더 사용 / 임의 메서드 정의 가능
함수형 : state, lifecycle 기능 사용 불가하나 Hook을 통해 해결 / 메모리 자원을 클래스보다 덜 사용 / 선언 편함

 

Hook 함수의 규칙

1. 함수형 컴포넌트 내에서만 호출할 수 있다.

2. 함수형 컴포넌트 최상단에서만 호출할 수 있다.

3. 조건부로 호출 불가

 

함수형 컴포넌트 안에서 함수로 Hook 사용은 불가하나  use를 붙여서 CamelCase로 이름 지어서 사용하면

Custom Hook으로 사용 가능하다.

const useCreate = () => {}

 

1. useState()

ㅡ React Component 내에서 state를 추적 / 변하는지 계속 감시

ㅡ state를 만들어주는 메서드

import { useState } from 'react';

const [상태명, set메서드] = useState<데이터 타입>(초기값);
const [state, setState] = useState<boolean>(false);

 

여기서 지정한 State가 변경되면 해당 State를 사용하고 있는 컴포넌트가 리랜더링 된다.

State를 상수로 선언하기 때문에 변경은 set메서드로 변경해주어야 한다.

 

! 배열 or 객체를 가지는 참조변수가 실제 값을 변경하고 다시 set메서드로 적용시켜주더라도 참조변수가 가지는 주소는 변경되지 않기 때문에 State의 변경을 인지 못해 리랜더리잉 되지 않는다.

새로운 배열 or 객체를 생성하여 새로운 주소를 할당한 다음 새 주소를 가지고 있는 참조변수로 변경해여 리랜더링이 된다.

const [objectState, setObjectState] = useState<number[]>([1]);
  const onClickHandler = () => {

       objectState.push(1) // 리랜더링 X
       console.log(objectState);

       const tmp = objectState.map((item) => item + 1); // 리랜더링
       setObjectState(tmp);
  }

 

2. useEffect

ㅡ 특정 상태 값이 변경되는지 감시하고 있다가 변경되면 실행되는 코드

ㅡ 함수형 컴포넌트 최상위에서 함수를 호출하면 매 랜더링시 호출된다.

ㅡ 특정 상태가 변경되었을 때만 실행시키는 동작을 수행할 수 없음(?)

 

import { useEffect } = 'react';

useEffect( () => {
 특정 상태가 변경 되었을 때 실행되는 함수;
}, [추적될 상태]);

 

ㅡ 추적하는 state를 지정하지 않으면 해당 함수는 로드 시에만 호출된다.

ㅡ 단, react Component 생명 주기 상 useEffect는 첫 load시 두 번 실행된다.

 

* 첫 로드 시 두 번 실행되는 걸 방지하는 법

ㅡ 특정 변수를 지정하여 그 값의 논리 형태를 실행의 조건으로 삼고 실행 후에는 값의 논리 값을 바꾸어 준다.

useEffect(() => {
    if(!loaded){
    console.log('로드될 때 실행되는 함수');
    loaded = true;
    }
  },[])

 

*! useEffect에 scope(추적)한 state를 해당 useEffect 내에서 변경하는 작업을 실행하면 무한히 실행된다.

useEffect(() =? {
    console.log('무한');
    setFlag(!flag);
}, [flag];

 

*!! 상태를 set메서드로 변경시키더라도 상태가  바로 변경되는 것이 아니라 해당 함수가 종료되고 리랜더링된 후에 변경된다.

그렇기 때문에 set메서드를 실행해도 리랜더링 되기 전엔 원래 저장되어 있는 값이 남아있다.

 

해결법 2개 → 1. useEffect 사용

                   → 2. 변경 작업을 따로 저장 후, 그 저장 값으로 작업을 진행하고 그 값으로 state를 변경

//! 2번 방법

const onPlusHandler = () => {

const tp = num+1;
setNum(tp);
}

 

Hook 함수는 이 외에도 많다.