[React] 4. 상태 관리

1. npm 라이브러리 설치

1) react-router-dom

• 복사 버튼을 누른 후 콘솔에 붙여넣어서 설치

2) react-redux

3) styled-components

2. Cursor 플러그인 설치

• Styled Components 설치

3. 화면 작성

• App 내부에 Navigation bar를 위한 Nav를 설정
• src/components/Nav.js

import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';

export default function Nav() {
  return (
    <NavStyle>
      <NavLink to={'/'}>홈</NavLink>
      <NavLink to={'/about'}>소개</NavLink>
      <NavLink to={'/login'}>로그인</NavLink>
    </NavStyle>
  );
}

// styled components -> 태그에 css를 부여해서 스타일 지정 가능
const NavStyle = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: lightgray;
  padding: 10px;
`;

// 내가 만들었거나 외부 태그는 괄호 안에 넣어서 서식
const NavLink = styled(Link)`
  margin-right: 10px;
  text-decoration: none;
`;

• App.js

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import './App.css';
import Nav from './components/nav';
import Home from './pages/home';
import About from './pages/about';
import Login from './pages/login';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/login" element={<Login />} />
      </Routes>

      <hr />
      <Nav />
      <h1>Body</h1>
    </BrowserRouter>
  );
}

export default App;

• React도 화면에서 상태를 관리할 수 있음
• /pages/home.js

import React, { useState } from 'react';

export default function Home() {
  const [num, setNum] = useState(0);
  console.log('rendered');

  function add() {
    let newNum = num + 1;
    setNum(newNum);
  }
  function minus() {
    let newNum = num - 1;
    setNum(newNum);
  }

  return (
    <div>
      <div>상태관리연습</div>
      <div>{num}</div>
      <button onClick={add}>+1</button>
      <button onClick={minus}>-1</button>
      <hr />
    </div>
  );
}

• 주소 이동 시 body를 넘길 수 있음

• App.js

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import './App.css';
import Nav from './components/Nav';
import Home from './pages/Home';
import About from './pages/About';
import Login from './pages/Login';
import Design from './pages/Design';

function App() {
  return (
    <BrowserRouter>
      <Nav />
      <hr />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/login" element={<Login />} />
        <Route
          path="/design"
          element={<Design user={{ id: 1, username: 'cos' }} />}
        />
      </Routes>
      <h1>Body</h1>
    </BrowserRouter>
  );
}

export default App;

• /pages/Design.js

import React from 'react';
import styled from 'styled-components';

export default function Design(props) {
  const { user } = props;

  return (
    <div>
      {user.username == 'ssar' ? (
        <MyBlueBox>ssar</MyBlueBox>
      ) : (
        <MyRedBox>cos</MyRedBox>
      )}
      <MyBox user={user} title={'제목1'}>
        유저네임 : {user.username}
      </MyBox>
    </div>
  );
}

const MyRedBox = styled.div`
  color: red;
`;

const MyBlueBox = styled.div`
  color: blue;
`;

const MyBox = styled.div`
  color: ${props => (props.user.username == 'ssar' ? 'blue' : 'red')};
`;

• /pages/About.js

import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';

export default function About() {
  const [count, setCount] = useState(10);
  const [number, setNumber] = useState(500);
  const navigate = useNavigate();

  useEffect(() => {
    console.log('useEffect 실행됨');

    // cleanup (상태 삭제 시 실행행)
    return () => {
      console.log('useEffect 종료됨');
    };
  }, [count, number]);

  function addCount() {
    setCount(count + 1);
  }
  function addNumber() {
    setNumber(number + 1);
  }
  function moveLogin() {
    navigate('/login');
  }
  function moveInfo() {
    navigate('/info/10/good/20?page=5');
  }

  return (
    <div>
      <h1>{count}</h1>
      <h1>{number}</h1>
      <button onClick={addCount}>카운트 증가</button>
      <button onClick={addNumber}>넘버 증가</button>
      <button onClick={moveLogin}>로그인 페이지 이동</button>
      <button onClick={moveInfo}>인포 페이지 이동</button>
    </div>
  );
}

• PathVariable, QueryString을 넘겨 처리할 수도 있음
• /pages/Info.js

import React from 'react';
import { useParams, useSearchParams } from 'react-router-dom';

export default function Info() {
  const { id, goodId } = useParams();
  const [searchParams, setSearchParams] = useSearchParams();

  let page = searchParams.get('page');

  return (
    <div>
      <h1>{id}</h1>
      <h1>{goodId}</h1>
      <h2>{page}</h2>
    </div>
  );
}

• App.js

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import './App.css';
import Nav from './components/Nav';
import Home from './pages/Home';
import About from './pages/About';
import Login from './pages/Login';
import Design from './pages/Design';
import Info from './pages/Info';

function App() {
  return (
    <BrowserRouter>
      <Nav />
      <hr />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/login" element={<Login />} />
        <Route path="/info/:id/good/:goodId" element={<Info />} />
        <Route
          path="/design"
          element={<Design user={{ id: 1, username: 'cos' }} />}
        />
      </Routes>
      <h1>Body</h1>
    </BrowserRouter>
  );
}

export default App;