const로 배열, 객체에 요소나 속성을 추가할 수 있는 이유, useRef는 언제 필요할까

1. 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요

const 키워드는 변수에 할당된 값을 변경할 수 없게 만듭니다. 하지만 배열이나 객체에 요소나 속성을 추가하는 것은 해당 변수에 새로운 값을 할당하는 것이 아니라, 변수가 참조하는 메모리 영역에서 값이 변경되는 것입니다. 이러한 경우에는 const로 선언된 배열이나 객체도 요소나 속성을 추가할 수 있습니다.

 

ex)

배열에 요소 추가

const arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]

위 예제에서 const로 선언된 arr 변수는 변경할 수 없습니다. 하지만 push 메서드를 사용하여 배열의 요소를 추가할 수 있습니다. 이는 push 메서드가 배열 자체를 변경하기 때문입니다.

 

객체에 속성 추가

const obj = { a: 1, b: 2 };
obj.c = 3; // { a: 1, b: 2, c: 3 }

위 예제에서 const로 선언된 obj 변수는 변경할 수 없습니다. 하지만 c 속성을 추가할 수 있습니다. 이는 객체 자체를 변경하는 것이 아니라 새로운 속성을 추가하는 것이기 때문입니다.

 

✔️ 배열과 객체는 참조 자료형이기 때문에 변수에 값 자체가 아닌 주소를 할당. (주소를 참조해 값을 가져오는 것)

→ const키워드로 선언 및 할당을 하더라도, 해당 변수에는 주소만 담겨있기 때문에 요소나 속성을 추가 가능.

배열이나 객체에 데이터를 추가하는 것은 상수를 재할당하거나 재선언하는 것이 아니라 주소가 가리키는 목록에 추가하는 것.

 

📌 const 변수에는 주소만 할당되어있다.

stack에는 주소만 저장됐고, heap에 실제 요소들이 저장되어있다.
실제 배열 요소들은 push나 pop으로 변경이 가능하고
참조된 주소는 변경되지 않으므로 const사용이 가능한 것이다.

 

https://velog.io/@xmun74/const%EB%A1%9C-%EB%B0%B0%EC%97%B4%EA%B0%9D%EC%B2%B4%EB%A5%BC-%EC%84%A0%EC%96%B8%ED%95%98%EC%97%AC-%EC%9A%94%EC%86%8C%EB%A5%BC-%EB%B3%80%EA%B2%BD%ED%95%A0-%EC%88%98-%EC%9E%88%EB%8A%94-%EC%9D%B4%EC%9C%A0%EB%8A%94

TIL - const로 배열/객체를 선언하여 요소를 변경할 수 있는 이유는?

https://velog.io/@koyk0408/javascript-%EB%A9%B4%EC%A0%91%EC%A7%88%EB%AC%B8-%EB%A6%AC%EC%8A%A4%ED%8A%B81-%EB%B0%B0%EC%97%B4-%EA%B0%9D%EC%B2%B4%EB%A5%BC-const%EB%A1%9C-%EC%84%A0%EC%96%B8%ED%96%88%EB%8A%94%EB%8D%B0-%EC%9A%94%EC%86%8C%EB%82%98-%EC%86%8D%EC%84%B1%EC%9D%84-%EC%B6%94%EA%B0%80%ED%95%A0-%EC%88%98-%EC%9E%88%EB%8A%94-%EC%9D%B4%EC%9C%A0

[javascript, react] 면접질문 리스트

 

+ 객체 동결

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

Object.freeze() - JavaScript | MDN

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

React에서 useRef는 특정 DOM 요소를 선택하거나 컴포넌트 내부에서 변수를 저장하는 데 사용됩니다. 

 

1. DOM 요소에 접근해야 할 때

React에서 DOM 요소를 직접 조작해야 할 때가 있습니다. 예를 들어, 특정 input 요소를 포커스하거나, 캔버스를 초기화하거나, 비디오를 재생할 때 useRef를 사용할 수 있습니다. 이를 통해, 컴포넌트 내부에서 해당 요소에 대한 참조를 저장하고, 이를 사용하여 DOM 조작을 수행할 수 있습니다.

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <div>
      <input type="text" ref={inputRef} />
    </div>
  );
}

