[4/4] useRef 사용 예시, Cookie의 옵션 설정

useRef가 필요한 상황을 예시를 들어 설명해주세요

• useRef

  • .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환

    • Usage

      • ref를 통한 값 참조
        - ref 값 변경 시 리렌더링을 유발하지 않음 → 화면에 업데이트 시키지 않음
        - useState와 차이
        - 리렌더링 후에도 유실없는 정보 저장 가능 (렌더링 때마다 초기화되는 일반 변수들과 차이)

        let ref = useRef(0);
        
          function handleClick() {
            ref.current = ref.current + 1;
            alert('You clicked ' + ref.current + ' times!');
          }
        
          return (
            <button onClick={handleClick}>
              Click me!
            </button>
          );

      • DOM 조작
        - DOM 요소 선택하여 focus() 주기

        function TextInputWithFocusButton() {
          const inputEl = useRef(null);
          const onButtonClick = () => {
            // `current` points to the mounted text input element
            inputEl.current.focus();
          };
          return (
            <>
              <input ref={inputEl} type="text" />
              <button onClick={onButtonClick}>Focus the input</button>
            </>
          );
        }

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

• 쿠키의 생명 주기와 관련된 옵션
  • 유효기간 설정
  • permanent cookie
    • MaxAge: 쿠키가 삭제될 시간을 초 단위로 지정
      • 0 또는 음수로 설정 시 쿠키 삭제 → 상태유지시간 0인 쿠키 생성
      • 우선순위 max-age > expires
    • Expires: 쿠키가 삭제되는 만료 일자 지정
      • http 1.0을 지원하는 오래된 브라우저에서 사용
  • 미설정 시 session cookie
    • 웹 브라우저가 켜져있는 동안 유효하며 닫히면 쿠키도 삭제됨