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 is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn