React에서 쿠키 설정

Irakli Tchigladze 2023년6월21일
  1. 반응의 쿠키
  2. React의 쿠키 구조
  3. React에서 쿠키 설정
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 후크를 사용하여 구성 요소가 마운트, 마운트 해제될 때 또는 업데이트될 때마다 쿠키를 설정할 수 있습니다.

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

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn