livlog

The goals 💪🏻Handling Async Tasks with Redux ✌🏻Where to Put Our Code 👍🏻The Redux DevTools Sigining Provider in index.js so we can use it everywhere. When we try to make toggle button, we can use 'useSelector'. In store folder, we can organize the function we need separated by the types. createSlice A function that accepts an initial state, an object of reducer functions, and a "slice name", and a..

The goals 💪🏻What is Redux? ✌🏻Redux Baisics & Using Redux with React 👍🏻Redux Toolkit When we use the reducer function for the first time, since it doesn't know the initial state, it can't read the state and occur some errors. So we should give the initial value to the state when we use the reducer function for the first time. So if we set the value and run the code, then we can see it works well...

The goals 💪🏻Adding a Checkout / Order Form ✌🏻Submitting Orders to a Backend Server (Http) 👍🏻Fetching Meals Data import { useEffect, useState } from "react"; import Card from "../UI/Card"; import MealItem from "./MealItem/MealItem"; import classes from "./AvailableMeals.module.css"; const AvailableMeals = () => { const [meals, setMeals] = useState([]); useEffect(() => { const fetchMeals = async (..

The goals 💪🏻What's Complex About Forms? ✌🏻Handling Inputs & Forms with React 👍🏻Simplifications So here we wrote the first code to get the value of input whenever user types something. We get the event and extract the value of it. It updates the state of variable 'enteredName'. const formSubmitssionHandler = (event) => { event.preventDefault(); }; And add this code below. Why? We are dealing with..

The goals 💪🏻What & Why? ✌🏻Building a Custom Hook 👍🏻Custom Hook Rules & Practices Make our own React Hook in Hooks folder and we can use it as Hook anywhere! The most important thing is naming. It should start with 'use' and its purpose is to make component slimmer. Since we are getting 'forward' as parameter in function, we should set it as a denpendency in useEffect. With this way, we can refac..

The goals 💪🏻How do React Apps Interact wirh Databases? ✌🏻Sending Http Requests & Using Responses 👍🏻Handling Errors & Loading State Building users interfaces in each situation

The goals 💪🏻What & Why? ✌🏻Working with Class-based Components 👍🏻Error Boundaries In normal JavaScript we can use 'try-catch'

The goals 💪🏻How Does React Work Behind The Scenes? ✌🏻Understanding the Virtual DOM & DOM Updates 👍🏻Understanding State & State Updates useMemo 를 사용하여 연산한 값 재사용하기 이번에는 성능 최적화를 위하여 연산된 값을 useMemo라는 Hook 을 사용하여 재사용하는 방법을 알아보도록 하겠습니다. App 컴포넌트에서 다음과 같이 countActiveUsers 라는 함수를 만들어서, active 값이 true 인 사용자의 수를 세어서 화면에 렌더링을 해보세요. App.js import React, { useRef, useState } from 'react'; import UserList fro..

So the based on the web structure we wanna build we organized the folders first. And we started with header first. we used css class module and used it in className, and since one of the cases has dash '-' we used in []. We can just organize our code like this. since we will use spread operator, we can just bring some specific item from that props or we can just use spread operator. 양식 입력 IDs 수정..

The goals 💪🏻Working with (Side) Effects ✌🏻Managing more Complext State with Reducers 👍🏻Managing App-Wide or Component-Wide State with Context Let's learn with the small project! 1. We wanna keep our page authenticated even after we reloading the page! For that, we use 'localstorage' and gonna check on the webpage and write the code like this so when we get email and password then we set our logi..