React Hook 규칙, Forward Refs, useImperativeHandle(focus와 scroll)

* React Hook의 규칙

1. 리액트 훅은 리액트 함수에서만 호출해야한다.(=리액트 컴포넌트 함수/사용자 정의 훅)

ex) 리액트 컴포넌트 함수 = 컴포넌트 내에서 jsx 코드를 반환하는 함수(Login.js에서 const Login = ()=> {})

2. 리액트 훅이나 리액트 컴포넌트 함수는 사용자 정의 훅 함수의 최상위에서만 호출해야한다.(중첩함수나 block문(=if문)에서 호출 금지)

ex) useEffect (() => { useContext() }) 불가. useEffect내에서 useContext 호출할 수 없다.

여기서 말하는 사용자 정의 훅 함수의 최상위는 Login.js 파일 내의 const Login = () =>{//여기}를 말한다.

3. useEffect를 사용할 때, 참조하는 모든 항목을 의존성으로 useEffect 내부에 추가해야한다. 내부에 추가하지 않아도 되는 이유가 있는게 아니면..! 

단, useState를 통해 state로 관리되는 isLoggedIn 이나 setIsLoggedIng과 같은 애들은 리액트에서 변하지 않게 보장하기 때문에 의존성으로 추가할 필요가 없다.

ex) const [isLoggedIn, setIsLoggedIn] = useState(false);

 

---

* Forward Refs

Ref 전달하기 – React

컴포넌트에 렌더링 된 후에 input에 포커스 하려면 useEffectf를 사용해서,  컴포넌트가 렌더링 된 후에 딱 한번만 실행하게 하면 될 것 같지만 그 방식으로는 원하는 기능을 구현하기 힘들다.

 

로그인 버튼을 클릭 시 > input에 대한 유효성을 검사해 자동으로 포커싱되게 하는 기능을 구현하려고 했음.

 

이럴 때 사용할 수 있는게 useImperactiveHandle

 

---

* useImperativeHandle

 

useImperactiveHandle은 컴포넌트나 컴포넌트 내부에서 오는 기능을 명령적으로 사용할 수 있게 한다.

일반적인 state props관리를 통하지 않고 부모 컴포넌트의 state를 통해 컴포넌트를 제어하지 않고 직접 호출하거나, 사용할 수 있게 한다.

다만, 자주 사용하지 않고 사용하는 것을 권장하지 않음(거의 금지..)

하지만 focus와 scroll에서는 아주아주 유용하게 사용된다.

  const inputRef = useRef();
//두번째 매개변수는 함수. 객체를 반환해야 하는 함수.
  useImperativeHandle(ref, () => {
    //내부함수 혹은 내부 변수 등 외부에서 접근할 수 있어야 하는 것을 가리킨다.
    return {
      focus: activate,
    };
  });

ref를 외부에서 설정해야 하는 경우, ref를 설정할 수 있다는 것을 확실시 하기 위해 부모 컴포넌트에서 ref를 value에 추가해서 넘겨줘야한다.

하지만 이렇게 받아와서 useImperativeHandle에서 첫번째 매개변수로 ref를 넣어준다고 해서 사용할 수 있는 것이 아님.

ref를 사용하기 위해서는 컴포넌트 함수를 특별한 방법으로 내보낼 필요가 있다 (React.forwardRef로 사용자 컴포넌트 함수를 감싸줘야한다.)

//Input에서 props말고 두번째 매개변수인 ref를 받아올 수 있다.
//React.forwardRef()

const Input = React.forwardRef((props, ref) => {

}));