개발일지

[TIL] 24_0124 useEffect, useRef

잇츄미 2024. 1. 24. 20:02

이번 리액트 숙련 강의를 들으며

이번에 만들었던 투두리스트를 되짚어봤어.

 

useEffect, useRef

useEffect

- 로딩시에 콜백으로 안의 실행문을 한 번 만 딱 실행되게 해주는 함수야.

useRef

- 값을 Dom에 저장해서 렌더링해도 값을 유지하게 해주는 저장소 역할도 하고

- Dom에 직접 접근해서 값을 직접 DOM제어도 할 수 있어서

 

두 함수를 이용하자면

useEffect(() => {

refComment.current.focus();

},[])

const refTitle = useRef(null);



const 함수 = () => {


refTitle.current.focus();
}

<value  ref={refTitle} />

이런 식으로 useEffect론 로딩하자마자 해당 input에 포커스 줄 수 있고,

함수실행되고 마지막에 해당 인풋에 포커스가게 할 수 있고

value 값을 저장도 할 수 있어.

 

느낀점