20230616TIL(리액트 훅)

Hooks 개요

컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용 어제 배운 useState,useEffect 모두 Hook이다. React 함수(컴포넌트, Hook) 내에서만 사용이 가능하고, 훅의 이름은 반드시 use로 시작해야 한다.

const App=()=>{
  const [username,setUsername]=useState('')
  return(
    //이 아래로는 쓸 수 없음
    <div>
      <h1>Hello, {username}</h1>
     </div>

가장 위에 있는 App=()=>{}의 중괄호 내에서만 호출할 수 있다. if문, for문 안 쪽 또는 콜백함수 내에서 호출할 수 없다.

State Hook과 Effect Hook

State Hook

const App = () => {
// 일반적인 useState 사용법
const [state이름, setState이름] = useState(초기값)
}

useState라는 함수를 호출하면, state이름과 setState이름 함수를 인자로 가진 배열을 반환한다.
state를 변경하기 위해서는 setState를 이용한다. setState는 메서드가 아니고 useState배열에 들어가는 두번째 함수로, state를 변경하기 위해서 사용하고 state 값이 변경되면 컴포넌트에 재렌더링하라는 명령을 내린다. state는 읽기 전용이므로 직접 수정하지 않는 것이 좋다.

const App = () => {
	const [title, setTitle] = useState("")
	// State를 변경할 값을 직접 입력
	setTitle("Hello")
	// 또는 현재 값을 매개변수로 받는 함수 선언
	// return 값이 state에 반영됨
	setTitle((current) => {
	return current + "World";
})
}

setTitle은 title의 값을 수정하기 위한 함수다. setTitle로 바로 값을 입력할 수도 있고
setTitle((current) => {
return current + "World";
})
처럼 현재 값을 매개변수로 받는(current) 함수를 전달한다.(current)=>{return current+'World'} 이때 return되는 값이 state에 반영된다.

Effect Hook

const App = () => {
	useEffect(EffectCallback, Deps?)
}

Deps: 변경을 감지할 변수들의 집합(배열).지정한 State나 Prop이 변경되면 여기에 저장된다. 아무것도 없는 빈 배열을 주면 한번만 실행된다.
EffectCallback: Deps에 지정된 변수가 변경될 때 실행할 함수. 컴포넌트가 최초로 렌더링 될 때/지정한 State나 Prop이 변경될 때마다 호출된다.

const App = () => {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log('버튼을 ${count}회 클릭했습니다.')}, [count])
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>클릭하세요</button>
    </div>
  )
}

위의 useEffect에서 EffectCallback는 익명함수이고 console.log를 실행한다. Deps의 값은 count다. count값에 변경이 생기면 console.log~가 실행된다. count 값은 setCount에 의해 변경된다.

이외의 Hooks

useMemo(()=>{function(a,b),[a,b}

const App = () => {
  const [firstName, setFirstName] = useState('철수')
  const [lastName, setLastName] = useState('김')
  // 이름과 성이 바뀔 때마다 풀네임을 메모이제이션
  const fullName = useMemo(() => {
    return `${firstName} ${lastName}`
  }, [firstName, lastName])
  }

지정한 State나 Props가 변경될 경우 해당 값을 활용해 계산된 값(변수)을 메모이제이션하여 재렌더링 시 불필요한 연산을 줄인다. 문자열,숫자뿐만 아니라 객체,배열,함수 등 모든 자바스크립트 연산 결과를 메모이제이션한다.Effect콜백으로는 익명함수를, Deps로 firstName과 lastName을 받았다. 오래 걸리는 로직을 작성하면 성능이 떨어질 수도 있다. state값이 문자열이 아니면 return foo+bar로 써도 된다.

메모이제이션(Memoization)
컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술

useCallback(()=>{function},[a,b])

const getfullName = useCallback(() => {
  return `${firstName} ${lastName}`
}, [firstName, lastName])
return <>{fullname}</>

useMemo가 변수를 메모이제이션 했다면 useCallback은 함수를 메모이제이션한다. 컴포넌트가 재렌더링될 때 불필요하게 함수가 다시 생성되는 것을 방지한다.
useMemo(() => fn, deps) 와 useCallback(fn, deps) 는 같다.

useRef(initialValue)

const App = () => {
	const inputRef = useRef(null)
	const onButtonClick = () => {
		inputRef.current.focus()
	}
	return (
		<div>
		<input ref={inputRef} type="text" />
		<button onClick={onButtonClick}>input으로 포커스</button>
      </div>
	)
}

컴포넌트 생애 주기 내에서 유지할 ref 객체(변경이 되더라도 재렌더링되지 않아야 하는 값)를 반환한다. ref 객체는 .current라는 프로퍼티를 가지며 이 값을 자유롭게 변경할 수 있다.
useRef에 의해 반환된 ref 객체가 변경되어도 컴포넌트가 재렌더링되지 않는다.
inputRef.current로 input 엘리먼트가 들어간다.

변수를 선언하고 Hook을 그 안에 할당하자!

나만의 Hook 만들기

자신만의 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있다. 이름은 use로 시작되어야 하고, 한 Hook 내의 state는 공유되지 않는다.