50 :: Hooks, Hook 등장배경, Effect Hook

엘리스 SW 엔지니어 트랙 50일차

온라인 강의날

 

 

오늘은 Hooks에 들어간다

함수 컴포넌트의 꽃이라고 하신다

워드프레스 만질 때도 많이 보였던 Hook

비슷하지 않을까 생각된다

 

 

Hooks

컴포넌트에서 데이터 관리(State)

데이터 변경될 때 상호작용(Effect) 하기 위해 사용

지금까지 사용했던 useState가 State Hook

 

 

Hook 등장 배경

State와 생명주기 관리하려고 클래스 컴포넌트 사용했다

근데 클래스 컴포넌트 잠깐 봐도 복잡하지 않나?

이걸 해결하기 위해 Hook이 나왔다

 

 

Hook 주의사항

• React 함수(컴포넌트, Hook) 안에서만 사용 가능
• 이름은 반드시 'use'로 시작 예. useState
• 최상위 중괄호 안에서만 사용가능

 

 

State Hook

useState는 동적인 데이터 관리할 수 있는 Hook

// state hook 예시 1
const App = () => {
  const  [ count, setCount ] = useState(0)
}


// state hook 예시 2
const App = () => {
  const [ title, setTitle ] = useState("")
  
  // 직접 변경
  setTitle("Hello")
  
  // 현재 값을 매개변수로 받아서 리턴
  setTitle((current) => {
  	return current + " World"
  })
}

 

 

Effect Hook

함수 컴포넌트에서 side effect 수행 가능

=> 어떤 값이 변할 때 내가 설정한 함수가 실행

 

실행 조건

1. 최초 렌더링시
2. 지정한 State, Prop이 변경될 때

State나 Prop을 지정안하면 한 번만 실행되겠지

 

useEffect 예시

1. 최초로 실행되니까

우선 0회 클릭했습니다 뜨고

2. 누를 때 마다 count가 변하니까

console.log가 실행된다

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

 

useEffect 내에서 다른 함수를 return 하면

state가 변경되서

컴포넌트가 다시 렌더링되기 전,

컴포넌트가 없어질 때 호출된다

 

 

그 외 자주 쓰이는 Hooks

useMemo, useCallback, useRef

 

 

useMemo(함수, 배열)

저장을 하는 녀석일까?

 

useMemo 사용 예시

firstName이나 lastName이 바뀔 때 

풀네임으로 계산해서 저장을 해둔다

const App = () => {
  const [lastName, setLastName ] = useState("김")
  const [firstName, setFirstName ] = useState("철수")

  // 성과 이름이 바뀔 때마다 풀네임을 저장(메모이제이션)
  const fullName = useMemo(() => {
    return `${firstName} ${lastName}`
  }, [firstName, lastName])
}

 

렌더링 단계에서 이루어진다

useMemo 잘못쓰면 성능이 떨어진다고 한다

작은 거에서는 상관 없다고 한다

 

 

useCallback

함수를 메모이제이션하기 위해 사용

useMemo는 변수를 메모이제이션,

useCallback은 함수를 메모이제이션

 

useCallback 사용 예시

const App = () => {
  const [lastName, setLastName ] = useState("김")
  const [firstName, setFirstName ] = useState("철수")

  // 성과 이름이 바뀔 때마다,
  // 풀네임을 return하는 '함수'를 저장(메모이제이션)
  const getFullName = useCallback(() => {
    return `${firstName} ${lastName}`
  }, [firstName, lastName])
  
  return<>{getFullName()}</>
}

 

 

useRef

컴포넌트 생애 주기 내에서 유지할 ref 객체 반환

useRef에 의해 반환된 ref객체가

변경되어도 컴포넌트 다시 렌더링 X

 

ref.current 이렇게 사용하는데

event.target이랑 같은일을 한다

 

useRef 사용 예시

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

 

 

위까지 리액트 기초를 배우고

To do 리스트 실습!

 

컴포넌트 나누고

state 관리하고

CSS하고 등등