React Hooks 바로 useRef() , useEffect 훅(hook) 함수인데요. 이번 포스팅에서는 useRef() , useEffect 함수가 왜 필요하고, 언제 사용하는지에 대해서 알아보겠습니다.
ReactDoc와 수업내용을 참고하여 블로그를 제작하였습니다.
useEffect(() => 를 사용해서 처음 실행될때 Rander!를 볼수 있습니다.
Rander가 나오는이유는 setIsChange 초기값을 false로 지정했고 false일때 즉 웹페이지가 처음 렌더되었을때 초기값 false를 만족하기 때문에 Rander! 를 볼수 있는겁니다!!!
Ref 객체의 current 값은 우리가 선택하고자 하는 DOM을 가리킵니다.
그리고 위화면은 랜더링 되었을때 인풋창으로 포커싱을 해주는 DOM API focus() 를 호출합니다.
본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다.
이 기능은 클래스에서 인스턴스 필드를 사용하는 방법과 유사한 어떤 가변값을 유지하는 데에 편리합니다.
이것은 useRef()가 순수 자바스크립트 객체를 생성하기 때문입니다. useRef()와 {current: ...} 객체 자체를 생성하는 것의 유일한 차이점이라면 useRef는 매번 렌더링을 할 때 동일한 ref 객체를 제공한다는 것입니다.
useEffect(() => {
inputRef.current?.focus();
if (isChange === true) alert("Changed!!");
if (isChange === false) alert("Rander!!");
}, [isChange]);isChange위치가 의존성 배열[]에 들어가 있다고 보면됩니다.의존성 배열에 아무것도 넣지 않으면 Mount시에만 렌더해주고 끝나게 된다. 현재는 isChange의 값이 들어가 있고 isChange의 값이 변경될때마다 useEffect 가 실행된다.
필요한 이유!
1. 컴포넌트에 focus를 위치시킬 필요가 있는 경우.
2. 속성 값을 초기화(clear)할 필요가 있는 경우.
