(React Hooks) useEffect - useTitle / useClick

useTitle

 

문서 제목을 업데이트하는 functional hooks 방식

 

 

const useTitle = (initialTitle) => {

  const [title, setTitle] = useState(initialTitle);

  const updateTitle = () => {

    const htmlTitle = document.querySelector("title");

    htmlTitle.innerText = title;

  }

  useEffect(updateTitle, [title]);

  return setTitle;

}

export default function App() {

  const titleUpdater = useTitle("Loading...");

  return (

    <div className="App">

      <h1>Hi</h1>

    </div>

  );

}

title의 값을 innerText로 선택자에게 할당해주고

useEffect를 통해  updateTitle,  업데이트 이후 다시 updateTitle 호출

제목을 업데이트 할 수 있게 setTitle return

위와같이 변경이 된다.

 

 

 

 

  setTimeout(() => titleUpdater("Home"), 5000);

setTimeout() 작성시 지정 시간이후에

Loading... >> Home 으로 타이틀 변경

 

 

 

const useTitle = (initialTitle) => {

  const [title, setTitle] = useState(initialTitle);

  const updateTitle = () => {

    const htmlTitle = document.querySelector("title");

    htmlTitle.innerText = title;

  }

  useEffect(updateTitle, [title]);

  return setTitle;

}

export default function App() {

  const titleUpdater = useTitle("Loading...");

  setTimeout(() => titleUpdater("Home"), 5000);

  return (

    <div className="App">

      <h1>Hi</h1>

    </div>

  );

}

useTitle 전체코드

 

 

 

 

 

useClick

reference >> component의 어떠한 부분을 선택 할 수 있는방법 ( document.getElementByID() 와 동일 )

 

export default function App() {

  const input = useRef();

  return (

    <div className="App">

      <h1>Hi</h1>

      <input ref={input} placeholder="la"></input>

    </div>

  );

}

React의 모든 component는 reference element를 가지고있다

 

 

  setTimeout(() => console.log(input), 3000);

input의 로그를 찍어보면

위와같은 current 형태

 

  setTimeout(() => console.log(input.current), 3000);

 

 

 

 

## 트러블 슈팅

setTimeout(() => input.current.focus(), 3000);

위와 같이 작성을 하였을 때

 

focus 프로퍼티를 찾을 수 없다고 나와 

setTimeout(() => input.current?.focus(), 5000);

위와같이 변경후 실행시 정상적으로 input tag에 focus되었다

 

 

 

 

export default function App() {

  const input = useRef();

  // setTimeout(() => input.current.focus(), 3000);

  setTimeout(() => input.current?.focus(), 5000);

  return (

    <div className="App">

      <h1>Hi</h1>

      <input ref={input} placeholder="la"></input>

    </div>

  );

}

input.current?.focus()는 input.current가 정의되어 있으면 focus() 함수를 호출하고, input.current가 undefined이거나 null인 경우에는 focus()를 호출하지 않는다. 이를 통해 프로그램이 중단되지 않고 계속 실행

?.는 옵셔널 체이닝(Optional Chaining) 연산자

객체의 속성에 접근할 때 해당 속성이 존재하지 않으면 오류를 발생시키지 않고 undefined를 반환

https://ko.javascript.info/optional-chaining

옵셔널 체이닝 '?.'

 

 

 

const useClick = onClick => {

  const element = useRef();

  useEffect(() => {

    if(element.current){

      element.current.addEventListener('click', onClick);

    }

  })

  return element;

}

export default function App() {

  const sayHello = () => console.log("say hello");

  const title = useClick(sayHello);

  return (

    <div className="App">

      <h1 ref={title}>Hi</h1>

    </div>

  );

}

useClick을 사용하여 useRef() 생성 하여 element( reference ) 선언 및 return

이후 element( reference )를 title 로 선언 이후 ref={title} 을 통해 h1 태그에 접근

 

useEffect에서 할 일은 referent 안에 element.currunt가 있는지 확인하는것

>> 조건 만족시 addEventListener로 이벤트 부여

 

 

 

 

const useClick = onClick => {

  const element = useRef();

  useEffect(() => {

    if(element.current){

      element.current.addEventListener('click', onClick);

    }

    return () => {

      if(element.current){

        element.current.removeEventListener('click', onClick);

      }

    }

  }, [ ]);

  return element;

}

 

useEffect

>> componentDidmount 상태에서 동작

sayhello를 가진 useClick이 mount되었을 때 click 이벤트가 실행되고

 [ ]  에 dependency가 없기 때문에 update 되었을 때 고려하지 않아도 됨

eventlistener를 지워야한다 ( componentWillUnMount 가 될때 )   

useEffect의 cleanup 함수, 컴포넌트가 제거되거나 이펙트가 재실행되기 직전에 호출된다.

이때 이전에 등록한 'click' 이벤트 리스너를 제거. 이렇게 함으로써 메모리 누수나 예기치 않은 동작을 방지할 수 있다.

 

 

useEffect() 안에 function을 넣으면 componentDidMount, componentDidUpdate 때 호출 ( dependency 가 존재하지 않을 때)

componentDidMount일 때 단 한번만 실행되라는 의미

dependency가 존재하면 function은  componentDidMount일 때만 호출 / componentWillUnMount 일 때 return

function을 return 한다면 useEffect를 return받은 함수는 componentWillUnMount 때 호출

 [ ]   dependency 를 작성하지 않으면 update가 될 때 마다 eventListener가 추가됨

 

 

 

  if(typeof onClick !== "function"){

    return;

  }

function 타입으로 값을 받은게 아니라면 아무것도 return하지 않는다.

 

 

 

const useClick = onClick => {

  const element = useRef();

  useEffect(() => {

    if(element.current){

      element.current.addEventListener('click', onClick);

    }

    return () => {

      if(element.current){

        element.current.removeEventListener('click', onClick);

      }

    }

  }, []);

  return element;

}

export default function App() {

  const sayHello = () => console.log("say hello");

  const title = useClick(sayHello);

  return (

    <div className="App">

      <h1 ref={title}>Hi</h1>

    </div>

  );

}

useClick 전체코드