에어비앤비 클론 코딩 - useNavigate와 useLocation

Problem 

버튼을 클릭했을 때 빨간 오류문이 보이기

 

First - Solve

useEffect(()=>{
      if(phoneNum.length<1){
        setisConfirm(true);
        return
      }
  })

useEffect를 이용해 조건문을 만들고 

 

텍스트에 조건을 넣었다.

{isConfirm ? "전화번호는 필수 항목입니다.":"전화나 문자로 전화번호를 확인하겠습니다. 일반 문자 메시지 요금 및 데이터 요금이 부과됩니다."}

 

이렇게 하니 초기 세팅값부터 true값이 되어있다.

맨 처음부터 숫자 입력란 길이를 세는 것이었다.

 

Second -Solve

useEffect가 아닌 function함수로 만들어주었다.

 

그 후 버튼에 이 function함수를 넣어주었다.

 <div className="lm2btn" onClick={click}>

 

그러니 버튼을 누를 때 함수가 작동한다!

 

 

 

---

 

Issue

홈화면 장소와 별점을 상세페이지로 이동시키기

 

First - Solve

 useNavigate와  useLocation 사용하기

 

React Router의 useNavigate 훅 이해하기

React Router는 React 애플리케이션에서 네비게이션 및 라우팅을 담당하는 강력한 라이브러리이다. useNavigate 훅은 React Router v6에서 소개된 훅으로, 페이지 간 이동을 위한 함수를 제공한다.

1. useNavigate 훅 소개

useNavigate 훅은 현재 페이지에서 다른 페이지로 이동할 수 있는 함수를 반환한다.

이 함수를 사용하여 버튼 클릭, 상태 변경 또는 다른 사용자 액션에 따라 페이지를 전환할 수 있다.

2. React 컴포넌트에 useNavigate 훅 적용하기

useNavigate를 적용하는 과정은 다음과 같다.

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

function NavigationComponent() {
  // 1. useNavigate 훅 사용
  const navigate = useNavigate();

  // 2. 클릭 이벤트 핸들러 정의
  const handleNavigation = () => {
    // 3. useNavigate를 호출하여 페이지 이동
    navigate('/new-page');
  };

  // 4. 렌더링 - 버튼 클릭 시 페이지 이동
  return (
    <div>
      <p>다른 페이지로 이동하려면 아래 버튼을 클릭하세요.</p>
      <button onClick={handleNavigation}>새 페이지로 이동</button>
    </div>
  );
}

export default NavigationComponent;

1. useNavigate 훅 사용: react-router-dom에서 useNavigate를 가져와 사용한다.
2. 클릭 이벤트 핸들러 정의: 페이지 이동을 수행할 클릭 이벤트 핸들러 함수를 정의한다.
3. useNavigate를 호출하여 페이지 이동: 클릭 이벤트 핸들러 내에서 navigate 함수를 호출하여 원하는 경로로 페이지를 이동한다.
4. 렌더링 - 버튼 클릭 시 페이지 이동: 컴포넌트를 렌더링하고, 버튼 클릭 시 이동할 수 있는 사용자 인터페이스를 구성한다.

위 개념을 이용해 내 프로젝트에 적용했다.

const onClicknav = () => {
        navigate("/menuinfo", {state: place})
    }
    console.log(place);

 

로그값이 잘 나온다.

근데 내가 보내야 할 것은 첫번째 place만이다.

 

또한 받아야 할 곳에 null 값이 찍힌다.

 const { state } = useLocation();
    console.log(state);

 

useLocation을 이용해 url이 변할때 마다 상태값을 업데이트하는 방법에 대해 공부해보았다.

 

React Router의 useLocation 훅 이해하기

React Router는 React 애플리케이션에서 네비게이션과 라우팅을 가능케 하는 라이브러리 중 하나이다.

그 중에서도 useLocation은 현재 URL에 대한 정보에 접근할 수 있게 해주는 유용한 훅 중 하나이다.

 useLocation을 사용하여 URL이 변경될 때마다 상태를 업데이트하는 방법을 살펴보자.

1. useLocation 소개

useLocation 훅은 현재 위치 객체에 접근할 수 있게 해준다.

현재 위치 객체에는 pathname, search, hash, state, key 등의 프로퍼티가 있다.

이 중에서도 이 예제에서는 현재 URL의 경로를 나타내는 pathname 프로퍼티에 중점을 둘 것이다.

2. React 컴포넌트 설정하기

먼저, useLocation을 사용하여 URL의 변경을 추적하는 React 컴포넌트를 설정해보자.

또한 useEffect 훅을 사용하여 URL이 변경될 때 컴포넌트 상태를 업데이트하는 등의 부수 효과를 처리한다.

 

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

