서브 컴포넌트 간 데이터 전달(useNavigate,useLocation)

이번에 구현할 기능은 더보기 클릭 시 해당 데이터가 나오는 구조!
일단 클릭 시 다른 컴포넌트로 이동하기 때문에 새 컴포넌트인 requestPopUp.js를 생성하고 App.js에 등록한다.
여기에 등록하지 않으면 useNavigate로 해당 컴포넌트 이동이 불가능하다!

src/App.js

import RequestPopUp from './components/RequestPopUp';
 <Route path="/RequestPopUp" element={<RequestPopUp />} />

1. useNavigate로 더보기 버튼 클릭 시 해당 컴포넌트로 이동하기

src/components/notification.js

import {React,useNavigate} from 'react-router-dom'
const navigate = useNavigate();
const requestList = () => {
        navigate('/RequestPopUp'); // 상대 경로로 작성하면 인식이 어렵기 때문에 절대 경로로 지정한다.
    }
    
<button className="more_btn" onClick={requestList}>
     <img src={moreIcon} alt="더보기" />
</button>

2. useNavigate로 데이터 전달하기 (notification -> requestPopUp)

기본 형식

const 변수명 = (data) => {
navigate{ state: { 전달할 데이터 } }
}

src/components/notification.js

const requestList = (type) => {
        navigate('/RequestPopUp',  { state: { type } }); // type 전달
    }

3. useLocation으로 데이터 받기

const location = useLocation();
const 변수명 = location.state?.데이터값

src/components/requestPopUp.js

import { useNavigate, useLocation } from "react-router-dom";
const location = useLocation();
const type = location.state?.type || '';
// type 값이 undefined나 null 일 경우 발생할 오류를 방지하여 빈 문자열 ''생성
값이 있으면 type, 없으면 빈 문자열 반환

4. 팔로우와 가입 요청 안의 데이터 생성

const requests = [
        {
            type: "req_follow",
            text: "팔로우 요청",
            nicknames: ["heeseung_lee", "nisimura_niki", "jungwon_o"], // 중복된 키가 나올 경우 키: [,,,]로 선언
        },
        {
            type: "req_join",
            text: "가입 요청",
            nicknames: ["jongsoong", "jake_sim", "sunooo_o","sunghoony"],
        },
    ];

5. notification에서 전달받은 type 값에 맞는 데이터 찾기 find()

const selectedRequest = requests.find((request) => request.type === type);

6. 각 타입에 맞는 데이터 렌더링하기

{selectedRequest ? () : ()} // type과 동일한 데이터면 렌더링 아니면 괄호 안의 값 전달

{/* type에 맞는 요청이 존재할 경우만 렌더링 */}
                {selectedRequest ? (
                    <div className="follow_cont">
                         <button className="back_btn" onClick={historyBack}>
                    <img src={arrowBack} alt="돌아가기" />
                </button>
                        <h3>{selectedRequest.text}</h3>
                        {selectedRequest.nicknames.map((nickname, index) => (
                            <div className="follow_box1" key={index}>
                                <p className="nickname">{nickname}</p>
                                <div className="follow_btn_wrap">
                                    <button className="accept_btn">Accept</button>
                                    <button className="reject_btn">Reject</button>
                                </div>
                            </div>
                        ))}
                    </div>
                ) : (
                    <p>요청된 데이터가 없습니다.</p>
                )}

보통 컴포넌트 간 데이터는 부모-자식 속성은 props나 event로 전달하는데 이와 관련없는 데이터끼리는 useNavigate와 useLocation을 사용해서 전달할 수 있다고 한다. 이제 map을 통한 새 배열 생성은 조금 익숙해진 것 같은데 아직 조건부 렌더링은 많이 어렵다..ㅎ 화이팅,,?