원글 페이지 : 바로가기
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로 배열/객체를 선언하여 요소를 변경할 수 있는 이유는? const는 변하지 않는 상수다.그런데 배열과 객체는 요소를 추가/삭제하며 변경을 할 수 있다그렇다면 const로 배열과 객체를 선언을 못 하는 것 아닌가?배열, 객체는 참조값참조값은 변수에 주소를 velog.io 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] 면접질문 리스트 배열과 객체는 참조자료형이다. 데이터는 힙에 저장되고 변수에는 주소가 담긴다. 주소를 참조해 값을 가져오는 것이다. 참조된 주소가 변경되지 않는 한 주소가 가리키는 장소 내부의 요소들 velog.io + 객체 동결 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze Object.freeze() – JavaScript | MDN Object.freeze() 메서드는 객체를 동결합니다. 동결된 객체는 더 이상 변경될 수 없습니다. 즉, 동결된 객체는 새로운 속성을 추가하거나 존재하는 속성을 제거하는 것을 방지하며 존재하는 속성의 developer.mozilla.org 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 (
);
} 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 (
);
} 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 (
);
} countRef 변수에 초기값 0을 할당합니다. increment 함수에서 countRef.current 값을 증가시키고, 현재 값이 로그에 출력됩니다. 컴포넌트가 다시 렌더링되더라도 countRef.current 값은 초기화되지 않으므로, 계속해서 증가됩니다. https://ko.reactjs.org/docs/hooks-reference.html#useref Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org 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가 뭔가요? 안녕하세요. 김용성입니다.오늘은 useRef hook에 대해 간단히 알아보는 시간을 가지도록 하겠습니다. velog.io https://programming119.tistory.com/265 [React🌀] Ref 에 대한 고찰 🔍 / 1️⃣ – Ref 의 활용과 useRef Ref는 언제 사용할까? ref 는 references 의 약자로, React 에서 특정 컴퍼넌트를 접근하는 데에 사용하는 props 라고 이해하고 있으면 편합니다. 리액트에서 DOM을 컨트롤할때 주로 이 ref 를 이용하지만, programming119.tistory.com 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 – 필요성, 필요한 상황, 사용법 🔎 이번에는 React를 사용하는 프로젝트에서 DOM을 직접 선택해야 하는 상황일 때 사용하는 useRef에 대해 학습했다. 왜 필요한지, 필요한 상황은 언제인지, 어떻게 사용하는지 정리하며 복습하고 velog.io