REACT #5

useState, useEffect에 감을 잡았으니 다른 훅을 알아본다...! 🙌🏻

까먹었다면...? 간단하게 정리하자...!!

useState는 state, useEffect는 LifeCycle Method를 대체한다.

사실 이렇게 정리해도 이해가 잘 가지않는다.

나중에 사용할 때 다시 한번 보도록 하자...!

---

🥑 useContext

useContext를 사용하면 Consumer컴포넌트를 사용하지 않아도 된다.
아래는 훅 대신 contextAPI를 사용한 방식이다.
부모 컴포넌트에서 Provider를 통해서 데이터를 전달한다.
자식에서는 Consumer를 통해서 데이터를 사용한다.

import React from 'react';

const UserContext = React.createContext();
const user = { name: 'sohee', age: 23 };

function ParentComponent() {
  return (
    <UserContext.Provider value={user}>
      <ChildComponent />
    </UserContext.Provider>
  )
}

function ChildComponent() {
  // ...고차 컴포넌트 사용
  return (
    <div>
      <UserContext.Consumer>
        {user => {
          <>
            <p>{`name is ${user.name}`}</p>
            <p>{`age is ${user.age}`}</p>
          </>
        }}
      </UserContext.Consumer>
    </div>
  )
}

export default ChildComponent;

다음과 같이 useContext훅을 사용하면 고차 컴포넌트를 사용하지 않고

컨텍스트 데이터에 접근할 수 있다.

function ChildComponent() {
  const user = useContext(UserContext);
  console.log(`user: ${user.name}, ${user.age}`);
}

🥦 useRef

useRef는 주로 포커스용으로 사용한다.

그...css의 ~:focus이런 느낌!

클래스에서 사용해보았다면 쉽게 익힐 수 있다.

import React, { useRef } from 'react';

function MyComponent() {
  const inputEl = useRef(null);
  const onClick = () => {
    if (inputEl.current) {
      inputEl.current.focus();
    }
  };
  return (
    <div>
      <input ref={inputEl} type="text"/>
      <button onClick={onClick}>Focus the text</button>
    </div>
  );
}

export default MyComponent;

🥝 useMemo & useCallback

memoization 처럼 이전 값을 기억해서 성능을 최적화한다.

useMemo는 계산량이 많은 함수의 리턴값을 재활용하는 용도이다.

import React, { useMemo } from 'react';
import { runExpensiveJob } from './util'

function MyComponent({ v1, v2 }) {
  const value = useMemo(() => runExpensiveJob(v1, v2), [v1, v2]);
  return <p>${`value is ${value}`}</p>
}

useCallback은 리액트의 렌더링 성능을 위해 제공하는 훅이다.

import React, { useCallback } from 'react';
import { saveToServer } from './api';
import UserEdit from './UserEdit';

function Profile() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const onSave = useCallback(() => saveToServer(name, age), [name, age]);
  return (
    <div>
      <p>{`name is ${name}`}</p>
      <p>{`age is ${age}`}</p>
      <UserEdit onSave={onSave} setName={setName} setAge={setAge}/>
    </div>
  )
}

---

더 있지만, 리덕스를 배우고 다시 돌아와서 복습하는 것이 낫겠다...