230404

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

• useRef란?
  • React 공식 문서에 따르면,
    • .current프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref객체를 반환합니다.
      반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다.
      본질적으로 useRef는 .current프로퍼티에 변경 가능한 값을 담고 있는 상자와 같습니다.
  • 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook
  • Ref는 reference, 즉 참조를 뜻함
  • useRef는 리렌더링 하지 않는다. 컴포넌트의 속성만 조회&수정한다.
• 사용예시
  1. 컴포넌트에 focus를 위치시킬 필요가 있는 경우
     • 특정 DOM에 접근해 focus를 주고 싶을 때 쓸 수 있다.
     • const 변수명 = useRef()로 Ref 객체를 만든 후 선택하고 싶은 DOM에 ref={변수명}으로 ref값을 설정.
  2. 속성 값을 초기화(clear)할 필요가 있는 경우
     • 카운터의 값을 0으로 초기화할 필요가 있을 때
     • setInterval이나 setTimeout과 같은 함수는 clear 시켜주지 않으면 메모리를 많이 소모하기 때문.
  3. 변수 관리
     • 리렌더링 하지 않으면서 컴포넌트의 속성 정보를 조회&수정할 때
     • useRef로 관리되는 변수가 주로 쓰이는 곳
       • setTimeout, setInterval을 통해 만들어진 id
       • scroll의 위치
       • 배열에 새 항목이 추가될 때 필요한 고유 key 값
       • 외부 라이브러리를 사용하여 생성된 인스턴스

 

💡참고

https://yoonjong-park.tistory.com/entry/React-useRef-%EB%8A%94-%EC%96%B8%EC%A0%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%EA%B0%80

[React] useRef() 는 언제 사용하는가?

https://velog.io/@jinyoung985/React-useRef%EB%9E%80

[React] useRef란?

https://velog.io/@jminkyoung/TIL-13-React-Hooks-useRef-%EB%9E%80

[TIL #13] React (Hooks) - useRef 란?

 

 

---

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

• MaxAge 옵션은 쿠키를 얼마나 유지할 것인지, 
  Expires 옵션은 언제 폐기할 것인지 지정하는 옵션
• MaxAge나 Expires 옵션을 설정하지 않으면 브라우저를 닫을 때 쿠키도 함께 삭제되며, 이런 쿠키를 세션쿠키라고 함
• 둘 다 설정하면 MaxAge가 우선 적용됨.
• MaxAge
  • Expires의 대안으로 쿠키의 만료기간을 설정할 수 있음
  • 현재 설정하고자 하는 만료일시까지의 시간을 밀리세컨드로 환산한 값을 설정.
  • 0이나 음수로 설정하면 쿠키는 바로 삭제됨
• Expires
  • 브라우저는 설정된 유효일자까지 쿠키를 유지하다가 해당 일자가 되면 쿠키를 자동으로 삭제.
  • Expires 옵션을 과거로 지정하면 쿠키는 삭제됨
  • 쿠키의 유효일자는 반드시 GMT 포맷으로 설정.

 

💡참고

https://velog.io/@kaitlin_k/cookie-%EC%98%B5%EC%85%98

express cookie 옵션

https://velog.io/@jeju_daun/%EC%9D%B8%EC%A6%9D%EB%B3%B4%EC%95%88-Cookie-%EC%84%A4%EC%A0%95

[인증/보안] Cookie 옵션