React의 훅(Hook)

1. useState

 

상태를 관리하고 상태가 변하면 변경되는걸 인지하고 UI를 변경

 

import { useState } from 'react';

 

function App() {

  // const number = 1;

  const [number, setNumber] = useState(1);

  const add = () => {

    // number++;

    setNumber(number + 1);

    console.log('number', number);

  };

  return (

    <div>

      <div>숫자 : {number}</div>

      <div>

        <button onClick={add}>더하기</button>

        <Sub />

      </div>

    </div>

  );

}

---

2. useEffect

 

App() 이 처음 실행 되었을때와 dependencyList에 등록되어 있는 상태가 변화 했을때 실행되며 UI 변경

컴포넌트의 라이프사이클에 영향을 주는 부작용을 처리하는데 사용 ( API 호출, 이벤트 등 )

 

function App() {

  const [data, setData] = useState(0);

  const [search, setSearch] = useState(0);

  const download = () => {

    let downloadData = 5;

    setData(downloadData);

  };

  useEffect(() => {

    console.log('app 실행됨');

    download();

  }, [search]);

  return (

    <div>

      <div>검색</div>

      <button onClick={() => setSearch(2)}>검색하기</button>

      <div>데이터 : {data}</div>

      <button

        onClick={() => {

          setData(data + 1);

        }}

      >

        버튼

      </button>

    </div>

  );

}

---

3. useMemo

 

dependencyList에 등록된 값을 기억했다가 상태가 변화 했을때 실행되며 UI 변경

계산된 값을 캐시하고 재사용하기 위해 사용되기 때문에 계산 비용이 높은 값을 캐시하여 성능을 향상시킬때 사용

 

function App() {

  const [list, setList] = useState([1, 2, 3, 4]);

  const [str, setStr] = useState('합계');

  const getAddResult = () => {

    let sum = 0;

    list.forEach((i) => (sum = sum + i));

    console.log('sum', sum);

    return sum;

  };

  const addResult = useMemo(() => getAddResult(), [list]);

  return (

    <div>

      <div>

        <button

          onClick={() => {

            setStr('안녕');

          }}

        >

          문자 버튼

        </button>

      </div>

      <div>

        <button

          onClick={() => {

            setList([...list, 10]);

          }}

        >

          버튼

        </button>

      </div>

      <div>

        {list.map((n) => (

          <h1>{n}</h1>

        ))}

      </div>

      <div>

        {str} : {addResult}

      </div>

    </div>

  );

}

---

4. useRef, createRef

 

함수를 호출하여 반환된 객체는 current 프로퍼티를 가지고 있어 DOM 요소에 접근이 가능하며 속성이나 메서드를 조작

할 수 있으며 변경되어도 다른 컴포넌트들은 리렌더링 되지 않음

 

function App() {

  const myRef = useRef(null);

  const [list, setList] = useState([

    { id: 1, name: '풍' },

    { id: 2, name: '침' },

  ]);

  const myRefs = Array.from({ length: list.length }).map(() => createRef());

  return (

    <div>

      <button

        onClick={() => {

          myRef.current.style.backgroundColor = 'red';

          myRefs[1].current.style.backgroundColor = 'red';

        }}

      >

        클릭

      </button>

      <div ref={myRef}>박스</div>

      <div>

        {list.map((user, index) => (

          <h1 ref={myRefs[index]}>{user.name}</h1>

        ))}

      </div>

    </div>

  );

}

 

 

 

 

- 출처 메타코딩 최주호