Today I Learned (기술 면접)

질문 1)useRef가 필요한 상황을 예시를 들어 설명해주세요✅

대답 1)

스크롤바의 위치를 가져오거나 또는 포커스를 설정해줘야되는 다양한 상황에서 사용이 된다.
예를 들어 클릭 카운트를 설정할때 리랜더링이 일어나지 않고 ref를 사용하여 버튼을 클릭한 횟수를 추적할 수 있고 카운터의 값을 0으로 초기화 할 필요가 있을때 사용한다.
최종 프로젝트로 예를 들면 드롭다운 메뉴 이외의 공간을 클릭하면 드롭다운이 닫히는 코드가 있었다.
변수ref에 useRef 기본값을 null로 설정하여 드롭다운 메뉴 이외의 공간 클릭을 감지하여 드롭다운이 닫히게끔 설정해주었다.

꼬리 질문 2) useState와 useRef의 차이점?

coming soon...

useRef란?

useRef는 저장 공간 또는 DOM요소에 접근하기 위해 사용되는 React hook이다.
JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다.
리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있습니다.
즉, 리랜더링을 하지 않고 컴포넌트의 속성만 조회, 수정을 한다.

import { useEffect, useState, useRef } from 'react';
const useDetectClose: any = (initialState: any) => {
  const [isOpen, setIsOpen] = useState<any>(initialState);
  const ref = useRef<any>(null);
  const removeHandler = () => {
    setIsOpen(!isOpen);
  };
  useEffect(() => {
    const onClick = (e: any) => {
      if (ref.current !== null && !ref.current.contains(e.target)) {
        setIsOpen(!isOpen);
      }
    };
    if (isOpen) {
      window.addEventListener('click', onClick);
    }
    return () => {
      window.removeEventListener('click', onClick);
    };
  }, [isOpen]);
  return [isOpen, ref, removeHandler];
};
export default useDetectClose;

드롭다운 참고 사이트

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

대답 2)

Expires나 MaxAge옵션을 설정하면 브라우저를 닫아도 쿠기가 삭제 됩니다.
Expires는 설정된 유효 일자까지 쿠키를 유지하다가, 해당 일자가 도달하면 쿠키를 자동 삭제한다.
반드시 GMT(Greenwich Mean Time) 포맷으로 설정해야 하고 date.toUTCstring을 사용하면 쉽게 변경 가능하다.
MaxAge는 Expires의 옵션 대안으로 쿠키 만료 기간을 설정한다.
현재부터 설정하고자 하는 만료일시까지의 시간을 초로 환산하여 값을 설정한다. 0이나 음수로 설정하면 쿠키가 삭제된다.
만약 MaxAge나 Expires를 설정하지 않으면 브라우저가 닫힐 때 쿠키도 함께 삭제된다. 이런 쿠키를 세션 쿠키(session cookie)라 불른다.

Cookie 참고 사이트

꼬리 질문 3) 쿠키의 MaxAge, Expires(유효기간이) 왜 필요한가?

쿠키는 종종 웹 사이트에서 사용자 또는 사용자 기본 설정에 대한 정보를 저장하는 데 사용된다.
편의성을 위해서 이러한 데이터를 쿠키에 저장하지만 XSS(크로스 사이트 스크립팅)공격이나 CSRF(사이트 간 위조 요청) 공격으로 쿠키가 탈취되면 공격자에 의해 악의적인 목적으로 사용될 수 있다.
따라서 쿠키의 만료 시간을 짧게 설정하여 이러한 공격에 대해 대비할 수 있도록 조치하는 것이 중요하다.