230228.til

Q1. 배열이나 객체를 const 로 선언했는데 요소나 속성을 추가할 수 있는 이유?

배열이나 객체가 reference date type 인 자바스크립트의 특성 때문입니다.
const 로 선언한 배열이나 객체의 '참조' 그 자체를 변경할 수는 없지만,
참조가 가리키는 배열이나 객체의 '내용'은 변경이 가능하다는 이야기 입니다.
이런 특성을 이용해서 변수의 참조가 변경되지 않는다는 것을 명시해 주면서도
배열이나 객체의 내용을 자유롭게 변경하는 것이 가능합니다.

Primitive data type

• number, string, boolean, null, undefined, symbol 등등
• 변수에 '직접' 값을 저장함

Reference data type

• object, array, function 등등, 자바스크립트에서는 모두 객체 취급
• 변수에 객체가 저장된 '메모리' 주소를 저장함.
• 실제 데이터는 힙(heap) 영역에 저장

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

useRef 는 React 환경에서 자체적으로 제공해주는 Hook 이며,
useRef를 사용하면 DOM 노드나 컴포넌트 인스턴스에 직접적으로 접근할 수 있습니다.
useState와 달리 컴포넌트를 재 렌더링 하지 않고 값을 저장하고 업데이트 할 수 있습니다.

예를들어, 특정 버튼을 누르면 어떤 요소의 backGroundColor 를 바꾸는 로직을 구성할 때,
바뀔 요소에 ref를 지정하고 버튼의 onClick 이벤트에 해당 요소의 ref.current 값을 바꿔준다거나
이전 값과 현재 값을 비교하여 다른 동작을 수행하는 로직을 구성할 때 유용하게 사용할 수 있습니다.

이전 값 현재 값 비교로직 예시

const Component = () => {
  const prevValueRef = useRef(null);
  const [value, setValue] = useState('');

  useEffect(() => {
    if (prevValueRef.current !== null && value !== prevValueRef.current) {
      console.log('Value changed!');
    }
    prevValueRef.current = value;
  }, [value]);

  return (
    <div>
      <input value={value} onChange={e => setValue(e.target.value)} />
    </div>
  );
}