livlog

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..

The goals 💪🏻JSX Limitations & Fragments ✌🏻Getting a Cleaner DOM with Portals 👍🏻Working with Refs Even we can just use [] and inside put them with "," still it works. But in this case, since it's an array, we need to put "key" here So this is the reason we prefer using dynamic syntax to other ways. It can be a little dirty trick but we can make an empty component which just return children and wr..

Why Do We Need To Read Official Document? React is Library. And we can understand deeply when we read the inventor's intention when we read official document. Create React App First of all, we need Node to use 'React Create App' So check whethere we have Node on our computer or not. Node provides the environment for React app to work in local environment. Node installed -> npm(node package manag..