react-hook-sample

Basic Hooks

1. useState

const [state, setState] = useState(initialState);

첫번째 인자로 초기값 을 넣어준다. useState 는 우리가 많이 사용하던 state 초기화 작업과 동일하다고 생각하면 쉽다. 생성시 우리는 배열을 받아 올 수 있다.

모든 Hook은 2개의 인자를 배열로 받아온다.(드물게 아닌 것도 있다.)

배열의 첫번째는 우리가 넘겨주었던 초기화 값이 들어오고 이후에는 변경된 값이 넘어오게 된다. 두번째는 값를 변경하는 함수다.

re-render가 될 경우 useState에 의해 반환된 첫 번째 값은 항상 업데이트를 적용한 후 가장 최근 상태가 된다.

1.1 Functional updates

역시나 우리는 인자로 함수를 보낼수 있다. 그러나 기존에 우리가 사용하던 setState 메소드와는 달라서 자동으로 병합을 시켜주지 않는다.

즉 우리가 만들때 마다 필요에 따라 병합을 해줘야한다.

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues}; // 간단하게 spread를 사용해서 새로 생성
});

1.2 Lazy initial state

initial state 에 역시 함수를 사용할 수 있다. 리액트 사이트에서 표현으로는 값 비싼 계산 이라면 함수를 사용해서 표현하라고 한다.

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

1.3 Bailing out of a state update

같은 값을 다시 업데이트를 하더라도 리액트에서는 자식을 re-render 하거나 effect 를 발생시키지 않는다.(Object.is를 사용해서 비교했다고 함_읽으면 유용함)

2. useEffect()

useEffect(() => {
  // Update the document title using the browser API
  document.title = `You clicked ${count} times`;
});

기본적으로 모든 렌더링이 완료된 후에 실행이 된다.

어떤 value 가 바뀌었을때 실행되도록 할 수 있다.(내가 바라보고 싶은 인자를 넣을 수 있다.)

2.1 Cleaning up an effect

화면을 떠나기 전에 정리를 할때 사용할 수 있다.(dispose()와 같은 느낌임)

아래의 예시를 보게 되면 return으로 만든 함수가 정리를 하는 함수이다.

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // Clean up the subscription
    subscription.unsubscribe();
  };
});

메모리 부족을 방지하하기 위해 컴포넌트가 UI로 부터 제거되기 전에 실행한다.

만약에 구독을 취소하기전에 다른 effect가 실행이 되어 구독을 한다면? 이러한 일이 발생하는 것을 막고 싶다면?

2.2 Timing of effects

componentDidMount 나 componentDidUpdate 과는 다르게 layout과 paint 가 끝나고 나서 useEffect가 실행이된다. 이렇게 되니 만든 공통의 부작용에 있어서 적합하다 라고 하는데, 화면에서 업데이트되는 것이 멈추는 현상이 일어나지 않으니까 그런 것이다.

예를 들어, 사용자가 볼 수있는 DOM 변이는 시각적인 불일치를 인식하지 못하도록 다음 페인트 전에 동기적으로 실행해야 한다.

useLayoutEffect 는 useEffect 동일한 기능이지만 실행되는 시점이 다른 Hook 이다. 쉽게 말함면 실행되는 시점이 다르다는 것인데 useEffect 는 아래에 진한 글씨와 같이 완전히 화면이 그려졌다 라는 것을 보장할 수 있지만 useLayoutEffect는 시점이 Dom의 변화는 있지만 repaint, reflow가 되지 않은 시점이라고 생각하면 될 것 같다.

useEffect는 브라우저가 paint할때 까지 연기를 하지만 새로운 렌더링전에 시작될 것이 보증한다.

2.3 Conditionally firing an effect

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);

useEffect 에는 2번째 인자가 존재한다. 여기에 들어가는 배열은 내가 바라볼 것 으로 여기서는 props.source 의 변경이 일어났을 경우에만 작동하게 된다.

만약에 인자에 아무것도 없다면 마운트에서 실행되고 마운트 해제에서는 정리한다.

3. useContext()

    const context = useContext(Context);

react@16.3부터 지원을 한 Context 를 사용할 수 있도록 지원하는 것이다. context object 를 받아서 현재 context 값을 반환한다.

provider가 업데이트되면 Hooks이 실행되어 최신의 값으로 당연히 동기화가 된다.

Additional Hooks

4. useReducer

우리가 리덕스에서 많이 보던 Reducer 와 비슷하다고 생각하면 된다. 그렇다고 한다.

    const initialState = {count: 0};
    
    // 우리가 Redux에서 만들던 Reducer 부분
    function reducer(state, action) {
      switch (action.type) {
        case 'increment':
          return {count: state.count + 1};
        case 'decrement':
          return {count: state.count - 1};
        default:
          throw new Error();
      }
    }
    
    function Counter({initialCount}) {
      // 초기화 값과 Reducer를 넣어준다.
      const [state, dispatch] = useReducer(reducer, initialState);

      return (
        <>
          Count: {state.count}
          <button onClick={() => dispatch({type: 'increment'})}>+</button>
          <button onClick={() => dispatch({type: 'decrement'})}>-</button>
        </>
      );
    }

4.1 Specifying the initial state

2번째 인자로 초기화 state 를 넘겨준다.(간단하게 초기화하는 방법)

    const [state, dispatch] = useReducer(
        reducer,
        {count: initialCount}
      );

4.2 Lazy initialization

만약 느슨하게 초기 state 를 만들고 싶다면 3번째 인자로 init function 을 넘기자

