한 걸음씩

https://react.dev/reference/react/useReducer useReducer – React The library for web and native user interfaces react.dev useReducer는 리액트에서 제공하는 훅 중 하나로, 컴포넌트의 상태와 상태를 업데이트하는 로직을 분리하여 관리할 수 있도록 도와주는 훅이다. 복잡한 상태 로직을 더 구조적으로 관리할 수 있다. #Challenge: Bank Account import { useReducer } from "react"; import "./styles.css"; const initialState = { balance: 0, loan: 0, isActive: false }; // 리듀서 함수 정의 functi..

React Router는 리액트 애플리케이션에서 페이지 내비게이션을 관리하는 라이브러리이다. import { BrowserRouter, Routes, Route } from 'react-router-dom'; function App() { return ( ); } Nested Route: 중첩된 라우트는 하위 컴포넌트에서 또다른 라우트를 정의할 수 있도록 해준다. // App 컴포넌트 안에서의 중첩된 라우트 Outlet: 중첩된 라우트의 컴포넌트들이 렌더링되는 위치를 나타낸다. // Courses 컴포넌트 function Courses() { return ( Courses {/* Outlet을 통해 중첩된 라우트의 컴포넌트를 렌더링 */} ); } Link NavLink 페이지 전환을 처리하는데 사용 현..

export default function App() { const [value, setValue] = useState('') return ( Classy weather ) } Form, Weather 컴포넌트 렌더링 하는 부모 컴포넌트 App function Form({ value, setValue }) { function handleSubmit(e) { e.preventDefault() if (!value.length) return setValue(e.target.value) } return ( setValue(e.target.value)} /> ) } 입력 값을 받는 입력 폼 function Weather({ value }) { const [location, setLocation] = useStat..

◆ Rules of Hooks only call hooks at the top level only call hooks from React functions # challenge: useGeolocation import { useState } from "react"; function useGeolocation() {} export default function App() { const [isLoading, setIsLoading] = useState(false); const [countClicks, setCountClicks] = useState(0); const [position, setPosition] = useState({}); const [error, setError] = useState(null)..

3개의 useEffect와 console.log로 출력했을 때 무엇이 먼저 동작할까에 대한 과정 react의 useEffect 훅은 컴포넌트의 라이프사이클에서 특정 시점에 실행되도록 하는데, 다양한 상황에서 동작할 수 있다. console.log('During render') 매 렌더링 시에 출력된다. useEffect(function(){ console.log("After initial render") }, []) 초기 렌더링 시에만 실행 useEffect(function(){ console.log("After every render") }) 초기 렌더링과 매 렌더링 시에 실행된다. useEffect(function(){ console.log("d") }, [query]) query 값이 변경될 때마다..