[기술 면접 스터디-7일차] useRef가 필요한 상황, Cookie의 maxAge, expires 옵션

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

💡useRef는 리액트의 훅 중에 하나로, DOM 요소에 접근하거나 리액트 컴포넌트의 상태와는 별개로 독립적으로 값을 유지해야 할 때 사용됩니다. 예를 들어서 특정 엘리먼트의 크기나 뷰포트 상의 위치를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스 설정을 해줘야 한다던지 등 다양한 상황이 있을 수 있습니다. 또 외부 라이브러리를 사용해야 할 때에도 특정 DOM에다 적용하기 때문에 useRef를 사용합니다.

저같은 경우는 프로젝트에서 무한 스크롤을 구현할 때, 스크롤탑 효과를 주어 스크롤바 위치를 최상단으로 설정할 때 useRef를 유용하게 사용하였습니다.

- useRef 리액트 컴포넌트의 상태와는 별개로 독립적으로 값의 유지를 위해 사용됩니다. 값이 어떤 요소나 컴포넌트에 의해 영향을 받지 않고 독립적으로 유지되어야 함을 의미합니다. 다시 말해, 다른 요소나 컴포넌트의 변화에 영향을 받지 않고 안정적으로 유지되어야 하는 값이 있을 때, 이 값을 독립적으로 관리하고 싶은 경우가 있을 수 있습니다. 이러한 상황에서는 전역 변수, 컨텍스트(context), 또는 상태 관리 라이브러리를 사용하여 독립적인 값의 유지를 구현할 수 있습니다. 이렇게 하면 해당 값이 여러 컴포넌트나 요소와 상호작용하지 않고 독립적으로 관리될 수 있습니다. 

+ useRef vs useState vs 전역변수

[ReactJS] useRef vs useState vs 전역변수

 useRef vs useState : useRef는 값이 변경되면 리렌더링 되지만, useRef는 값이 변경되도 렌더링이 발생하지 않아 화면상에 업데이트 되지 않는다.

useRef vs 전역 변수 : useState와 useRef는 컴포넌트와 생애주기를 함께한다. 따라서 Component가 생성됨과 동시에 값이 초기화 되고, 컴포넌트가 UnMount 되면 메모리에서 해제된다. 하지만 이처럼 전역 변수를 공유하게 된다면 컴포넌트가 등장하였다가 사라지게 되더라도, 다시 등장한다면 공유된 전역변수의 값이 유지된다. ->  useState와 useRef는 컴포넌트와 생애주기를 함께한다. 따라서 Component가 생성됨과 동시에 값이 초기화 되고, 컴포넌트가 UnMount 되면 메모리에서 해제된다. 하지만 이처럼 전역 변수를 공유하게 된다면 컴포넌트가 등장하였다가 사라지게 되더라도, 다시 등장한다면 공유된 전역변수의 값이 유지된다.

+ 리액트에서 DOM을 직접 조작하지 않는 이유

리액트에서는 DOM을 직접 건드리는 DOMselector들을 사용해 조작하는 것을 지양합니다. 그 이유는, 리액트는 Virtual DOM을 사용하기 때문에 React 내부의 데이터는 컴포넌트 내의 State으로 조작됩니다. 즉, React가 State를 컨트롤 하여 가상 돔을 업데이트 하고, 렌더링 하고 있다는 것입니다.

만약 이러한 React 시스템을 벗어나 DOM을 직접적으로 건드리게되면 이 내용들은 React가 제어하는 영역에서 벗어나게 됩니다. React가 제어하는 State와 제어하지 않는 State을 혼용해서 사용해 데이터를 조작할 경우, 위에 언급했듯이 React의 Lifecycle에 맞추어 DOM Element를 가져오지 못해 가져온 DOM Element를 신뢰할 수 없어지는 문제가 발생합니다. 이렇게 데이터를 어디에서 어떻게 조작하고 있는지 예측하기 어렵기 때문에 디버깅 또한 어려워집니다. 

또 리액트는 가상돔조작으로 인한 브라우저 렌더링을 최소화 한다는 장점을 가지고 있는데 이렇게 React의 제어를 벗어나게 되면, React에서 제공하는 이점들을 사용할 수 없게 됩니다. 따라서 가능하면 DOM을 직접 건드리는 일은 지양하는 것이 좋습니다.

+ Virtual DOM이란?

React Virtual DOM 비교 원리와 얕은 비교

 

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

💡MaxAge는 쿠키의 만료 시간을 초단위로 지정하고, Expires는 쿠키의 유효 날짜와 시간을 문자열로 지정하는 옵션 입니다. max-age와 expires의 주요 차이점은 max-age는 현재 시간을 기준으로 "상대 시간"을 설정하는 반면, expires는 쿠키가 만료되는 "절대 시간"을 설정합니다. max-age와 expires가 모두 설정된 경우 max-age값을 우선으로 만료가 되고, expires는 무시됩니다. 만료시간을 설정하지 않을 경우에는 세션 쿠키로 간주되어 브라우저가 닫히면 쿠키도 함께 삭제됩니다. 
주의할 점은 expires의 경우 절대시간이기 때문에 클라이언트와 서버 시간의 차이가 있을 경우 문제가 발생할 수 있기 때문에 MaxAge를 사용해 상대시간을 적용하는 것이 더 안정적이고 권장되는 방식입니다.

- 쿠키 유효일자는 반드시 GMT를 사용해야하는데, 이는 UTC와 동일하기 때문에 간단히 new Date().toUTCString() 를 사용하면 된다.

+ 쿠키를 사용할 때 주의할 점

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

 

+ 쿠키의 옵션 중 그 외의 옵션들은?

HttpOnly, Secure, Domain, SameSite, Path 등이 있습니다.