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

  10. [React] 여러 개의 checkbox 관리하는 법

    import React, { useState, useEffect } from "react";

export default function App(){
  const [checkedInputs, setCheckedInputs] = useState([]);

  const changeHandler = (checked, id) => {
    if (checked) {
      setCheckedInputs([...checkedInputs, id]);
    } else {
      // 체크 해제
      setCheckedInputs(checkedInputs.filter((el) => el !== id));
    }
  };


  return (
    <div>
      <input 
        id={???}
        type="checkbox" 
        onChange={()=>{
          changeHandler(e.currentTarget.checked, id값)
        }}
        checked={checkedInputs.includes(id값 …
    read more

links

social