function MyComponent() {
  // 1단계: 현재 위치 객체에 접근
  const location = useLocation();

  // 2단계: 현재 경로를 추적할 상태 설정
  const [currentPath, setCurrentPath] = useState(location.pathname);

  useEffect(() => {
    // 3단계: URL 변경 시 상태 업데이트하는 이벤트 리스너 설정
    const handlePathChange = () => {
      setCurrentPath(location.pathname);
    };

    // 4단계: 초기 URL 값으로 상태 초기화
    setCurrentPath(location.pathname);

    // 5단계: URL 변경을 감지할 이벤트 리스너 추가
    window.addEventListener('popstate', handlePathChange);

    // 6단계: 컴포넌트가 언마운트될 때 이벤트 리스너 정리
    return () => {
      window.removeEventListener('popstate', handlePathChange);
    };
  }, [location.pathname]);

  // 7단계: 현재 경로를 사용하여 컴포넌트 렌더링
  return (
    <div>
      <p>현재 경로: {currentPath}</p>
      {/* 여기에 추가적인 렌더링 로직을 추가할 수 있음 */}
    </div>
  );
}

export default MyComponent;

1. 현재 위치 객체에 접근: react-router-dom에서 useLocation을 가져와 사용하여 현재 위치 객체를 얻는다.
2. 현재 경로를 추적할 상태 설정: useState 훅을 사용하여 현재 경로를 저장할 상태 변수(currentPath)를 만든다.
3. URL 변경 시 상태 업데이트하는 이벤트 리스너 설정: URL이 변경될 때마다 상태를 현재 경로로 업데이트하는 함수(handlePathChange)를 정의한다.
4. 초기 URL 값으로 상태 초기화: 초기 값으로 현재 경로를 설정하여 컴포넌트가 마운트될 때 초기 상태를 설정한다.
5. URL 변경을 감지할 이벤트 리스너 추가: 'popstate' 이벤트를 감지하여 URL 변경을 처리할 이벤트 리스너를 등록한다.
6. 컴포넌트가 언마운트될 때 이벤트 리스너 정리: 컴포넌트가 해제될 때 이벤트 리스너를 정리하여 메모리 누수를 방지한다.
7. 현재 경로를 사용하여 컴포넌트 렌더링: 렌더링 부분에서 현재 경로를 표시다.

 

 

Second-Solve

Link를 통해 데이터 보내기

<Link to="/menuinfo" state={{place}} class="main_info_link"></Link>

 

받는 부분은 위와 똑같이 useLocation을 썼다.

 

하지만 이 또한 오류가 생긴다.

 

props.children에 관한 오류다.

 

내가 component안에 component로 복잡하게 여러겹 쌓여있어서 그런 것 같다.

 

받는 부분은 문제가 없는데 받는 장소가 거기면 안된다.

 

 

 

Third-Solve

 

그래서 받는 부분과 주는 부분, Link와  useLocation을 반복해서 넣었다.

 

하지만 에러가 발생한다.ㅠ

 

원인분석

console값은 잘 찍혔다.하지만 이 값을 그대로 랜더링하니까 생긴 문제였다.

 

 

Fourth-Solve

그래서 {state} 값으로 찍지 않고

{JSON.stringify(state.place)}

이렇게 찍었다.

값이 string으로 나올 수 있게 한 것이다.

 

그러니 오류가 나오지 않고 해결되었다!

하지만 쌍따옴표까지 같이 나온다.

 

{JSON.stringify(state.place)}

이런식으로 할 게 아니라

애초에 

{state.place}

 

이런식으로 불러오면 된다!

 

 

---

같은 방식으로 별점도 가져왔다

 

---

 

Issue

버튼을 눌렀을 때도, 그리고 실시간으로 입력란의 길이가 달라질 때도 계속 업데이트되게 하고 싶다!

 

 

현재는 입력하지 않은 채로 버튼을 누르면 빨간 오류문구가 뜬다.

 

대신 숫자를 입력해도 실시간으로 업데이트 되지 않는다.

 

Solve

방법은 간단했다.

useEffect로 같은 내용을 추가 해주면 실시간으로 반영되고 버튼을 눌렀을 때도 맞게 업데이트된다.

 

//  전화번호 공란
  useEffect(()=>{
      if(phoneNum.length<1){
        setisConfirm(true);
        setInputOn(true)
        return
      }
        setisConfirm(false);
        return
  })

  function click(){
    if(phoneNum.length<1){
      setisConfirm(true);
      setInputOn(true)
      return
    }
      setisConfirm(false);
      setInputOn(false);
      return
  }