01 Hooks

Hook은 컴포넌트에서 데이터를 관리(State)하고
데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다.

Effect Hook

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

function App() {
const [inputValue, setInputValue] = useState("");
useEffect(() => {
    console.log(`${inputValue}`);
})
  return (
    <div className="App">
        <input value={inputValue} onChange={(evt) => {
            setInputValue(evt.target.value);
        }}/>
    </div>
  );
}

export default App;

• Deps를 지정하지 않더라도 컴포넌트의 생성/소멸 단계에서 Effect Callback 함수가 호출된다.
• 컴포넌트가 최초로 렌더링될 때, 지정한 State나 Prop가 변경될 때마다 이펙트 콜백 함수가 호출된다.
• Effect Callback 함수에서 반환하는 함수는 현 상태가 종료될 때 호출된다.
• Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.

useMemo

지정한 State나 Props가 변경될 경우 해당 값을 활용해 계산된 값을 메모이제이션하여 재렌더링 시 불필요한 연산을 줄인다.

const App = () => {
  const [firstName, setFirstName] = useState('철수')
  const [lastName, setLastName] = useState('김')

  // 이름과 성이 바뀔 때마다 풀네임을 메모이제이션
  const fullName = useMemo(() => {
    return ′${firstName} ${lastName}′
  }, [firstName, lastName])
}

const App = () => {
  const [value, setValue] = useState(1)

  const something = useMemo(() => {
        let sum = 0;
        for(let i = 0; i < 999999999; i++) {
            sum += i;
        }
        return sum;
    }, []);
    
    return (
        <div>
            <button onClick={() => {
                setValue((current) => {
                    return current + 1;
                })
            }}>
                {value}
            </button>
            <div>{something}</div>
        </div>
    )
}

useCallback

useCallback은 함수를 메모이제이션하기 위해 사용하는 Hook이다. 컴포넌트가 재 렌더링될 때 불필요하게 함수가 다시 생성되는 것을 방지한다.

const App = () => {
  const [firstName, setFirstName] = useState('철수')
  const [lastName, setLastName] = useState('김')

  // 이름과 성이 바뀔 때마다
  // 풀네임을 return하는 함수를 메모이제이션
  const getFullName = useCallback(() => {
    return `${firstName} ${lastName}`
  }, [firstName, lastName])

  return <>{getFullName()}</>
}

useMemo와 useCallback의 관계

useMemo(() => fn, deps) = useCallback(fn, deps)

useRef

useRef는 컴포넌트 생애 주기 내에서 유지할 ref 객체를 반환한다.
ref 객체는 .current라는 프로퍼티를 가지며 이 값을 자유롭게 변경할 수 있다.
일반적으로 React에서 DOM Element에 접근할 때 사용한다.(DOM Element의 ref 속성을 이용한다..).
useRef에 의해 반환된 ref 객체가 변경되어도 컴포넌트가 재 렌더링되지 않는다.

import React, {useRef}  from 'react';

function App() {
const inputRef = useRef(null);
  return (
    <div className="App">
    <input ref={inputRef}/>
    <button onClick={() => alert(inputRef.current.value)}>버튼</button>
    </div>
  );
}

export default App;