React.js

Today I Learned ... react.js

🙋‍♂️ *Reference Lecture

🙋‍ My Dev Blog

---

React Hooks 강의

Hooks

useEffect 란?

• 클래스 컴포넌트의 componentDidMount + componentDidUpdate를 합친 기능.
• return 에는 정리함수인 componentWillUnmount를 작성해주 수 있음.

• 첫번째 인자로는 함수가 들어감.
• 두번째 인자로는 deps 배열이 들어감. (deps가 바뀔때만 실행되도록)

-> componentDidMount, 즉 첫 렌더링시에는 무조건 실행됨.
-> deps가 바뀔때마다 (componentDidUpdate) 다시 실행됨.

---

useTitle

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

  const updateTitle = () => {
    const htmlTitle = document.querySelector("title");
    htmlTitle.innerText = title;
  };

  useEffect(updateTitle, [title]);
  return setTitle;
};


const App = () => {
  const titleUpdater = useTitle("Loading...");
  setTimeout(() => titleUpdater("Home"), 5000);

  return <div>hi</div>;
};

• useEffect로 title이 바뀔 때마다 updateTitle 함수 실행.
  -> htmlTitle.innerText = title;

• 아래와 같이 문서 title이 잘 변경되었다. (초기값으로 설정해준 'Loading...')

const App = () => {
  const titleUpdater = useTitle("Loading...");
  setTimeout(() => titleUpdater("Home"), 5000);
  
  return <div>hi</div>;
};

• 5초 뒤에 제목이 바뀌도록 titleUpdater을 호출함.

---

useClick

useRef

• ref는 우리의 컴포넌트의 어떤 부분을 선택할 수 있게 해줌.
  (마치 document.getElementByID 처럼)
  -> 예) input태그에 포커스를 하고 싶을 때, 스크롤 동작 등에 사용함. (HTML 요소에 접근)

• useRef()로 만든 객체를 살펴보면 내부에 current라는 객체가 존재함.

const inputRef = useRef();
inputeRef.current.focus();

useClick.js

const useClick = (onClick) => {
  const element = useRef();
  useEffect(() => {
    if (typeof onClick !== 'function') {
      return;
    }
    if (element.current) {
      element.current.addEventListener("click", onClick);
    }
    return () => {
      if (element.current) {
      element.current.removeEventListener("click", onClick)
      }};
  }, [onClick]); // 최초 렌더링시 한번만 실행되게
  return element;
};


const App = () => {
  const title = useClick(() =>{ console.log('hello'))});

  return (
    <div>
      <h1 ref={title}>Title</h1>
    </div>
  );
};

---

useConfirm, usePreventLeave

next post