TIL 면접스터디 Day7(4/04)

라형선·2023년 4월 4일

TIL 기술면접

🍴오늘 할 일

면접스터디
알고리즘 2~3문제

기술면접

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

useRef 훅은 DOM 노드나 컴포넌트 인스턴스와 같은 값을 기억할 때 유용합니다. useRef를 사용하면 함수형 컴포넌트에서 인스턴스 변수를 선언하고 값에 접근할 수 있습니다.

포커스 관리하기: useRef를 사용하여 포커스를 관리할 수 있습니다. 예를 들어, 모달이 열려 있을 때, 모달이 닫힐 때 포커스가 어디로 이동해야 하는지 기억하도록 useRef를 사용할 수 있습니다.
애니메이션 제어하기: useRef를 사용하여 애니메이션을 제어할 수 있습니다. 예를 들어, 스크롤 위치에 따라 애니메이션을 시작하고 멈추도록 useRef를 사용할 수 있습니다.
타이머 관리하기: useRef를 사용하여 타이머를 관리할 수 있습니다. 예를 들어, 타이머를 시작하거나 중지하도록 useRef를 사용할 수 있습니다.
이전 값 비교하기: useRef를 사용하여 이전 값과 현재 값을 비교할 수 있습니다. 예를 들어, 이전 값이 현재 값과 같은지 확인하고, 같지 않으면 어떤 작업을 수행하도록 useRef를 사용할 수 있습니다.

useRef란

React의 훅 중 하나로, 함수형 컴포넌트에서 변수를 선언하고 사용할 수 있도록 도와줍니다. useRef를 사용하면 DOM 노드나 컴포넌트 인스턴스와 같은 값을 기억하고, 이전 값과 현재 값을 비교할 수 있습니다.

useRef는 useState와는 달리, 컴포넌트가 다시 렌더링될 때마다 초기화되지 않으며, 값을 변경해도 컴포넌트가 다시 렌더링되지 않습니다. 이는 useRef가 상태 변경이 아닌, 값을 기억하기 위한 목적으로 사용된다는 것을 의미합니다.

useRef를 사용하는 방법은 다음과 같습니다.

javascript

import React, { useRef } from 'react';

function Example() {
  const ref = useRef(initialValue); // initialValue는 선택적인 매개변수입니다.
  
  // ref.current에 값을 할당하거나 변경합니다.
  ref.current = someValue;
  
  return (
    // JSX 코드
  );
}

위의 코드에서 useRef 훅은 initialValue를 초기값으로 하는 ref 객체를 생성합니다. ref.current에 값을 할당하면, 이전 값을 유지하며, 컴포넌트가 다시 렌더링되지 않습니다.

useRef를 사용하여 DOM 노드나 컴포넌트 인스턴스를 참조할 수 있으며, useEffect와 함께 사용하여 컴포넌트의 라이프사이클 이벤트를 처리하는 등의 작업에 유용합니다.

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

쿠키는 웹 브라우저에 저장되는 작은 데이터 조각입니다. 쿠키는 이름-값 쌍으로 이루어져 있으며, 사용자가 웹 사이트를 방문할 때마다 웹 서버에서 읽히고, 웹 브라우저에서 저장되며, 이후에 다시 웹 서버로 전송됩니다.

쿠키는 다음과 같은 옵션을 가지고 있습니다.

MaxAge: 쿠키가 유효한 기간을 지정합니다. MaxAge 값은 초 단위로 설정할 수 있습니다. 이 값이 설정되면, 브라우저는 쿠키를 저장하고, 지정된 시간이 지나면 자동으로 삭제합니다.
Expires: 쿠키의 만료일을 지정합니다. Expires 값은 GMT 날짜와 시간으로 설정할 수 있습니다. 이 값이 설정되면, 브라우저는 쿠키를 저장하고, 만료일이 지나면 자동으로 삭제합니다.
MaxAge가 더 높은 우선 순위로 적용됩니다.
MaxAge와 Expires 옵션 중 어느 하나도 설정하지 않으면, 브라우저가 세션 쿠키로 취급합니다. 세션 쿠키는 브라우저가 닫히면 자동으로 삭제됩니다.

예를 들어, 다음과 같은 코드로 쿠키를 생성하면, 쿠키가 1시간 동안 유효합니다.

javascript

document.cookie = "username=John Doe; Max-Age=3600";

또는 다음과 같이 Expires를 사용하여 쿠키를 생성할 수도 있습니다.

javascript

var d = new Date();
d.setTime(d.getTime() + (1 * 60 * 60 * 1000)); // 1시간 후 만료
var expires = "expires="+ d.toUTCString();
document.cookie = "username=John Doe; " + expires;

쿠키의 MaxAge나 Expires 옵션을 설정하지 않으면, 세션 쿠키로 취급되어 브라우저가 닫힐 때 자동으로 삭제됩니다.

이벤트 루프

자바스크립트의 비동기 처리 방식을 가능하게 하는 것
콜 스택에 현재 실행 중인 식행 컨텍스트가 있는지 ,그리고 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인한다. 만약 콜 스택이 비어 있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다. 이때 콜 스택으로 이동한 함수는 실행된다. 즉, 태스크 큐에 일시 보관된 함수들은 비동기 처리 방식으로 동작한다.

Ajax(Asnychronous JavaScript and XML)

자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식.
장점
1. 변경할 부분을 생긴하는 데 필요한 데이터만 서버로 부터 전송받기 때문에 불필요한 데이터 통신이 발생하지 않는다.
2. 변경할 필요가 없는 부분은 다시 렌더링하지 않는다. 따라서 화면이 순간적으로 깜빡이는 현상이 발생하지 않는다.
3. 클라이언트와 서버와의 통신이 비동기 방식으로 동작하기 때문에 서버에게 요청을 보낸 이후 블로킹이 발생하지 않는다.

라형선

형선

이전 포스트

React-query

다음 포스트