23.05.08~ / 취업준비_이력서 스터디, 데일리 과제
Q. useRef가 필요한 상황?
useRef는 리렌더링하지 않고 컴포넌트의 속성만 조회, 수정한다.
그렇기때문에 useRef는 다음과 같은 상황에서 사용된다.
1. 컴포넌트 상에서 focus를 지정할때
예를 들어 다수의 값 입력이 완료된 후, 가장 첫번째 input창으로 이동할 때
const INPUT = useRef(); // Ref객체를 만들어 준 다음
...
<input
name="name"
value={text}
onChange={onChange}
ref={INPUT}
/> // focusing 하고자 하는 속성에 ref값 설정이후 초기화나, 동작시키고자 하는 onChange()안에 INPUT.current.focus();를 추가해 포커싱해주는 DOM API focus()를 호출, 선택하고자 하는 DOM을 가리킬 수 있다.
- 속성값을 초기화할때
예를 들어 타이머와 같은 동작에서 값을 0으로 초기화 할 때
const RSPfunction = () => {
...코드 중략
const interval = useRef(); //Ref객체 선언
useEffect(() => {
interval.current = setInterval(changeHand, 100);
return () => {
clearInterval(interval.current);
}
}, [imgCoord]);setInterval 이나 setTimeout과 같은 함수는 clear 시켜주지 않으면 메모리를 많이 소모하기 때문이다.
- 컴포넌트 내의 변수 관리
setTimeout, setInterval을 통해 만들어진 id 혹은 scroll의 위치, 배열에 필요한 고유 key값 등의 변수에 사용된다.
const nextId = useRef(123); 배열의 고유값 변수로 nextId를 만들어 주고 파라미터로 다음 id로 만들 123을 넣어준다. 파라미터 값이 current값이 된다.
nextId.current += 1;이후 .current 동작을 사용해 수정, 조회한다. +1씩 업데이트 하도록 해보는 동작이다.
공식문서에서 권장하는 바람직한 사례
- 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
- 애니메이션을 직접적으로 실행시킬 때.
- 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.
Q. Cookie의 MaxAge, Epires 옵션이란?
MaxAge 옵션은 쿠키의 만료기간을 설정할 때 사용한다.
현재부터 만료기간까지의 브라우저에서 유지되는 시간을 초 단위로 설정한다. 만약 0이나 음수값을 설정하면 쿠키는 바로 삭제된다.
Expires 옵션은 쿠키의 유효일자를 설정한다. 날짜/시간 값으로 지정이 된다. 예를 들면 expires=Wed, 21 Oct 2023 07:28:00 GMT 로 지정이 되었다면, 해당 날짜의 시간에 쿠키가 만료되는 것이다. expires는 반드시 GMT(Greenwich Mean Time) 포맷으로 설정이 되어야 한다.
MaxAge
- 상대적인 시간을 사용
- 클라이언트와 서버 사이의 시간 차이에 영향을 받지 않는다
Expires
- 특정 시간대로 설정되어 있음
- 클라이언트와 서버 사이에 시간 차이가 생길 경우 문제가 발생할 수 있음
