[React] Hooks

useState()

 : state를 사용하기 위한 Hooks

const[변수명, set함수명] = userState(초기값);

import React, {userState} from "react";

function Counter(props){
 const [count, setCount] = useState(0);
 
 return {
  <div> 
   <p> 홈 {count}번 클릭했습니다.</p>
   <button onClick={()=> setCount(count + 1)}>
     클릭
   </button>
  </div>
 };

}

useEffect()

 : side effect를 수행하기 위한  Hook

 - 다른 컴포넌트에 영향을 미칠 수 있으며, 렌더링 중에는 작업이 완료될 수 없기 때문이다.

 - 리액트의 함수 컴포넌트에서 Side effect를 실행할 수 있게 해주는 Hook

useEffect(이텍트 함수, 의존성 배열);

Effect function이 mount, unmount 시에 단 한 번씩만 실행된다.

useEffect(이텍트 함수, []);

의존성 배열을 생략하면 컴포넌트가 업데이트될 때마다 호출된다.

useEffect(이텍트 함수);

 

import React, {userState} from "react";

function Counter(props){
 const [count, setCount] = useState(0);
 
 // componrntDidMount, commponentDidupdate와 비슷하게 작동
 useEffect(()=> { 
    // 브라우저 API를 사용해서 document의 title을 업데이트
    document.title = 'you clicked ${count} times';
 });
 
 return {
  <div> 
   <p> 홈 {count}번 클릭했습니다.</p>
   <button onClick={()=> setCount(count + 1)}>
     클릭
   </button>
  </div>
 };

}

 

useMemo()

 - Memoized value를 리턴하는 Hook

 - 최적화를 위해 사용

 -  연산량이 많이 드는 함수를 호출 값을 저장해 두었다가 같은 입력값으로 함수를 호출하면 새로 함수 호출하지 않고 이전에 저장했던 함수 결과를 바로 반환 

const memolizedValue = useMemo(
  () = > {
    // 연산량이 높은 작업을 수행하여 결과를 반환
    return computeExpensiveValus(의존성 변수1, 의존성 변수2);
  },
  [의존성 변수1, 의존성 변수2]
);

의존성 배열을 넣지 않을 경우, 매 렌더링 마다함수가 실행됨

consr memoizedValue =useMemo(
 () = > computeExpensiveValue(a,b)
)

의존성 배열이 빈 배열일 경우, 컴포넌트 마운트 시에만 호출됨

const memoizedValue = useMemo(
  () => {
    return computeExpensivevalue(a,b);
  }
);

 

useCallback()

 -  useMemo() Hook과 유사하지만 값이 아닌 함수를 반환

const memoizedCallback = useCallback(
 () => {
   doSomething(의존성 변수1, 의존성 변수2);
 },
 [의존송 변수1, 의존성 변수2]
)

동일한 역할을 하는 두 줄의 코드 

useCallback(함수, 의존성 배열);

useMemo(() => 한수, 의존성 배열);

import { useState, useCallback} from "react";

function ParentComponent(props){
  const [ count, setCount] =  useState(0);
  
  //컴포넌트가 카룬트 될때만 함수가 정의됨
  const handleClick = useCallback((event) = > {
   // 클릭 이벤트 처리
  }, []);
  return(
  <div>
    <burron 
          onclick ={() => {
            setCount(count + 1);
          }}
     >
          {count}
     </button>
     
     <childComponent handleClick = {headleClick} />
  </div>
  );
}

 

useRef()

 -  REference를 사용하기 위한 Hook

 - 특정 컴포넌트에 접근할 수 있는 객체

   : refObject.current   // current -> 현재 참조하고 있는 Element

 - 내부의 데이터가 변경되었을 때 별도로 알리지 않는다.

function TextInputWithFocusButton(props){
  const inputElem = useRef(null);
  
  const onButtonClick = () -> {
    // current는 마운트된 input element을 가르킴
    inputRlrm.curent,focus();
  };
  
  return(
    <>
      <inpust ref = {inputElem} type ="text />
      <button onClick= {onButtonClick}>
       Focus the input
      </button>
      </input>
    </>
  );

}

다양한 변수를 저장할 수 있음

<div ref={myRef} />

 

Callack ref

 - 돔의 변화를 알 수 있다. 

 

function TextInputWithFocusButton(props){
  const [height, serHright] = useState(0);
  
  const measuredRef = useCallback(node -> {
    if ( node ! == null ) {
      setHeight(node.getBoundingClientRext().height);
    }
  }, []);
  
  return(
    <>
      <h1 ref = {mesuredRef}> 안녕 </h1>
      <h2>위 헤더의 높이는 {Marh.round(height)}px 입니다.</h2>
    </>
  );

}

 

 

규칙

1.  Hooks은 모조건 최상위 레벨에서만 호출해야 한다.

     - 반복문, 중첩문, 조건문 hook 사용 안됨

     : 컴포넌트가 렌더링 될 때마다 매번 같은 순서로 호출되어야 한다.

 

2. 리액트 함수 컴포넌트에서만 Hook을 호출해야 한다. 

      -  리액트 함수 컴포넌트에 호출

      - 직접 만든 컴스턴 훅에서만 호출