main.jsximport { createRoot } from 'react-dom/client'import { BrowserRouter } from 'react-router-dom';import './index.css'import App from './App.jsx'createRoot(document.getElementById('root')).render( ); App.jsximport { Routes, Route } from 'react-router-dom';import NewsPage from './pages/NewsPage';const App = () => { return ( } /> ..

/lib/usePromise.jsimport { useState, useEffect } from 'react';export default function usePromise(promiseCreator, deps) { // 대기 중/완료/실패/ 상태 관리하기 const [loading, setLoading] = useState(false); const [resolved, setResolved] = useState(null); const [error, setError] = useState(null); useEffect(() => { const process = async () => { setLoading(true); try { ..

기본사용법const onClick = async () => { // async try { const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1'); // await setData(response.data); } catch (error) { console.log(error); }} App.jsximport './App.css'import { useState } from 'react';import styled from 'styled-components';import axios from 'axios';const StyledTextarea = styled.textarea`..

1.기본 사용법async function fetchData() { const result = await new Promise((resolve) => { setTimeout(() => { resolve("데이터 로딩 완료!"); }, 2000); }); return result;}console.log("start");fetchData().then((data) => { // 비동기 함수 호출 console.log(data);});  fetchData는 async로 정의된 함수입니다. 이 함수는 자동으로 Promise를 반환합니다.함수 내에서 await를 사용하여 Promise가 해결될 때까지 기다립니다.setTimeout을 사용해 2초 ..

왕어린 시절 이름재위 연도생애 기간사망 당시 나이사망 원인평가상세 정보상세보기 링크태조이성계1392-13981335-140873세자연사조선 왕조의 창건자, 중앙 집권 체제 확립, 정치적 안정 기초 다짐1392년에 조선 왕조를 창건하고, 왕권 강화를 위한 다양한 정치적 개혁을 시도. 중앙 집권 체제를 구축하며, 조선의 기틀을 다짐.상세보기 링크정종이방과1398-14001357-141962세자연사내정 안정, 권력 다툼으로 짧은 재위태조의 후계자로 즉위했으나, 권력 투쟁 속에 짧은 재위 기간을 마쳤으며, 정치적 영향력은 미약함.상세보기 링크태종이방원1400-14181367-142255세자연사왕권 강화, 중앙 집권화, 여러 개혁 시행, 군사력 증강왕권을 강화하고 중앙 집권화를 위한 여러 개혁을 시행. 군사력을 ..

1.준비하기1.1 라이브러리 설치npm install react-router-dom 1.2 main.jsximport './index.css';import React from 'react';import App from './App.jsx';import { createRoot } from 'react-dom/client';createRoot(document.getElementById('root')).render( ) 1.3 app.jsximport React from 'react';import { Link, Route, BrowserRouter as Router, Routes } from 'react-router-dom';import NotFound from './pages/NotFound';cons..

Immer 의 장점상태 업데이트 간소화: draft를 직접 수정할 수 있어 코드가 더 직관적이고 간결하다.불변성 자동 관리: Immer가 내부적으로 불변성을 처리하므로, 개발자는 상태 업데이트에만 집중할 수 있다.중복 코드 감소: map()이나 filter()를 사용해 배열을 새로 생성하는 등의 작업을 하지 않아도 된다.1.Immer 사용 전기본, 상태를 업데이트할 때마다 새로운 상태를 만들어주는 방식setTodos 함수로 상태를 업데이트할 때 새로운 배열을 생성하여 불변성을 유지각 항목을 수정할 때마다 todo 객체를 복사하고, 새로운 배열을 반환한다.import React, { useState } from 'react';function TodoApp() { const [todos, setTodos]..

App.jsximport React, { useState, useRef, useCallback } from 'react';import TodoTemplate from './components/TodoTemplate';import TodoInsert from './components/TodoInsert';import TodoList from './components/TodoList';const App = () => { const [todos, setTodos] = useState([ { id: 1, text: '기초 알아보기', checked: true, }, { id: 2, text: '컴포넌트 스타일링해 보기', checked: t..

1. Inline 스타일링 (Inline Styles)Javascript 객체 형태로 스타일을 지정 // App.jsimport React from 'react';function App() { const containerStyle = { backgroundColor: 'lightblue', padding: '20px', }; const textStyle = { color: 'darkblue', fontSize: '18px', }; return ( 안녕하세요, React! );}export default App; 2. CSS ModulesCSS Modules는 클래스 이름의 충돌을 방지하기 위해 각 컴포넌트에 고유한 클래스를 생성하는 방법스타일을 해당..

참고https://react-icons.github.io/react-icons/ React Icons react-icons.github.io 라이브러리 설치npm install react-icons 호출import { MdAdd } from 'react-icons/md'; 사용