그러면 init(initialArg) 이런식으로 호출이 될 것이다.

    function init(initialCount) {
      return {count: initialCount};
    }
    
    function reducer(state, action) {
      switch (action.type) {
        case 'increment':
          return {count: state.count + 1};
        case 'decrement':
          return {count: state.count - 1};
        case 'reset':
          return init(action.payload);
        default:
          throw new Error();
      }
    }
    
    function Counter({initialCount}) {
      const [state, dispatch] = useReducer(reducer, initialCount, init);
      return (
        <>
          Count: {state.count}
          <button
            onClick={() => dispatch({type: 'reset', payload: initialCount})}>
    
            Reset
          </button>
          <button onClick={() => dispatch({type: 'increment'})}>+</button>
          <button onClick={() => dispatch({type: 'decrement'})}>-</button>
        </>
      );
    }

4.3 Bailing out of a dispatch

useState 와 동일하게 같은 값을 넘기게 되면 내부적으로 비교를 해서 자식 렌더링과 effect를 실행하는 것을 막는다.

5. useCallback

    const memoizedCallback = useCallback(
      () => {
        doSomething(a, b);
      },
      [a, b],
    );

Returns a memoized callback.

인라인 콜백과 입력 배열을 전달합니다. useCallback 은 입력 중 하나가 변경된 경우에만 변경되는 콜백의 memoized 버전을 반환합니다

즉 a 또는 b 가 변경이 되었다면 함수 결과를 반환한다.

동일한 표현

    useCallback(fn, inputs) //is equivalent to 
    useMemo(() => fn, inputs).

6. useMemo

    const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Returns a memoized value.

렌더링되는 동안 에 useMemo에 전달된 함수가 실행이 된다.

즉, 사용하는데 있어서 조심해야한다. 렌더링동안 하지않는 것을 하지 않아야한다. side effect를 위해 useEffect를 사용해야하는 것이다.

useEffect 와 동일하게 배열이 넘어가지 않을 경우 매순간 첫번째 매개변수를 타게 된다.

성능 최적화를 위해서 useMemo를 사용할 수 있을 것으로 생각이 된다.

7. useRef

    function TextInputWithFocusButton() {
      const inputEl = useRef(null);
      const onButtonClick = () => {
        // `current` points to the mounted text input element
        inputEl.current.focus();
      };

      return (
        <>
          <input ref={inputEl} type="text" />
          <button onClick={onButtonClick}>Focus the input</button>
        </>);
    }

8. useImperativeHandle

    useImperativeHandle(ref, createHandle, [inputs])

useImperativeHandle 은 ref 를 사용할 때 부모 구성 요소에 노출되는 인스턴스 값을 사용자 정의합니다.

    function FancyInput(props, ref) {
      const inputRef = useRef();

      useImperativeHandle(ref, () => ({
        focus: () => {
          inputRef.current.focus();
        }
      }));

      return <input ref={inputRef} ... />;
    }
    FancyInput = forwardRef(FancyInput);

9. useLayoutEffect

서명은 useEffect와 동일하지만 모든 DOM 변이 후에 동기적으로 시작 됩니다.

useLayoutEffect 내부에서 예약된 업데이트는 브라우저가 페인트할 수 있기 전에 동기적으로 플러시됩니다.

이것을 사용하여 DOM에서 레이아웃을 읽고 동기적으로 다시 렌더링합니다.

시각적인 업데이트를 막지 않도록 useEffect를 사용하기를 권장함

10. useDebugValue

useDebugValue는 React DevTools에서 사용자 정의 후크 레이블을 표시하는 데 사용할 수 있습니다.

    function useFriendStatus(friendID) {
      const [isOnline, setIsOnline] = useState(null);
    
      // ...
    
      // Show a label in DevTools next to this Hook
      // e.g. "FriendStatus: Online"
      useDebugValue(isOnline ? 'Online' : 'Offline');
    
      return isOnline;
    }

10.1 Defer formatting debug values

    useDebugValue(date, date => date.toDateString());

Reference

-usehooks

Name		Name	Last commit message	Last commit date
Latest commit History 28 Commits
.vscode		.vscode
public		public
src		src
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
jest.config.json		jest.config.json
package.json		package.json
tsconfig.json		tsconfig.json
webpack.config.js		webpack.config.js
yarn-error.log		yarn-error.log
yarn.lock		yarn.lock

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

react-hook-sample

Contents

Basic Hooks

1. useState

1.1 Functional updates

1.2 Lazy initial state

1.3 Bailing out of a state update

2. useEffect()

2.1 Cleaning up an effect

2.2 Timing of effects

2.3 Conditionally firing an effect

3. useContext()

Additional Hooks

4. useReducer

4.1 Specifying the initial state

4.2 Lazy initialization

4.3 Bailing out of a dispatch

5. useCallback

6. useMemo

7. useRef

8. useImperativeHandle

9. useLayoutEffect

10. useDebugValue

10.1 Defer formatting debug values

Reference

About

Uh oh!

Releases

Packages

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Folders and files

Latest commit

History

Repository files navigation

react-hook-sample

Contents

Basic Hooks

1. useState

1.1 Functional updates

1.2 Lazy initial state

1.3 Bailing out of a state update

2. useEffect()

2.1 Cleaning up an effect

2.2 Timing of effects

2.3 Conditionally firing an effect

3. useContext()

Additional Hooks

4. useReducer

4.1 Specifying the initial state

4.2 Lazy initialization

4.3 Bailing out of a dispatch

5. useCallback

6. useMemo

7. useRef

8. useImperativeHandle

9. useLayoutEffect

10. useDebugValue

10.1 Defer formatting debug values

Reference

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages