符号化プログラムなしinstagramクローン符号化ショートカットhttps://nomadcoders.co/instaclone

🔆 会員登録成功通知ウィンドウの作成

SignUpで会員登録に成功した場合、Loginページに移動します.
この時点で会員登録が完了しますので、登録してください.このような通知を作成したい場合は、どうすればいいですか?
答えはuseHistoryとuseLocationにあります.

useHistory

userHistory Hookは、イベントが正常に発生したときにページを移動するために基本的に使用されます.

history.push(routes.home,{message:"회원가입이 완료되었습니다. 로그인 해주세요!"})

->ホームページに移動し、stateにメッセージを送信します.

useLocation

現在の状況ではstateでメッセージを渡し、Loginページからメッセージを受信するにはuseLocationを使用する必要があります.
console.log(location)の結果ウィンドウ

Loginページで通知ウィンドウを作成できます.

🔆 Redirecting User

会員加入後はログインページに入り、ユーザー名とパスワードをステータスで受信します.

// Signup.js

const {username,password} = getValues();

history.push(routes.home,{
   message:"회원가입 완료되었습니다. 로그인 해주세요.",
   username,
   password,
});

// Login.js

const {...} = useForm({
   mode:"onChange",
   defaultValues:{
      username:location?.state?.username || "",
      password:location?.state?.password || "",
   },
});

ここでの問題は、ログインとログアウトの両方にdefaultValues値が表示されることです.

🔎 解決する

ログアウトを呼び出すとhistoryが受信され、locationのstateが初期化されます.

//apollo.js

export const logUserOut = (history)=>{
   history.replace();
   window.location.reload();
}

🔆 Dark Mode

ダークモード切り替えボタンを作成してDarkModeを実現
KEYPOINT

スタイル-コンポーネントを使用したThemeProviderのアイテム

をテーマ別に適用

// styles.js

export const lightTheme ={
   // light 테마 Style EX
   fontColor : "black",
   bgColor : "white",
}

export const darkTheme ={
   // dark 테마 Style EX
   fontColor : "white",
   bgColor : "black",
}