useRef ・ Cookie

 

 

📌 useRef

 

useRef란?

useRef는 React에서 사용되는 Hook 중 하나로, 함수형 컴포넌트에서 "참조(reference)"를 생성하고 관리하는 데 사용된다.

useRef를 이용하면 DOM 요소나 다른 React 컴포넌트에 접근할 수 있으며, 컴포넌트가 리렌더링될 때에도 유지됩니다.

 

 

 

useRef의 주요 용도

• DOM 요소에 접근: useRef를 사용하여 ref를 생성하면, 해당 ref를 특정 DOM 요소에 연결할 수 있다. 이렇게 하면 필요에 따라 해당 DOM 요소의 속성이나 메서드에 직접 접근할 수 있습니다.
• 컴포넌트 변수 유지: useRef를 사용하여 변수를 선언하면, 컴포넌트가 리렌더링되어도 변수의 값이 유지됩니다. 이를 활용하여 컴포넌트의 상태가 아닌 일시적인 데이터를 저장하거나 다른 목적으로 활용할 수 있습니다.

 

 

useRef 사용 방법

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

const MyComponent = () => {
  // DOM 요소에 접근하는 예제
  const myButtonRef = useRef(null);

  // 컴포넌트 변수 유지하는 예제
  const counterRef = useRef(0);

  // useEffect를 사용하여 컴포넌트가 렌더링될 때마다 실행될 효과를 구현합니다.
  useEffect(() => {
    // DOM 요소에 접근하여 버튼에 포커스를 줍니다.
    if (myButtonRef.current) {
      myButtonRef.current.focus();
    }

    // 컴포넌트 변수 값을 변경하면서 유지할 수 있습니다.
    counterRef.current += 1;
    console.log('Counter:', counterRef.current);
  });

  return (
    <div>
      {/* ref를 버튼에 연결합니다. */}
      <button ref={myButtonRef}>Click Me</button>
      <p>Counter: {counterRef.current}</p>
    </div>
  );
};

export default MyComponent;

 

useRef를 이용하여 버튼에 포커스를 줄 수 있고, counterRef를 통해 컴포넌트 변수 값을 변경하면서 유지할 수 있다. 이러한 동작은 컴포넌트가 리렌더링되어도 useRef를 통해 유지되기 때문에 가능하다.

 

 

 

 

---

 

 

 

📌 Cookie

 

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

Cookie란?

쿠키(Cookie)는 웹 브라우저에 저장되는 작은 데이터 조각으로, 웹 사이트와 사용자 간의 상태 정보를 유지하고 세션 관리, 사용자 추적 등의 목적으로 사용된다. 쿠키는 서버가 사용자의 브라우저에 데이터를 저장하고, 해당 사용자가 같은 웹 사이트를 방문할 때마다 브라우저가 그 데이터를 함께 보내주는 방식으로 동작합니다.

 

쿠키는 이름, 값, 만료 날짜, 경로(path) 등의 속성을 가진다. 또한, 쿠키는 웹 사이트 도메인 레벨에서 설정되기 때문에 하위 도메인 간에 공유할 수 있다.

 

 

 

MaxAge와 Expires 옵션

• MaxAge: 쿠키의 유효기간을 초 단위로 설정한다. MaxAge 속성이 설정된 쿠키는 브라우저에 의해 해당 기간만큼 보관되며, 유효 기간이 지난 쿠키는 자동으로 삭제된다. MaxAge 속성은 Expires보다 우선 순위가 높다. 예를 들어, MaxAge가 설정된 경우 Expires는 무시된다.
• Expires: 쿠키의 만료 날짜를 설정한다. 만료 날짜를 지나면 브라우저에서 해당 쿠키를 삭제한다. Expires는 과거 날짜나 현재 날짜보다 이전 날짜로 설정하면 즉시 삭제되도록 만들 수 있다.

 

 

옵션을 설정하지 않은 경우

• 만약 쿠키에 MaxAge와 Expires 옵션이 모두 설정되지 않은 경우 해당 쿠키는 브라우저가 실행되는 동안만 유지되고, 브라우저를 종료하면 삭제된다. 이를 "세션 쿠키(Session Cookie)"라고 합니다.
• 세션 쿠키는 웹 브라우저의 메모리에 저장되기 때문에 보안적인 측면에서 일시적인 정보를 저장하는 데 적합하다. 하지만 브라우저를 종료하면 세션 쿠키는 사라지므로, 다시 해당 웹 사이트를 방문할 때 새로운 세션 쿠키가 생성된다.