Other articles

  1. [React] 클릭&더블클릭 이벤트

    const timer = useRef<NodeJS.Timeout>()

const doubleClick = (request: Tree.RetrieveRes) => {
  console.log(request.showBtnGroup);
  request.showBtnGroup = !request.showBtnGroup;
}

const onClickHandler = async (event: any, request: Tree.RetrieveRes) => {
  clearTimeout(timer.current!);

  if (event.detail === 1) {
    timer.current = setTimeout(async () => showDirectories(request), 100)
  } else if (event.detail === 2) {
    doubleClick(request);
  }
}
    read more

  2. [React] useCallback

    설명

    useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용

    useMemo의 함수 버전이라고 생각하면 된다.

    함수를 선언하는 것 자체 …

    read more

  5. [React] useLayoutEffect

    설명

    컴포넌트 Render와 Paint 사이에 실행되는 Hook

    용어

    • Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정
    • Paint: 실제 스 …
    read more

  6. [React] useMemo

    설명

    성능 최적화를 위하여 기존에 수행한 연산결과를 재사용할 수 있도록 하는 Hook

    memoization

    • 기존에 수행한 연산의 결과값을 어딘가 …
    read more

  8. [React] useRef

    div를 focus

    const editSection = useRef<HTMLDivElement>(null);

editSection.current?.focus();

<div ref={editSection} tabIndex={-1}></div>
    read more

  9. [React] useState

    setState 동기화

    setState((state) => {return newState});

    주의

    객체와배열은 자바스크립트에서 참조형이기 때문에 리액트에서 랜더링을 다시 하게 하기 위해서 …

    read more

links

social