FR_page.8

산불 페이지에서 유용한 정보를 넣는 것이 좋다고 생각했다.
그래서 메인 페이지에 지역별 나무의 분포를 넣기로 결정했다.

위의 정보는 산림 통계 시스템에서 제공하는 "수종별 산림면적 및 임목축적" 데이터를 다운받아, csv파일로 만들어 준 다음 그 파일을 불러와서 정보를 제공하도록 했다.

useEffect(() => {
    fetch("/forest_data.csv")
    .then((response) => response.text())
    .then((text) => {
        Papa.parse(text, {
        header: true,
        skipEmptyLines: true,
        complete: (result) => {
            setData(result.data);
            console.log("!!!!!!!!!!!!!",result.data); // 데이터 확인
        },
        });
    });
}, []);

일단, csv파일을 pulic에 저장해두었다.
fetch를 통해 지정된 경로로 데이터를 가져왔다. (public에 저장을 해야 정상적으로 접근이 가능하다.)
csv파일의 내용을 text형태로 변환하고, Papa.pares를 통해 json형식으로 변환했다.

😯Papa.parse는 csv를 json으로 변환하기 쉽게 도와주는 라이브러리이다.

첫 번째 행을 컬럼명으로 사용하기 위해, header : true로 설정해주었다.
빈 줄을 무시하는 코드는, skipEmptyLines : true로 설정해주면 된다.

이렇게 완료가 되면, setData를 통해 결과를 data에 저장해준다.

const getRegionData = (selectedRegion) => {
    const regionData = data.find((row) => row[" 지역 "] === selectedRegion);
    if (!regionData) return [];

    // 합계를 숫자 형태로 변환
    const total = parseInt(regionData[" 합계 "].replace(/,/g, ""), 10);

    return [
        { tree: " 소나무 ", percent: ((parseInt(regionData[" 소나무 "].replace(/,/g, ""), 10) / total) * 100).toFixed(1) },
        { tree: " 잣나무 ", percent: ((parseInt(regionData[" 잣나무 "].replace(/,/g, ""), 10) / total) * 100).toFixed(1) },
        { tree: " 낙엽송 ", percent: ((parseInt(regionData[" 낙엽송 "].replace(/,/g, ""), 10) / total) * 100).toFixed(1) },
        { tree: " 리기다 ", percent: ((parseInt(regionData[" 리기다 "].replace(/,/g, ""), 10) / total) * 100).toFixed(1) },
        { tree: " 편백나무 ", percent: ((parseInt(regionData[" 편백나무 "].replace(/,/g, ""), 10) / total) * 100).toFixed(1) },
        { tree: " 기타침엽수 ", percent: ((parseInt(regionData[" 기타침엽수 "].replace(/,/g, ""), 10) / total) * 100).toFixed(1) }
    ];
};

선택한 지역의 나무 분포를 가져오기 위해 getREgionData 변수를 선언했다.
나무의 분포를 %로 표현해주었다.

<h2 className="text-2xl font-bold mb-4">🌲 지역별 나무 분포</h2>

{/* 지역 선택 드롭다운 */}
<select style={{marginBottom: 5}}onChange={(e) => setRegion(e.target.value)} className="border p-2">
    <option value="">지역 선택</option>
    {data.map((item, index) => (

    <option key={index} value={item[" 지역 "]}>
        {item[" 지역 "]}
    </option>
    ))}
</select>
{region && (
    <div>
    {getRegionData(region)?.map((item, index) => (
        <p key={index} className="text-lg font-bold text-green-700">
        🌳 {item.tree}: {item.percent}%
        </p>
    ))}
    </div>
)}

지역을 선택하는 드롭 다운을 표현해주고, data를 map을 통해 순환하며 드롭 다운 선택지에 지역을 넣게 했다. 지역을 선택하면 setRegion을 통해 region을 저장해주고 선택됐을 때, getRegionData를 받아와 나무의 분포를 표시하도록 해주었다.