[공부] Hook 함수

쉬운 목차

훅

ㅡ 상태 및 대응 기능을 관리하는 방법

ㅡ 기능성 부품에서만 작동합니다.

* 클래스 컴포넌트 / 함수 컴포넌트
Class : status, lifecycle function 가능 / function type 보다 상대적으로 많은 메모리 자원 사용 / 어떤 method 정의 가능
기능 유형: 상태, 수명 주기 함수는 사용할 수 없지만 후크로 해결됨 / 클래스보다 메모리 리소스를 덜 소비함 / 선언하기 쉬움

'추천 관련글,

후크 기능 규칙

1. 기능적 구성 요소 내에서만 호출할 수 있습니다.

2. 기능 구성 요소의 시작 부분에서만 호출할 수 있습니다.

3. 조건부 호출 불가

Functional component에서 Hook을 함수로 사용하는 것은 불가능하지만 use를 이용하여 CamelCase를 호출한 후 사용하면

사용자 지정 후크로 사용할 수 있습니다.

const useCreate = () => {}

1. 사용상태()

ㅡ React 컴포넌트 내 상태 추적 및 변경 여부 모니터링

상태를 생성하는 메서드

import { useState } from 'react';

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

여기에 지정된 상태가 변경되면 해당 상태를 사용하는 구성 요소가 다시 렌더링됩니다.

State는 상수로 선언되어 있으므로 set 메소드를 사용하여 변경해야 합니다.

!
또한 배열 OR 객체를 사용하여 참조 변수의 실제 값을 변경하고 set 메서드로 다시 적용하면 참조 변수의 주소가 변경되지 않으므로 상태 변경을 인식하지 못하고 rerender를 수행하지 않습니다.

새로운 배열 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. 효과 사용

ㅡ 특정 상태 값의 변화 여부를 모니터링하고 변화 시 실행하는 코드

ㅡ 함수형 컴포넌트의 최상위 수준에서 함수를 호출하면 렌더링할 때마다 호출됩니다.

ㅡ 특정 상태가 변경되었을 때만 수행되는 동작을 수행할 수 없습니다(?)

import { useEffect } = 'react';

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

ㅡ 트래킹 상태를 지정하지 않으면 로딩 시에만 함수가 호출됩니다.

ㅡ 단, 리액션 컴포넌트의 라이프사이클에서 useEffect는 처음 로드될 때 두 번 실행됩니다.

* 첫 번째 로드에서 두 번 실행되지 않도록 하는 방법

ㅡ 특정 변수를 설정하고 그 값의 논리형식을 실행 조건으로 설정하고 실행 후 값의 논리값을 변경한다.

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

*!
이 useEffect 내에서 Scoped(추적됨) 상태를 useEffect로 변경하는 연산을 수행하면 무한히 실행됩니다.

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

*!
!
set 메소드를 사용하여 상태를 변경하더라도 즉시 상태가 변경되지 않고 함수가 종료되고 다시 렌더링된 후에 상태가 변경됩니다.

따라서 set 메서드를 실행하더라도 다시 렌더링하기 전에 원래 저장된 값이 보존됩니다.

2 솔루션 → 1. useEffect 사용

→ 2. 변경된 작업을 별도로 저장 후 저장된 값으로 계속 작업하고 이 값으로 상태 변경

//!
 2번 방법

const onPlusHandler = () => {

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

훅