React에서 쿠키 설정

React 개발자는 애플리케이션의 효율성과 속도를 개선하여 사용자 경험을 개선하는 것을 목표로 합니다. 때로는 쿠키를 사용하여 큰 효과를 얻고 사용자에게 좋은 경험을 제공할 수 있습니다.

이 기사에서는 React에서 쿠키를 설정하는 방법을 보여줍니다.

반응의 쿠키

쿠키는 서버에 약간의 데이터를 저장하는 방법을 관리하는 데 도움이 되는 HTTP 코드 조각이므로 다음에 사용자가 웹사이트를 방문할 때 자동으로 사용할 수 있습니다.

예를 들어 이 정보는 사용자 이름, 이메일, 사용자의 장바구니 또는 검색 기록일 수 있습니다. 쿠키는 사용자가 이전 세션을 원활하게 재개하도록 도울 수 있습니다.

React는 단일 페이지 애플리케이션을 구축하는 데 사용됩니다. 데이터는 서버에서 로드되지 않으므로 쿠키를 React에 저장하는 사용자 지정 접근 방식을 구현해야 합니다.

JavaScript 기반 프레임워크를 다루고 있으므로 JavaScript에서 기본적으로 사용할 수 있는 문서 웹 인터페이스를 사용합니다.

React의 쿠키 구조

쿠키는 일반적으로 이름-값 쌍으로 구성됩니다. 예를 들어 다음 세션까지 사용자의 로그인을 기억하는 쿠키입니다.

document.cookie = `login=sample@gmail.com`

보시다시피 문서 인터페이스의 쿠키 속성을 사용하고 이를 이름-값 쌍과 동일하게 설정했습니다.

쿠키에는 만료 시기와 같은 기타 세부 정보가 포함될 수 있습니다. 매개변수를 지정하지 않으면 사용자가 브라우저를 닫으면 쿠키가 삭제됩니다.

JavaScript에서 여러 이름-값 쿠키 쌍을 설정하려는 경우 다음과 같이 세미콜론으로 구분하십시오.

document.cookie = `name=value; expires=expirationTime; path=domainPath`

React에서 쿠키 설정

실제 예를 살펴보겠습니다. 여기에는 React에 간단한 App 구성 요소가 있습니다.

export default function App() {
    const handleClick = () => {
        document.cookie = "username=admin";
        console.log(document.cookie);
    };
    return (
        <div className="App">
            <h1>Hello CodeSandbox</h1>
            <button onClick={() => handleClick()}>Set cookies</button>
        </div>
    );
}

이 예제에서는 handleClick() 메서드에서 쿠키를 설정하고 버튼을 클릭하여 시작합니다. 또는 수명 주기 메서드 또는 useEffect 후크를 사용하여 구성 요소가 마운트, 마운트 해제될 때 또는 업데이트될 때마다 쿠키를 설정할 수 있습니다.

이 라이브 데모에서 직접 쿠키를 설정할 수 있습니다. 새 탭에서 미리보기를 열어야 합니다. 그렇지 않으면 콘솔에서 업데이트된 쿠키를 볼 수 없습니다.