Web Dev/ELICE

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

HJPlumtree 2022. 1. 1. 21:58

엘리스 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하고 등등

 

 

 

저작자표시 (새창열림)