[React] 기초 Hook

state와 useState

state 개념

• state는 컴포넌트의 상태를 저장하고 관리하는 기능이다.
• 컴포넌트의 상태는 동적인 데이터를 저장하고 필요에 따라 변경할 수 있게 해준다.
• React의 함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 관리한다.

useState 개념

• useState는 React에서 제공하는 훅 함수로, 초기 상태와 해당 상태를 변경할 수 있는 함수를 반환한다.
• useState를 사용하면 함수형 컴포넌트에서도 상태를 관리할 수 있으며, 상태 변경 시 자동으로 컴포넌트가 다시 렌더링 된다.

사용 예시



위의 예시에서는 Counter 컴포넌트에서 count라는 상태와 setCount라는 상태 변경 함수를 선언하고 있다.
useState(0)은 초기 상태를 0으로 설정한다. increment 함수와 decrement 함수는 setCount를 사용하여 count 상태를 증가시키거나 감소시키는 역할을 한다.
주의할 점은 useState로 선언한 상태는 불변성을 유지해야 한다는 것이다. 상태를 변경할 때 기존 상태를 직접 수정하는 것이 아니라, 변경 함수를 사용하여 새로운 상태를 반환해야 한다.
이렇게 함으로써 React는 상태 변경을 감지하고 컴포넌트를 업데이트한다.
위의 예시 코드는 단순한 카운터를 구현한 것이지만, useState를 사용하면 더 복잡한 상태와 로직을 다룰 수 있다. 함수형 컴포넌트에서도 상태를 간편하게 관리할 수 있어 코드의 가독성과 유지보수성을 높일 수 있다.

useEffect

개념

• useEffect는 React의 Hook 중 하나로, 함수 컴포넌트 내에서 사이드 이펙트(side effects)를 수행할 수 있게 한다.
• 사이드 이펙트는 데이터를 가져오기, 구독 설정, 수동으로 React 컴포넌트의 DOM을 수정하는 등의 작업을 포함한다.
• useEffect는 두 개의 인자를 받는다. 첫 번째 인자는 사이드 이펙트를 수행하는 함수이고, 두 번째 인자는 의존성 배열(dependency array)이다.

언제 사용하는지

• useEffect는 주로 컴포넌트가 렌더링 된 후에 어떤 작업을 수행할 필요가 있을 때 사용한다.
• 예를 들면, 외부 데이터를 불러오거나 DOM의 특정 항목에 직접 변화를 줄 때 사용한다.
• 의존성 배열에 특정 값을 넣게 되면, 그 값이 변경될 때마다 side effect가 실행된다.
• 또한, 컴포넌트가 마운트 될 때 한 번만 실행하거나, 업데이트 될 때마다 실행하게도 할 수 있다.

사용 예시



useState를 사용하여 time 상태와 setTime 함수를 정의한다. time은 현재 시간을 나타내는 상태이고, setTime 함수를 사용하여 값을 업데이트할 수 있다.
useEffect 훅을 사용하여 부수 효과를 수행한다. 이 부수 효과는 컴포넌트가 렌더링될 때마다 실행되며, 타이머를 시작하고 time 상태를 업데이트하는 역할을 한다.
위의 코드에서 useEffect 훅의 두 번째 매개변수로 [time]을 전달했다. 이는 time 상태가 변경될 때마다 useEffect 훅이 실행되도록 설정하는 것을 의미한다. 즉, time 상태가 변경될 때마다 타이머가 업데이트되고 화면에 반영된다.
이렇게 useEffect 훅을 사용하여 컴포넌트의 렌더링과 관련된 부수 효과를 처리할 수 있다. 타이머, 데이터 로딩, 구독 등의 비동기 작업을 처리하거나 이벤트 리스너 등의 클리어업 작업을 수행하는데 유용한 훅이다.

useContext

개념

• React 컨텍스트(Context)를 사용할 수 있게 해주는 Hook이다.
• Context는 React 컴포넌트 트리 안에서 전역적으로 데이터를 공유하기 위한 메커니즘이다.
• useContext를 사용하기 위해서는 먼저 React.createContext() 함수를 사용하여 Context 객체를 생성해야 한다.
• 이후, 해당 Context 객체를 사용할 컴포넌트에서 useContext() Hook을 호출하여 Context의 값을 가져올 수 있다.

사용예시



ThemeToggle 컴포넌트에서는 현재 테마 값을 출력하고, 테마를 토글하는 기능은 구현되어 있지 않다.

위의 예시 코드에서는 MyContext라는 Context 객체를 생성하고, App 컴포넌트에서 MyContext.Provider를 사용하여 Context의 값을 설정한다.
그리고 MyComponent 컴포넌트에서 useContext를 호출하여 Context의 값을 가져와서 렌더링한다.
MyComponent 컴포넌트에서 useContext(MyContext)를 호출하면 MyContext의 값을 가져올 수 있다.
MyContext.Provider로부터 전달된 값을 사용할 수 있으며, 해당 값은 contextValue 변수에 저장된다.
그리고 이 값을 컴포넌트에서 사용하여 UI를 렌더링할 수 있습니다

Context를 사용하면 컴포넌트 계층 구조를 깊이 파고들 필요 없이 상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 수 있으며, 컴포넌트 간의 데이터 공유가 간편해진다.

useLocation

개념

• useLocation은 react-router-dom 라이브러리에서 제공하는 훅(Hook)으로, 현재 URL의 경로와 쿼리 문자열 등의 정보를 가져올 수 있다.
• 이를 활용하여 현재 경로에 따라 다른 동작을 수행하거나 렌더링을 제어할 수 있다.

사용예시



위의 예시에서 useLocation 훅을 사용하여 location 변수를 선언하고, pathname과 search 프로퍼티를 통해 현재 경로와 쿼리 문자열을 가져와서 출력하고 있다.
useLocation은 주로 react-router-dom의 Route 컴포넌트 내부에서 사용되며, 해당 경로에 대한 라우팅 로직을 작성하거나, 현재 경로에 따라 조건부 렌더링을 수행하는 등 다양한 용도로 활용된다.

useCallback

개념

• 메모이즈된 콜백 함수를 반환한다.
• 종속성 배열(dependency array)를 인자로 받아, 배열 내의 값이 변결될 때마 콜백 함수를 새로 생성한다.
• 그렇지 않은 경우에는 메모이즈된 함수를 재사용한다.

사용예시



위의 예시에서 incrementCount 함수는 count 상태가 변경될 때만 새로 생성된다.
만약 count 상태가 변경되지 않았다면, 이전에 생성된 incrementCount 함수를 재사용한다.
반면에 handleInputChange 함수는 종속성 배열이 빈 배열이므로, 컴포넌트가 처음 렌더링될 때만 한 번 생성되고 이후로는 재사용된다.
useCallback은 불필요한 리렌더링을 방지하여 성능을 개선하는 데 도움이 될 수 있지만,
모든 상황에서 사용할 필요는 없으며 남용하면 오히려 성능에 부정적인 영향을 미칠 수 있다.
주로 자주 변경되는 상태 값을 다루거나 큰 데이터셋을 처리할 때 유용하다.