useRef

1. js에서 DOM SELECTOR와 같이 DOM에 접근할 수 있게 하는 훅함수

2. (state에 의해 변화가 있어도) render와 상관없이 값을 유지시키는 변수/상수

import { useRef, useState } from "react"

function UseRef () {

  const ref = useRef(null);

  // let count = 0; 이렇게 되어있었다면 state에 의해 렌더링되면 0으로 초기화되는데 useRef는 초기화를 막아줌
  let count = useRef(0); // 2)

  const [state, setState] = useState(false)
 
  const onChangeColor = () => {
    console.log(ref.current); // 1)
    count.current += 1;
    ref.current.style.color = "red";
  }

  const onRenderForce = () => {
    //setState(true);
	  setState((prev) => !prev);
		// prev는 반환값(return) = 기존의 state값
	
  }

  console.log(count);

  return (
    <>
      <div ref={ref}>useRef</div>
      <button onClick={onChangeColor}>색상변경</button>
      <button onClick={onRenderForce}>강제 렌더링</button>
    </>
  )
}
export default UseRef

const [state, setState] = useState([
	{
		 id: 1,
		 name: 김성용
	},
	{
		 id: 2,
		 name: 이멜론
	},
	{
		 id: 3,
		 name: 김사과
	}
])

setState([
	{
		 id: 1,
		 name: 김성용
	},
	{
		 id: 2,
		 name: 이멜론
	},
	{
		 id: 3,
		 name: 김사과
	},
	{
		 id: 4,
		 name: 오렌지
	},
])

const obj = {}
const obj2 = {}

obj === obj2 // T/F? false

obj3 = obj;
obj === obj3 // T/F? true

객체(object)끼리는 값을 비교 불가/ 같지 않음 (메모리 참조값이 다르기 때문에..!)

⇒ 기존의 값이 변경되었는지 알 수 없음

⇒ state 불변성 [object]

• 불변성은 어떤 값을 직접적으로 변경하지 않고 새로운 값을 만들어내는 것이다.

그렇다면 object를 값으로 갖고 있는 state의 값을 수정하기 위해서는 어떻게 해야하는가?

얕은 복사 ⇒ obj가 가지고 있는 객체 값이 변경되면 obj3도 같은 객체를 가지고 있기 때문에 값이 변경