데일리과제 (6) useref, Cookie의 MaxAge, Expires

useRef가 필요한 상황을 예시를 들어 설명해주세요
Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해주세요.

useref

React에서 useRef는 DOM 노드나 다른 요소에 직접적으로 접근할 수 있는 방법을 제공합니다. 이를 사용하는 주요한 이유 중 하나는 React 컴포넌트의 상태(state) 변경 없이 DOM을 조작해야 할 때입니다. 아래는 useRef가 유용한 몇 가지 예시입니다.

State의 변화 -> 렌더링 -> 컴포넌트 내부 변수들이 초기화
Ref의 변화 -> No 렌더링 -> 변수들의 값이 유지됨

• 포커스 관리
  useRef를 사용하여 포커스 관리를 할 수 있습니다. 예를 들어, 모달 창이 열렸을 때, 모달 창 안에 있는 input 요소에 포커스를 주고 싶다면 useRef를 사용하여 해당 input 요소를 참조합니다. 그리고 모달 창이 닫힐 때 해당 input 요소의 포커스를 제거할 수 있습니다.

• 외부 라이브러리와 상호작용
  외부 라이브러리와 상호작용할 때도 useRef를 사용할 수 있습니다. 예를 들어, 구글 지도를 React 애플리케이션에서 사용하려면 useRef를 사용하여 지도 객체를 참조하고, 해당 객체의 메소드를 호출하여 지도를 조작할 수 있습니다.

• 애니메이션 관리
  useRef를 사용하여 애니메이션 관리를 할 수 있습니다. 예를 들어, 특정 요소를 애니메이션으로 이동시키기 위해서는 useRef를 사용하여 해당 요소의 위치를 참조하고, 애니메이션을 적용하는 함수에서 해당 요소의 위치를 변경할 수 있습니다.

• 이전 값 저장
  useRef를 사용하여 이전 값을 저장할 수 있습니다. 예를 들어, input 요소에 사용자가 입력한 값을 저장하는 함수에서 useRef를 사용하여 이전 값과 현재 값을 비교하여 변경이 있을 때만 서버에 저장하도록 할 수 있습니다.

예시

Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해주세요.

Cookie:

• HTTP 쿠키는 클라이언트 측에서 유지되는 작은 데이터 파일입니다.
• 쿠키는 일반적으로 웹 사이트에서 사용자를 추적하거나 사용자의 활동을 기록하는 데 사용됩니다.
• HTTP 쿠키에는 MaxAge와 Expires라는 두 가지 유효 기간 옵션이 있습니다.

MaxAge:

• 쿠키가 유효한 시간을 초 단위로 지정합니다.
• 예를 들어, MaxAge가 3600이면 쿠키가 생성된 후 1시간 동안 유효합니다.
• 이 옵션은 Expires보다 우선합니다.

Expires:

• 쿠키가 만료되는 날짜 및 시간을 UTC(GMT)로 지정합니다.
  이 옵션은 브라우저가 쿠키를 삭제하기 전에 쿠키가 살아남을 기간을 결정하는 데 사용됩니다.
• 만료 날짜가 지난 쿠키는 더 이상 사용되지 않으며 브라우저에서 삭제됩니다.