100124 til

useRef , useEffect 

 

 

useRef 

변수처럼 값을 기억 하고 값이 바뀌어도 다시 렌더링 하지 않도록 도와줌 

값이 바뀌어도 컴포넌트가 다시 그려지지 않고 그대로있음 

dom 요소에 접근 하는 역할 

값을 기억 해야할떄 사용 

 

useEffect 

컴포넌트가 처음 화면에 나타날떄, 업데이트될때 , 사라질떄 (cleanup), 

특정 작업을 실행 할 수있게 도와줌 

 

api 요청 , 이벤트등록 , 데이터변경 ,등의 작업 처리할떄 유용

---

 

useRef 와 useState의 차이 

 

 

useRef는 값이 바뀌어도 컴포넌트를 다시 렌더링하지 않으며, 값을 계속 유지

이 값은 렌더링 사이에서도 사라지지 않고 유지함. 하지만 화면에 변화를 일으키지 않는다.

 

주로 DOM에 직접 접근하거나,

 

값이 변경되더라도 렌더링을 트리거하지 않도록 하고 싶을 때 사용

 

useState는 값이 바뀌면 컴포넌트가 다시 렌더링됨. 즉, 화면에도 변경된 값이 반영된다.

 

그래서 상태(state)를 관리하고, 상태가 변경될 때마다 화면을 업데이트하고 싶을 때 useState를 사용.

 

---

 

useEffect([])와 useEffect([count])의 차이점은 무엇인가

 

 

useEffect([]): 의존성 배열이 빈 배열이면, 컴포넌트가 처음 화면에 나타날 때 딱 한 번만 실행됨

 

그 이후에는 값이 변경되거나 업데이트되더라도 useEffect는 다시 실행되지 않는다.

 

useEffect([count]): 의존성 배열에 count가 들어가면, count 값이 바뀔 때마다 useEffect가 실행.

 

즉, count 값이 업데이트될 때마다 특정 작업을 다시 수행하게 됨.