[React] 컴포넌트에 데이터 숨기는 방법

React 컴포넌트에 데이터 숨기는 방법

웹 개발을 하다보면 특정 element에 데이터를 저장하고 싶을 때가 있습니다.
이 경우 HTML5 에서 제공해주는 data-* 를 사용하면 됩니다.

데이터 저장하기

user 정보를 div에 저장하는 방법을 알아보겠습니다.

const userInfo = {
    id: 1,
    name: "John",
    age: 17
}

const User = () => {
    return <div data-user={JSON.stringify(userInfo)}>User</div>
}

위처럼 data-user 에 정보를 저장할 수 있습니다.
이름은 data-* 로 *에 원하는 문자열을 입력해주면 됩니다.

데이터 가져오기

데이터를 저장했으면 가져와야 합니다.
가져오는 방법도 간단합니다.

const User = () => {
    return <div data-user={JSON.stringify(userInfo)} onClick={(e) => {
        const dataUser = e.target.getAttribute("data-user");
        const userInfo = JSON.parse(dataUser);
        console.log(userInfo)
    }}>User</div>
}

위처럼 getAttribute 함수를 사용하여 쉽게 가져올 수 있습니다.

data 속성을 알고 있으면 생각보다 유용하게 사용하실 수 있습니다.
장점으로는 내가 원하는 데이터를 원하는 element에 심어둘 수 있다는 것입니다.
단점으로는 해당 데이터의 type을 알 수 없기 떄문에 type checking을 꼭 해주어야 합니다.

data 속성을 많이 사용한 곳을 확인해보고 싶으시면 mui 컴포넌트를 확인하시면 됩니다.
mui 홈페이지에 들어가셔서 F12를 누르시고 마크업 구조를 확인해보시면 됩니다.

참고문헌

• data-attribute

반응형

'공유 > React, Next' 카테고리의 다른 글

NextJS 페이지 라우터에서 모든 페이지 라우트 확인하는 방법  (0)	2024.10.16
Next에서 특정 페이지에 사용자가 머무는 시간 측정 방법  (1)	2024.10.16
[React] Context API vs Zustand 렌더링 비교  (0)	2024.09.10
[React] children 개수 확인하는 방법  (0)	2024.06.24
[React] React 컴포넌트에서 Generic 사용하기  (0)	2024.03.19