Front/React11 Day13_react(7)_Pm 탭이름 바꾸기New.js hook > usePageTitle.jsimport { useEffect } from "react"const usePageTitle = (title) => { useEffect(() => { const $title = document.getElementsByTagName('title')[0] //리스트로 가져옴 $title.innerText = title; }, [title])}export default usePageTitle; New.jsimport Header from "../components/Header";import Button from "../components/Button";import Editor from "../component.. 2025. 9. 12. Day11_react(6)_Am 수정페이지 삭제버튼 활성화Eidit.jsimport { useParams, useNavigate } from "react-router-dom";import Header from "../components/Header";import Editor from "../components/Editor";import Button from "../components/Button";import { DiaryStateContext, DiaryDispatchContext } from "../App";import { useContext, useEffect, useState } from "react";const Edit = () => { const params = useParams(); const nav = useN.. 2025. 9. 10. Day11_react(6)_Pm New페이지 뒤로가기 버튼 활성화New.jsimport Header from "../components/Header";import Button from "../components/Button";import Editor from "../components/Editor";import { useNavigate } from "react-router-dom";const New = () => { const nav = useNavigate(); return ( div> Header title='새 일기 쓰기' leftChild={ Button text={'} onClick={() => nav(-1)}/>} .. 2025. 9. 9. Day11_react(6)_Am Header부분 기능추가Home.jsimport Button from "../components/Button";import Header from "../components/Header";import DiaryList from "../components/DiaryList";import { useState } from "react";const Home = () => { const [pivotDate, setPivotDate] = useState(new Date()); const onIncreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth()+1)) } const o.. 2025. 9. 9. Day10_react(5)_Pm Header 꾸미기Header.jsimport './Header.css'const Header = ({title, leftChild, rightChild}) => { return ( header className='Header'> div className='header_left'>{leftChild}div> div className='header_center'>{title}div> div className='header_right'>{rightChild}div> header> )}export default Header; Header.css.Header { display: flex; align-item.. 2025. 9. 8. Day10_react(5)_Am router 쓰기428pjosn => App.jsimport './App.css';import { Route, Routes, Link } from 'react-router-dom';import Diary from './pages/Diary';import New from './pages/New';import Home from './pages/Home';import Notfound from './pages/Notfound';function App() { return ( div className="App"> Link to={"/"}>HomeLink> Link to={"/new"}>NewLink> Link to={"/Diary"}>DiaryLink> br/>br/> .. 2025. 9. 8. 이전 1 2 다음