📌Fetch関数PostをFormDateに変換

//ReviewForm.js
import { createReview } from '../api';

const INITIAL_VALUES = {
  title: '',
  rating: 0,
  content: '',
  imgFile: null,
};

const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('title', values.title);
    formData.append('rating', values.rating);
    formData.append('content', values.content);
    formData.append('imgFile', values.imgFile);
    try {
      setSubmittingError(null);
      setIsSubmitting(true);
      await createReview(formData);
    } catch (error) {
      setSubmittingError(error);
      return;
    } finally {
      setIsSubmitting(false);
    }
    setValues(INITIAL_VALUES);
  };

<button disabled={isSubmitting} type="submit">
        확인
</button>
{submittingError && <div>{submittingError.message}</div>}
 
//api.js
export async function createReview(formData) {
  const response = await fetch(`${BASE_URL}/film-reviews`, {
    method: 'POST',
    body: formData,
  });
  if (!response.ok) {
    throw new Error('리뷰를 생성하는데 실패했습니다.');
  }
  const body = await response.json();
  return body;

fetch関数でPostを行う場合はformDataを使用することが望ましい.

📌React Hook

🔍Hookのルール

は、反応素子関数において

を用いる必要がある.

要素関数の最上位レベルでのみ使用(条件文では使用できません)

useEffect、useRef、usStateなどはreactive hookです.

🔍useCallback

const handleLoad = useCallback((option) => {
// ...
}, [dep1, dep2, dep3, ...]);

関数を作成する場合は、数値コピーのリストが変更されるだけで、毎回新しい関数が作成されるわけではありません.

📌なぜContextを書くのですか?

サブエレメントにstateを書き込むには、親エレメントからpropに降格し続ける必要があります.
これを防ぐためにContextが作成され、グローバルで利用可能な変数が生成されます.

🔍Contextとは?

多数のコンポーネントで使用されるデータは、重複した支柱伝達なしで共有されます.

🔍Contextの適用

Contextを使用する場合は、使用範囲を設定して書き込む必要があります.この場合、範囲をProviderという名前の構成部品に設定できます.
ContextはcreateContextというレスポンス関数を使用して作成できます.

import { createContext } from 'react';

const LocaleContext = createContext('ko');

function App() {
  return (
    <div>
       ... 바깥의 컴포넌트에서는 LocaleContext 사용불가

       <LocaleContext.Provider value="en">
          ... Provider 안의 컴포넌트에서는 LocaleContext 사용가능
       </LocaleContext.Provider>
    </div>
  );
}

🔍Contextの使用

Contextという名前のHookでContextを使用します.芸術作品として使うContextをめくってみましょう

import { createContext, useContext } from 'react';

const LocaleContext = createContext('ko');

function Board() {
  const locale = useContext(LocaleContext);
  return <div>언어: {locale}</div>;
}

function App() {
  return (
    <div>
       <LocaleContext.Provider value="en">
          <Board />
       </LocaleContext.Provider>
    </div>
  );
}

🔍StateとHookを併用

共有範囲を設定するProviderコンポーネントを追加し、stateを作成してvalueに渡します.
Contextに値を含めると、userLocale、userSetLocaleのようにカスタムhookを作成できます.

import { createContext, useContext, useState } from 'react';

const LocaleContext = createContext({});

export function LocaleProvider({ children }) {
  const [locale, setLocale] = useState();
  return (
    <LocaleContext.Provider value={{ locale, setLocale }}>
      {children}
    </LocaleContext.Provider>
  );
}

export function useLocale() {
  const context = useContext(LocaleContext);

  if (!context) {
    throw new Error('반드시 LocaleProvider 안에서 사용해야 합니다');
  }

  const { locale } = context;
  return locale;
}

export function useSetLocale() {
  const context = useContext(LocaleContext);

  if (!context) {
    throw new Error('반드시 LocaleProvider 안에서 사용해야 합니다');
  }

  const { setLocale } = context;
  return setLocale;
}

}