Dali's devLog

React Hooks

-> Hooks Why

  • 탄생배경

  • 01 hook 이전에 재사용성 컴포넌트 (render props, ,high order component) -> wrapper 지옥 -> 디버깅 어려움

  • 02 계층 변화 없이 상태 관련 로직을 재사용할 수 있게 도와준다.

Hook API

useState

props만 있었던 함수형 컴포넌트에서 useState로 state 변화할 함수 함수 state 갱신에 새 State를 -> reRendering Queue에 등록

import React, { useState } from 'react';

function Example() {

함수 내부에서 
const [사용할 변수(state 이름), state 변화할 함수] = useState(state 초기값)

  // "count"라는 새로운 상태 값을 정의합니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

config

  • eslint

잘 이해가 안 가는 부분

setState와 다르게 useState는 갱신 객체를 자동으로 합치지 않는다?

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

← npm →