🟦 [React] 지역변수를 전역변수로 만들고 싶을 때

해당 함수 내에서 뿌려주고 있는 result를 전역에서 쓰고 싶은데 어떻게 해야되지?

 

=> useState 나 useRef 사용!

 

✔ useState : 렌더링하면서 UI 반영

✔ useRef : 렌더링할 필요 없이 전역에서만 참조 (UI 미반영)

// 전역에서 사용하기 위해 만든 useState
const [filteredResult, setFilteredResult] = useState("");

const handleSearch = () => {
    const keyword = searchInpRef.current.value.toLowerCase();

    if (!searchInpRef.current || keyword.trim() === "") return;

    setSearchTerm(keyword);
    const filteredData = extractedValues[activeTab].map(tab =>{
        const filteredTab = tab.filter(data =>
            JSON.stringify(data).toLowerCase().includes(keyword)
        );
        return filteredTab.length > 0 ? filteredTab : null; // 빈배열은 나오지 않게
    }).filter(tab => tab !== null); // null 값은 제외하고 필터링

    // 검색 결과가 있는 데이터 배열만 필터링
    const result =  extractedValues[activeTab].filter(data => data.some(value => value.includes(keyword)));

	// 전역변수로 사용할 수 있게 대입
    setFilteredResult(result); 
}

// 전역에서 사용
console.log("setFilteredResult:", setFilteredResult);

👩🏻 여기서 setFilteredResult의 개수를 알고 싶다?

=> setFilteredResult는 함수이기 때문에 해당 useState의 값인 filteredResult를 이용해 filteredResult.length를 찍어야함!

 

 

 

728x90

 

🟦 [React] console.log가 setFilteredResult: function () { [native code] } 이렇게 뜰 때