[REACT] HOOK

Hooks

는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.

 

✏️ useState 

import { useState } from 'react'
const [변수, set(대문자)변수] = useState('');

• set함수에 예전값 prev( ) 을 넣고 싶으면 콜백함수를 사용해야한다.
• filter 함수는 콜백 함수의 조건에 해당하는 모든 요소가 있는 배열을 새로 생성하는 기능을 한다.

import { useState } from 'react'

const Counter2 = () => {
  const [number, setNumber] = useState(7)
  const handleNumber = (n) => setNumber((prev) => prev + n) 
  // 어떤 함수를 만들지 생각하고 설계해야 재활용 등 할수 있다.
  return (
    <>
      <h1>현재 카운터 값은 {number} 입니다.</h1>
      <button onClick={() => handleNumber(1)}>+1</button>
      <button onClick={() => handleNumber(-1)}>-1</button>
      <button onClick={() => handleNumber(7)}>+7</button>
      <button onClick={() => handleNumber(-4)}>-4</button>
    </>
  )
}

export default Counter2

🍓 useState 여러번 사용하기

• 하나의 useState 함수는 하나의 상태 값만 관리를 할 수 있기 때문에 관리해야 할 상태가 여러 개라면 useState 를 여러번 사용하면 된다.

import { useState } from 'react'

const Info = () => {
  const [name, setName] = useState('')
  const [nickname, setNickname] = useState('')

  const handleChangeName = (e) => {
    setName(e.target.value)
  }
  const handleChangeNickame = (e) => {
    setNickname(e.target.value)
  }
  return (
    <>
      <input value={name} onChange={handleChangeName} />
      <input value={nickname} onChange={handleChangeNickame} />
      <h1>이름: {name} </h1>
      <h1>닉네임: {nickname} </h1>
    </>
  )
}

export default Info

✏️ useEffect

useEffect 는 렌더링 될때 마다 특정 상황에서만 함수가 일어날수 있도록 제어되어 있다.

• 컴포넌트가 최초 렌더링 될때 한번만 실행하고 싶을때 사용
• 어떤 변수가 값이 바뀔때마다 함수를 실행하고 싶을때 사용

useEffect( () => {
}, []); // 두번째 parameter 으로 전달되는 배열 ([])
// 배열 안에는 useState 를 통해 관리하고 있는 상태를 넣어줘도 되고,
// props 로 전달받은 값을 넣어주어도 된다.

• useEffect 는 기본적으로 렌더링 되고난 직후마다 실행되며, 두번째 파라미터 배열에 무엇을 넣느냐에 따라 실행되는 조건이 달라진다.

 

✏️ useRef

useRef Hook 은 함수형 컴포넌트에서 ref 를 쉽게 사용 할 수 있게 해준다.

• 렌더링이랑 상관없는 변수를 선언할때 사용 ( 로컬 변수 )
• DOM 노드나 React 엘리먼트에 직접 접근 할수 있다.

 

✏️ 뒷정리 함수 ( clean up )

컴포넌트가 언마운트되기 전이나, 업데이트 되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect 에서 뒷정리(cleanup) 함수를 반환해주어야 한다.

useEffect(() => {
    console.log('');
    return () => { // clean up 함수
    };
  });
// 뒷정리 함수가 호출 될 때에는 업데이트 되기 직전의 값을 보여준다.

 

✏️ useMemo

useMemo 를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다.

 

✏️ useCallback 

useCallback 은 useMemo와 상당히 비슷한 함수이고, 주로 렌더링 성능을 최적화해야 하는 상황에서 사용하는데 useCallback을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성 할 수 있다.

• 함수 선언 과정을 줄일때 사용