useRef , cookie 의 MaxAge와 Expires 옵션(23/04/04)

useRef가 필요한 상황

1. 폼요소에 자동으로 초점을 맞출 때. 
useRef를 이용해 해당 요소를 선택하고 focus()메서드를 호출하여 초점을 설정할 수 있다.

2. 이전 상태 저장하기
useState 를 이용할 때 이전 상태를 유지하고 싶은 경우, useRef를 사용하여 이전 값을 저장하고 변경을 추적할 수 있습니다. 이것은 상태가 변경되어도 컴포넌트가 다시 렌더링 될 때마다 동일한 값을 유지할 수 있습니다. 
3. 애니메이션 컨트롤
useRef를 이용하여 애니메이션을 컨트롤 할 수 있습니다. 애니메이션을 시작, 일시중지 또는 다시 시작할 때 사용됩니다.
4. DOM요소 조작
useRef를 사용하여 DOM요소에 직접 접근하고 해당 요소의 속성을 변경할 수 있습니다. 이것은 특정 요소의 위치를 변경하거나 크기를 조정하는 경우 유용합니다.
5. 외부 라이브러리와 상호작용하기
외부 라이브러리를 사용할 때, useRef를 사용하여 라이브러리와 상호작용을 할 수 있습니다. 예를 들어, 외부 라이브러리가 생성한 DOM요소에 대한 참조를 가져와서 해당 요소를 변경하거나 조작할 수 있습니다.

import React, { useState, useRef } from 'react';

function InputTest() {
  const [text, setText] = useState('');
  const nameInput = useRef();

  const onChange = e => {
    setText(e.target.value)
  };

  const onReset = () => {
    setText('');
    nameInput.current.focus();
  };

  return (
    <div>
      <input
        name="name"
        onChange={onChange}
        value={text}
        ref={nameInput}
      />

      <button onClick={onReset}>초기화</button>
      <div>
        <b>내용: </b>
        {text}
      </div>
    </div>
  );
}

export default InputTest;

※ 선택하고싶은 DOM인 input에 ref값을 설정해준다.

name Input이 useRef로 ref객체화되어있다. ref={nameInput}으로 지정해줌

nameInput.current.focus()로 선택하고자하는 DOM(input)을 가리키게 한다. 

 

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

HTTP 쿠키는 서버가 클라이언트에게 전송하는 작은 데이터 조각입니다. 이 쿠키는 클라이언트 측에서 저장되며, 웹 사이트를 방문할 때마다 서버로 다시 전송됩니다. 쿠키는 세션 쿠키와 영속 쿠키로 나뉘며, 각각의 쿠키에는 MaxAge와 Expires 옵션이 있습니다.

 

• MaxAge
  MaxAge 는 쿠키의 수명을 초 단위로 설정합니다. 이 옵션을 사용하여 쿠키가 만료 될 시간을 설정 할 수있습니다.
• Expires
  Expires 는 쿠키가 만료될 날짜와 시간을 GMT 시간대로 설정합니다. 이 옵션을 사용하여 쿠키가 만료될 날짜와 시간을 정확하게 설정할 수 있습니다. 

쿠키에 대해 MaxAge 나 Expires 옵션을 설정하지 않으면 해당 쿠키는 세션 쿠키가 됩니다. 즉, 웹 브라우저가 닫힐때 까지 유지 됩니다. 따라서 브라우저가 닫히면 쿠키가 삭제됩니다.