input 요소에 대한 참조를 inputRef 변수에 저장합니다. useEffect를 사용하여, 컴포넌트가 마운트될 때 이 input 요소에 포커스를 설정합니다.

 

✔️ 캔버스 초기화?

캔버스 초기화는 캔버스에 그려진 모든 그림을 삭제하고, 캔버스를 처음 상태로 되돌리는 것을 의미합니다. 이는 캔버스에 새로운 그림을 그리기 전에 필요한 작업입니다.

 

React에서 캔버스를 초기화하기 위해서는 useRef를 사용하여 캔버스 요소에 대한 참조를 가져와야 합니다. 그런 다음, 해당 참조를 사용하여 캔버스를 초기화할 수 있습니다. 아래는 예시 코드입니다.

 

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');

    // 캔버스 초기화
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }, []);

  return (
    <div>
      <canvas ref={canvasRef} width={500} height={500} />
    </div>
  );
}

canvasRef 변수에 캔버스 요소에 대한 참조를 저장합니다. useEffect를 사용하여, 컴포넌트가 마운트될 때 해당 참조를 사용하여 캔버스 요소의 2D 컨텍스트를 가져옵니다. 그런 다음, clearRect 메소드를 사용하여 캔버스를 초기화합니다. 이제 이 캔버스 요소에 새로운 그림을 그릴 수 있습니다.

 

✔️ 캔버스?

캔버스(Canvas)는 HTML5에서 도입된 웹 그래픽 기술로, JavaScript를 사용하여 그래픽을 그릴 수 있는 HTML 요소입니다. 캔버스를 사용하면 자바스크립트를 사용하여 이미지, 도형, 애니메이션 등 다양한 그래픽 요소를 생성하고 조작할 수 있습니다.

 

캔버스는 기본적으로 픽셀 단위로 그래픽을 처리합니다. 따라서, 캔버스를 사용하면 벡터 기반의 SVG와 달리 높은 해상도의 그래픽을 처리할 수 있습니다. 또한, 캔버스는 이미지, 비디오, 웹캠 등 다양한 미디어 자원을 활용하여 그래픽을 그릴 수 있습니다.

 

React에서 캔버스를 사용할 때는 일반적으로 useRef 훅을 사용하여 캔버스 요소에 대한 참조를 가져오고, 이를 사용하여 캔버스를 그립니다. 캔버스는 React의 가상 DOM(Virtual DOM)과는 다소 다르게 동작하기 때문에, 캔버스를 조작할 때에는 일반적으로 React의 라이프사이클 메소드나 훅을 사용하여 적절하게 처리해야 합니다.

 

2. 컴포넌트 내부에서 변수를 저장해야 할 때

React에서 상태(state)는 컴포넌트가 다시 렌더링될 때마다 초기화됩니다. 때로는 컴포넌트가 다시 렌더링될 때 상태가 초기화되는 것을 원하지 않는 경우가 있습니다. 이러한 경우에 useRef를 사용하여 변수를 저장할 수 있습니다.

import React, { useRef } from 'react';

function MyComponent() {
  const countRef = useRef(0);

  const increment = () => {
    countRef.current += 1;
    console.log(`count: ${countRef.current}`);
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

countRef 변수에 초기값 0을 할당합니다. increment 함수에서 countRef.current 값을 증가시키고, 현재 값이 로그에 출력됩니다. 컴포넌트가 다시 렌더링되더라도 countRef.current 값은 초기화되지 않으므로, 계속해서 증가됩니다.

 

https://ko.reactjs.org/docs/hooks-reference.html#useref

Hooks API Reference – React

https://velog.io/@kysung95/%EC%A7%A4%EB%A7%89%EA%B8%80-useRef%EA%B0%80-%EB%AD%94%EA%B0%80%EC%9A%94

[짤막글] useRef가 뭔가요?

https://programming119.tistory.com/265

[React🌀] Ref 에 대한 고찰 🔍 / 1️⃣ - Ref 의 활용과 useRef

https://velog.io/@fejigu/React-useRef-%ED%95%84%EC%9A%94%EC%84%B1-%ED%95%84%EC%9A%94%ED%95%9C-%EC%83%81%ED%99%A9-%EC%82%AC%EC%9A%A9%EB%B2%95

[React] useRef - 필요성, 필요한 상황, 사용법