[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 4주차 - React (2)

create-react-app (초기 설정)

react 프로젝트 자동 설치 명령어 - webpack, babel, jest 자동 설치 가능

npx create-react-app my-app('앱 이름')

src 폴더 내의 jsconfig.json 파일 추가

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "includes": ["src"]
}

모듈 CSS 적용

파일 명 ⇒ 컴포넌트명.module.css ex) Navigation.module.css

//컴포넌트 파일에서 불러오기
import styles from "styles/Navigation.module.css"

const Navigation = () => {
  return (
		//적용할 때 중괄호로 스타일링
    <nav className={styles.navigation}>
        <ul>
            <li>HOME</li>
            <li>ABOUT</li>
        </ul>
    </nav>
  )
}

export default Navigation

/* Navigation.modele.css 파일 */
.navigation {
    display: flex;
    justify-content: center;
    background-color: black;
}

react-router-dom 활용 Router 기능 사용

설치

npm install react-router-dom

적용

임포트

import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';

App.js 라우터 구조 작성

function App() {
  return (
      <Router>
        <Navigation />
          <Routes>
            <Route path="/" element={<Home />}/>
            <Route path="/about" element={<About />}/>
            <Route path="/profile" element={<Profile />}/>
          </Routes>
        <Footer />
      </Router>
      
  );
}

export default App;

Link태그 ⇒ <a> 태그와 비슷한 역할

const Navigation = () => {
  return (
    <nav className={styles.navigation}>
        <ul>
            <li>
                <Link to="/">HOME</Link>
            </li>
            <li>
                <Link to="/about">ABOUT</Link>
            </li>
        </ul>
    </nav>
  )
}

<a> 태그를 쓰지 않는 이유 ⇒ 페이지가 새로고침 되기 때문에 상태가 모두 초기화 된다!

useNavigate

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

const About = () => {
  const navigate = useNavigate();
  const [place, setPlace] = useState("");
  const onChange = (event) => {
      setPlace(event.target.value);
  }

  const onSubmit = (event) => {
    event.preventDefault();
    navigate(`/search?query=${place}`)
  }

  return (
    <div>
      <h1>about</h1>
      <form onSubmit={onSubmit}>
        <input type="text" value={place} onChange={onChange} placeholder="여행가고 싶은 지역"></input>
        <button type="submit">검색</button>
      </form>
    </div>
  )
}

export default About

useNavigate() 로 navigate 객체 가져오기

navigate(’라우터 path’) → 해당 라우터 Path로 브라우저를 이동시킬 수 있다.

⇒ 외부 Http 주소도 가능

useLocation

LInk를 통해 해당 컴포넌트를 호출 할 시 전달 받은 state를 활용할 수 있다.

import React from 'react'
import { useLocation } from 'react-router-dom'

const SearchResults = () => {
    const location = useLocation()
    const queryParams = new URLSearchParams(location.search)
    const query = queryParams.get(queryParams);
  return (
    <div>
        <h1>검색결과</h1>
        <h2>{query}</h2>
    </div>
  )
}

Movie App 만들어보기

github : https://github.com/Sehannnnnnn/Movie_APP