set함수(prop=>prop + 100);
그전의 state의값에 100을 더함

<div className="body" style={{ overflow: 'hidden' }}>
스크롤 없앰.

useRef

자주 변경 되는 값을 state에 넣지 않고 useRef를 이용해서 불필요한 렌더링 발생을 막기위해 탄생.

const ref = useRef(value);
아래는 ref object.
{ current : value } // 값을 언제든 변경할 수 있다.
ex) ref.current = "hello" // { current : "hello" }
반환된 ref는 컴포넌트의 전생애주기에서 유지됨.
즉, 컴포넌트가 언마운드 되기 전까진 그 값을 유지함.

그래서 useRef. 언제 사용되는데?

1. State의 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화
   Ref의 변화 -> No 렌더링 -> 변수들의 값이 유지됨
   State의 변화 -> 렌더링 -> 그래도 ref의 값은 유지됨.

   결론: 값이 바뀌지 말아야할 변수를 관리할 때 편리

2. 대표적으로 input요소를 클릭하지 않아도 focus를 주고 싶을때 용이함.
   ex) 로그인화면에 들어왔을 떄 아이디 적는칸을 굳이 클릭하지 않아도 커서가 이미 올라가져 있는 상황.

   버튼을 아무리 클릭해도 화면에 변화가 없다.
   내부적으로는 변화가 있지만 렌더링이 안되기 때문이다.

   빛을 발하는순간!
   엄청 자주 바뀌는 값을 state에 집어 넣었다고 생각해봐라,
   그럼 그값이 바뀔때마다 렌더링 된다-> 성능에 안좋은 영향을 미침.
   그래서 그것을 Ref에 넣어준다면 성능에 악영향을 미치지 않을것!

   import React, { useRef, useState } from "react";

const RefRef = () => {
const [count, setCount] = useState(0);
const countRef = useRef(0);
// { current : 0 }
// ref는 하나의 object

const increaseCountState = () => {
setCount(count + 1);
};

const increaseCountRef = () => {
countRef.current += 1;
console.log("Ref : ", countRef.current);// 렌더링이 되야 업데이트가 됨. 내부적으로는 실행중
};

console.log("rendering..."); // state값이 변경될때마다 리렌더링 되기 때문에 계속 호출됨

return (

<div>
  <p>State : {count}</p>
  <p>Ref : {countRef.current}</p>
  <button onClick={() => {
      increaseCountState();
    }}>State 올려</button>
  <button onClick={() => {
      increaseCountRef();
      console.log(countRef.current); // UI만 업데이트 안될뿐 console에는 계속 찍히고 있는중
    }}}>Ref 올려</button>
</div>

);
};

export default RefRef;

컴포넌트가 렌더링될떄마다 함수가 다시 불린다는 뜻.
함수가 불리면 불릴때마다 함수 내부의 변수들이 초기화됨.

```js
import React, { useState, useRef } from "react";

export default function UsePractice() {
 const [render, setRenderer] = useState(0);
 const countRef = useRef(0);
 let countVar = 0; // 렌더하면 초기화됨.
 const [value, setValue] = useState(0);

 const doRendering = () => {
   setRenderer(render + 1);
 };

 const increaseRef = () => {
   countRef.current += 1;
   console.log(`ref: `, countRef.current);
 };

 const increaseVar = () => {
   countVar += 1;
   console.log("var: ", countVar);
 };
 const increaseValue = () => {
   setValue(value + 1);
   console.log("value: ", value);
 };
 const printResults = () => {
   console.log(
     `ref : ${countRef.current}, var : ${countVar}, value : ${value}`
   );
 };

 return (
   <div>
     <p>Ref : {countRef.current}</p>
     <p>Var : {countVar}</p>
     <p>value : {value}</p>
     <button onClick={doRendering}>렌더!</button>
     <button onClick={increaseRef}>Ref 올려!</button>
     <button onClick={increaseVar}>Var 올려!</button>
     <button onClick={increaseValue}>value 올려!</button>
     <button onClick={printResults}>Ref Var 출력!!</button>
   </div>
 );
}

결론

✅UseRef는 변화는 감지하지만 렌더링 없이 state값만 변경시키고 싶을 때

이상한거 발견
let [count, setCount] = useState(1);
const [count, setCount] = useState(1);

위의 2가지 경우로 state를 만들었을 떄,

const increase = () => {
   setCount((count += 1));
 };

위처럼 함수를 만들고

<button onClick={increase}
       // 함수를 밖에 빼서 만들면 const 안에 값을 못넣는다는 에러 나오네
     > 올려 </button>

onClick 안에 따로 뺀 함수 increase를 넣으면 const를 못쓴다.상수라 변경할 수 없단다.
하지만 그냥 풀어서 increase자리에
onClick = {()=>setCount(count += 1)}를 넣었을땐 const여도 상관없다.
왜인가?