React Hooks

왜 React Hooks 를 쓰는가

Practical React Hooks

1. useState

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

현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공합니다. [공식문서]

useState 함수를 호출하면 배열을 반환하는데,
첫번째 매개변수 number는 현재 상태 값 변수이고, 두번째 매개변수 setNumber는 상태 값을 갱신해주는 Setter 함수이다.
useState 괄호 안의 값0은 상태의 초기 값
useState( ) 함수로 여러 개의 상태 값을 관리할 수 있다.

2. useEffect

useEffect(function, deps)

Effect Hook, 즉 useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줍니다. [공식문서]

컴포넌트가 렌더링 될 때마다 특정 작업(컴포넌트의 mount, unmount, update 등) 을 실행할 수 있도록 한다. 클래스형 컴포넌트의 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있다는 뜻

1. Mount

useEffect(()=> {
  console.log('실행되었다!');
}, []);

가장 처음 렌더링 될 때 한 번만 실행하고 싶을 때는 deps 위치에 빈 배열을 넣는다.
배열을 생략한다면 리렌더링 할 때마다 실행된다.

2. Update

useEffect(() => {
  console.log(name);
  console.log('업데이트 될 때 실행된다'); },
[name]);

3. Unmount

useEffect(()=> {
  console.log('effect'); console.log(name);
  return () => {
    console.log('cleanup');
    console.log(name);
  };
}, []);

useEffect에서는 함수를 반환할 수 있는데 반환하는 함수를 Clean-Up 함수라고 한다.
deps 가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출된다.

3. useContext

4. useRef

5. useMemo

6. useCallack

7. useReducer