리액트 훅이란???

리액트 훅(Hook)이란 무엇인가??

리액트 훅(React Hooks)은 리액트 버전 16.8에 처음 도입된 기능으로, 클래스 컴포넌트 없이도 상태 관리 및 리액트 기능을 사용할 수 있게 해주는 함수입니다. 이전에는 리액트에서 상태 관리나 생명주기 기능을 사용하기 위해서는 클래스 컴포넌트를 사용해야 했지만, 훅을 사용하면 함수 컴포넌트 내에서도 이러한 기능을 쉽게 사용할 수 있습니다

1. useState

const [state, setState] = useState(initialState);

여기서 ‘state는 상태 값이고, ‘setState’는 그 상태를 업데이트하는 함수입니다.

2. useEffect

함수 컴포넌트에서 부수 효과(side effects)를 수행할 수 있습니다. 클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount에 해당하는 작업을 처리할 수 있습니다.

useEffect(() => {
  // 코드 실행
  return () => {
    // 클린업 코드
  };
}, [dependencies]);

여기서 dependencies 배열이 변경될 때마다 효과가 재실행됩니다

3. useContext : 컨텍스트 데이터를 함수 컴포넌트에서 사용할 수 있습니다.

const value = useContext(MyContext);

4.useReducer

useState보다 더 복잡한 상태 로직을 관리할 수 있으며, 리듀서를 통해 상태를 업데이트합니다

const [state, dispatch] = useReducer(reducer, initialState);

5. useCallback

특정 함수를 메모이제이션(memoization)할 때 사용합니다. 이는 함수가 불필요하게 재생성되는 것을 방지하여 성능을 최적화합니다.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

6. useMemo

복잡한 연산 결과값을 메모이제이션하여 성능을 최적화 합니다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

7. useRef

함수 컴포넌트에서 ref를 사용할 수 있습니다. 이는 DOM에 직접 접근할 때 유용합니다.

const myRef = useRef(initialValue);

다음시간에 계속…