const [count, setCount] = useState(0);
의 결과물은 배열[ ] 형태이다.
[초기값 넣은 state, 그걸 제어하는 setCount]
이러한 배열 형태이다.
useState는 rederer라고도 불리며, 렌더링을 일으킨다.
값이 변경될 때마다 렌더링이 일어난다.
그걸 제어하기 위해서 사용하는 것이 useEffect !!
useEffect(콜백함수, 의존성배열)
useEffect(()=>{ 내부로직 },[의존성배열] )
내부로직이 실행될지말지를 결정하는 것이 의존성 배열이다.(일단 맨 처음 렌더링 시 내부로직이 실행되기는 한다.)
'의존성 배열의 값'이 변경될 때마다 내부로직 실행한다.
의존성 배열이 빈 배열 [ ] 이라면 최초 렌더링시만 실행되겠지
의존성배열은 주로 state일 가능성이 높다! 왜냐면 보통 state가 변경 값이기 때문에..
의존성 배열이 없다면(빈 배열이아니라 그냥 없을 때) 그냥 console.log와 같다.
그러면 useEffect로 fetch data하기 좋겠지??
의존성 배열로 [ ] 빈배열쓰면 최초 렌더링 시에만 fetch하고 안하니까 불필요한 데이터 가져오기가 없겠지
useRef
useRef를 사용하면 그냥 공간을 만드는 것이다. 거기에 이름을 붙여서 돔에도 접근하고 하는것.
const countRef = useRef(0);
useRef는 렌더링을 일으키지 않는다. 값은 변경되고 있지만, 화면에 반영되지 않는다.
const countRef = useRef(0);
<input ref={countRef} />이렇게하면 렌더링되지 않고 값을 트래킹할 수 있다.
const [state, setState] = useState();
<input value={value} onChange=((e)=>{setState(e.target.value)}) />useState를 사용하여 이렇게 하면 input에 값이 입력될 때마다 렌더링이 일어난다.
useState를 사용하면 값이 변경될 때마다 리렌더링이 발생하므로 효율성이 떨어지고 성능에 영향을 줄 수 있다.
useRef를 사용하면 값이 변경되도 리렌더링을 일으키지 않기 때문에 효율적으로 관리할 수 있다. (값은 실제로 변경되고 있다. 화면에 보이지 않을뿐!!)
상태의 변화에 따라 리렌더링이 필요한 경우는 useState를 사용하고, 입력값의 변경에 대한 이전 값을 기록하거나 변경에 따라 리렌더링이 불필요하다면 useRef를 사용하면 좋겠다.
<useState와 useRef를 비교하는 코드>
import React, { useRef, useState } from "react";
function App() {
const countRef = useRef(0);
const [count, setCount] = useState(0);
return (
<>
<div>
<h2>count : {count}</h2>
<button
onClick={() => {
setCount(count + 1);
}}
>
+1
</button>
</div>
<div>
<h2>countRef : {countRef.current}</h2>
<button
onClick={() => {
countRef.current += 1;
console.log(countRef.current);
}}
>
+1
</button>
</div>
</>
);
}
export default App;
위에서 말한 것과 같이 useState를 사용해서 count를 증가시키면, count가 변경될때마다 리렌더링이 일어나 바로바로 카운트가 증가하는걸 눈(화면)으로 볼 수 있다.
하지만 useRef를 사용하여 count를 증가시키면, count는 증가되지만, 리렌더링이 일어나지 않아서 눈(화면)으로 볼 수 없다. (그래서 콘솔로 찍어봄)
그래서 countRef버튼을 누르다가(ref객체의 값은 바뀌고 있음) count버튼을 누르면 리렌더링이 일어나서 ref에 저장된 값이 화면에 나타나는것을 볼수 있다!!
useRef에 대한 설명을 조금 붙여보자면,
useRef를 사용하면 ref객체가 생성되고 그 객체 안에는 current 속성이 있다.
이 current 속성은 ref에 할당된 값이 변경되어도 렌더링이 일어나지 않기때문에 이전 값을 유지하는데 사용된다.
값을 읽거나 쓰려면 countRef.current와 같이 ref객체의 current 속성에 접근해야한다!
