useContext()

Start-Up 프로젝트를 진행하면서 컴포넌트 사이의 데이터 전송이 필요했다.
사전에 생성했던 FuncList.tsx 컴포넌트의 click state값을 새로 생성한 SubDataList.tsx에 전달해보자.

먼저 데이터는 json형식으로 파일에 따로 저장했다.

{
    "script" : [[{
        "Daily" : [
            {"id" : 1, "text" : "안녀하세요. 처음 뵙겠습니다."},
            {"id" : 2, "text" : "서울역은 어디에 있나요?"},
            {"id" : 3, "text" : "화장실은 어디로 가야하나요?"},
            {"id" : 4, "text" : "이건 테스트 텍스트입니다."}
        ]}],
        [{"Business" : [
            {"id" : 1, "text" : "안녀하세요. 처음 뵙겠습니다."},
            {"id" : 2, "text" : "서울역은 어디에 있나요?"},
            {"id" : 3, "text" : "화장실은 어디로 가야하나요?"},
            {"id" : 4, "text" : "이건 테스트 텍스트입니다."}
        ]}],
        [{"Movie" : [
            {"id" : 1, "text" : "안녀하세요. 처음 뵙겠습니다."},
            {"id" : 2, "text" : "서울역은 어디에 있나요?"},
            {"id" : 3, "text" : "화장실은 어디로 가야하나요?"},
            {"id" : 4, "text" : "이건 테스트 텍스트입니다."}
        ]}],
        [{"Drama" : [
            {"id" : 1, "text" : "안녀하세요. 처음 뵙겠습니다."},
            {"id" : 2, "text" : "서울역은 어디에 있나요?"},
            {"id" : 3, "text" : "화장실은 어디로 가야하나요?"},
            {"id" : 4, "text" : "이건 테스트 텍스트입니다."}
        ]}]
    ]
}

해당 파일은 실제 데이터를 핸들링하기 전에 프로토타입 형식으로 테스트 데이터만 담아 만든 json파일이다.
이를 추출하여 데이터를 사용자에게 노출할 것이다.

기존 FuncList 컴포넌트이다.

/* eslint-disable */
import React, { useState } from 'react';
import './FuncList.css';
import data from '../../jData/categoryData.json';
import {Simulate} from "react-dom/test-utils";
import click = Simulate.click;

export default function FuncList(){

    const [hover, setHover] = useState([0, 0, 0, 0, 0]);
    const [click, setClick] = useState([0, 0, 0, 0, 0]);

    function ChangeHover(s : number, index : number){
        hover[index] = s;
        setHover([...hover]);
    }

    function ChangeClick(index : number){
        click[index] = click[index] ? 0 : 1;
        for(let i=0; i<click.length; i++){
            if(i !== index){
                click[i] = 0;
            }
        }
        console.log(click);
        setClick([...click]);
    }

    function pStyle(i : number){
        let obj = {
            transition: '0.5s',
            color: hover[i] || click[i] ? 'white' : '#0554F2',
        }
        return obj;
    }

    function spanStyle(i : number){
        let obj = {
            transition: '0.5s',
            height: hover[i] || click[i] ? '100%' : '1px',
        }
        return obj;
    }

    return(
        <div className='listWrap'>
            <ul>
                {data.property.map((item : any, i : number) => (
                    <li key={item.id}  onMouseOver={()=>{ChangeHover(1, i)}} onMouseOut={() => ChangeHover(0, i)}
                    onClick={()=>ChangeClick(i)}>
                        <p style={pStyle(i)}>{item.title}</p>
                        <span style={spanStyle(i)}></span>
                    </li>
                ))}
            </ul>
        </div>
    )
}

FuncList의 click state는 클릭된 리스트의 해당 인덱스의 값을 0에서 1로 변경한다. 첫번째 인덱스인 Daily를 클릭한다면 click state의 0번째 값이 1로 변경되고 나머지 인덱스는 0으로 초기화한다.
이 state의 값을 SubDataList로 전달하여 FuncList의 click이 변경되면 위 이미지에 보이는 Content 공간에 해당 인덱스에 맞는 json값들을 노출할 것이다.