6. Hooks

💨 Hook 이란?

 

컴포넌트에서 데이터를 관리(State) 하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다.

 

useState 가 바로 State Hook 이다.

 

✅ 유의사항 

 

constr App = () => {
  const [ username, setUsername ] = useState('');
  return (
    <div>
      <h1>{username}님 환영합니다.</h1>
    </div>
  )
}

 

Hook 은 React 함수(컴포넌트, Hook) 내에서만 사용이 가능하다. 

Hook의 이름은 반드시 'use' 로 시작한다.

 

💨 State Hook

 

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

 

- useState 는 컴포넌트 내 동적인 데이터를 관리할 수 있는 hook 이다.

- 최초에 useState가 호출될 때 초기값으로 설정되며 이후 재 렌더링이 될 경우 무시된다.

- state 는 읽기 전용이므로 직접 수정하면 안된다.

- state 를 변경하기 위해서는 setState 를 이용한다.

- state 가 변경되면 자동으로 컴포넌트가 재 렌더링된다.

 

const App = () => {
  const [ title, setTtile ] = useState("");

  // State 를 변경할 값을 직접 입력
  setTtile("Hello");

  // 또는 현재 값을 매개변수로 받는 함수 선언
  // return 값이 state 에 반영됨
  setTtile((current) => {
    return current + " World ";
  })
}

 

- state 를 변경하기 위해서는 setState 함수에 직접 값을 입력하거나 

- 현재 값을 매개변수로 받는 함수를 전달한다. 이 때, 함수에서 return 되는 값이 state 에 반영된다.

 

💨 Effect Hook 

 

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

 

- Effect Hook 을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.

 

✅ side effect 란? 

 

React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 일컽습니다. 대표적인 예로 어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우, 일단 화면에 렌더링할 수 있는 것은 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장됩니다. 요청 즉시 1차 렌더링을 함으로써 연동하는 API가 응답이 늦어지거나 응답이 없을 경우에도 영향을 최소화 시킬 수 있어서 사용자 경험 측면에서 유리하기 때문입니다.

 

- 컴포넌트가 최초로 렌더링될 때, 지정한 State나 Prop가 변경될 때마다 이펙트 콜백 함수가 호출된다. 

 

- Deps: 변경을 감지할 변수들의 집합(배열)

- EffectCallback : Deps에 지정된 변수가 변경될 때 실행할 함수

 

EX ) 

 

const App = () => {
  const [ count, setCount ] = useState(0);

  useEffect(() => {
    console.log(`버튼을 ${count}회 클릭했다.`)
  }, [count])

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        클릭!
      </button>
    </div>
  )
}

 - Effect Hook을 사용하면 함수 컴포넌트에서 side effect 를 수행할 수 있다.

 

- 컴포넌트가 최초로 렌더링 될 때, 지정한 State 나 Prop가 변경될 때마다 이펙트 콜백 함수가 호출된다.