[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프(프론트엔드) 10회차

🔥 실습

https://github.com/udemy-team18/practice/tree/yueun/0626/practice0626

GitHub - udemy-team18/practice: 유데미 x 스나이퍼 팩토리 10주 완성 프로젝트 부트캠프 18팀 실습 저장소

유데미 x 스나이퍼 팩토리 10주 완성 프로젝트 부트캠프 18팀 실습 저장소. Contribute to udemy-team18/practice development by creating an account on GitHub.

github.com

📖 배운 점

1. useNavigate

페이지 이동을 할 수 있게 해주는 함수를 반환한다.

반환하는 함수를 navigate 변수에 저장하고 navigate의 인자인 path값을 주면 해당 경로로 이동한다.

일반적으로 사용자 이벤트 핸들러 또는 비동기 작업 완료 후에 특정 경로로 이동할 때 유용하다.
Link와의 차이점은 함수 호출로 페이지 이동을 하므로 특정 조건을 충족할 경우 페이지 이동을 한다.

Link : 클릭하면 바로 다른 페이지로 이동하는 로직을 구현할 때 (ex. 메인 페이지에서 상세 페이지로 이동)

useNavigate : 페이지 이동 시 추가로 처리해야 하는 로직이 있을 때 (ex. 가입 안 한 사용자는 회원가입 페이지로 이동)

const Profile = () => {
    const navigate = useNavigate();

    return (
      <div>
        <div onClick={() => navigate(-1)}>뒤로가기</div>
      </div>
    );
  };

2. useParams

URL 매개변수를 추출하는 데 사용되며 URL에 동적으로 변하는 값을 전달할 때 유용합니다.

예를 들어 쇼핑몰 메인 페이지에서 여러 값을 렌더링하고 클릭한 것만 렌더링 시킬 때 다 onclick을 사용하는 것보다 useParams를 사용하는 것이 효율적이다.

function App() {
    return (
      <Router>
        <Routes>
          <Route path="/profiles/:username" element={<Profile />} />
        </Routes>
      </Router>
    );
  }


  const profileData = {
    yunie: {
      id: 1,
      name: "yueunkim",
      des: "리액트 공부",
    },
  };


  const Profile = () => {
    const { username } = useParams();
    const profile = profileData[username];

    return (
      <div>
        <h3>
          {profile.name} : {username}는 어떤 사람?
        </h3>
        <p>{profile.des}</p>
      </div>
    );
  };

3. useLocation

현재 페이지의 URL과 관련된 정보를 담고 있는 location 객체를 반환한다.

주요 속성은 다음과 같다.

pathname: 현재 페이지의 경로를 나타낸다. 예를 들어, /home, /about, /products 등의 값을 가질 수 있다.
search: 현재 페이지의 쿼리 문자열을 나타낸다. 예를 들어, ?id=123&category=books와 같은 형식의 문자열이 할당될 수 있다.
hash: 현재 페이지의 해시(Hash) 값을 나타낸다. 예를 들어, #section1, #section2와 같은 값이 할당될 수 있다.
state: 현재 페이지의 상태를 나타내는 객체다. 이전 페이지에서 history 객체의 push 또는 replace 메소드를 사용하여 현재 페이지로 이동할 때 추가한 상태 정보가 할당된다.

const SearchResults = () => {
    const location = useLocation();
    const queryParams = new URLSearchParams(location.search);
    const query = queryParams.get("query");
    useEffect(() => console.log(query), [query]);

    return (
      <div>
        <h1>검색결과</h1>
        <h3>검색어 : {query}</h3>
      </div>
    );
  };

  export default SearchResults;

4. Footer.css VS Footer.module.css

리액트에서 css를 가져올 때 다음과 같이 두 가지 방법이 있다.

1. Footer.css

import  "../styles/css/Footer.css";

일반적인 CSS 파일로 전역적으로 스타일을 정의하고 해당 스타일이 모든 요소에 적용된다.

따라서 스타일이 중첩될 수 있다는 문제가 있다.

<footer className="footer">

2. Footer.module.css

파일명 뒤에 .module이 붙는 경우는 다음과 같은 형태로 import를 해와야 한다.

import styles from "../styles/css/Footer.module.css";

그리고 Footer.module.css 파일에서 footer클래스에 css 속성을 부여하고 저장한다면 footer 태그에는 다음과 같이 className이 들어간다.

<footer className={styles.footer}>

이 방법은 보통 CSS 모듈로 불리는 방식이다.

컴포넌트 범위에서 스타일을 정의하고, 해당 스타일이 해당 컴포넌트 내에서만 적용된다.

CSS 클래스 이름을 고유한 값으로 변환하여 스타일이 격리되도록 하는 것이다.

CSS 모듈은 스타일 이름 충돌을 방지하고 컴포넌트 단위로 스타일을 관리한다는 장점이 있다.

또한, 스타일을 동적으로 조작하고 클래스 이름을 동적으로 생성할 수 있는 기능을 제공하여 React 컴포넌트와 함께 유연한 스타일링을 할 수 있게 해준다.

🔎 느낀 점

react-creat-app을 통해 기본적인 리액트 실습을 하면서 예전에 공부했던 것들을 다시 복습할 수 있었다.

컴포넌트명은 항상 맨 앞이 대문자이고, 페이지를 이동할 때는 페이지를 새로고침하는 a태그가 아닌 react-router-dom에서 제공하는 Link를 사용해야하는 등 잊고있던 것들을 다시 되새겼다.

초급 수준의 공부만 했었던지라 useNavigate, useParams, useLocation은 오늘 처음 접했다.

useState, useEffect에 이어 오늘 배운 3가지도 기억해야겠다.

—————————————————————————————————————————
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
—————————————————————————————————————————

티스토리