{ RN } RN hooks

Hooks의 목적

Hooks는 React Native에서 함수형 컴포넌트에 상태 관리와 라이프사이클 기능을 제공합니다. 클래스 기반 컴포넌트에서만 가능했던 상태 관리와 라이프사이클 메소드를 함수형 컴포넌트에서도 사용할 수 있게 해줍니다. 이는 코드의 재사용성과 간결성을 향상시키는 데 도움을 줍니다.

State

State는 컴포넌트의 상태를 나타내며, 사용자와의 상호작용이나 서버로부터의 응답 등으로 인해 변경될 수 있는 데이터입니다. State의 변경은 컴포넌트의 리렌더링을 유발하여 UI가 최신 상태를 반영하게 합니다.

useState

useState는 가장 기본적인 React Hook으로, 함수형 컴포넌트에서 상태를 관리할 수 있게 해줍니다. 이 훅을 사용하면 상태 변수를 선언하고, 이 변수를 업데이트하는 함수를 제공받습니다. 아래 예시에서는 text라는 상태를 생성하고, 이를 setText 함수로 업데이트합니다. 사용자가 텍스트를 클릭하면 상태가 업데이트되어 화면에 새로운 메시지가 표시됩니다.

const App = () => {
  const [text, setText] = useState("Hello World!");

  return (
    <SafeAreaView>
      <Text onPress={() => setText("I learned how to change state!")}>
        {text}
      </Text>
    </SafeAreaView>
  );
};

useEffect 훅

useEffect는 부수 효과를 관리하기 위해 사용되며, 데이터 fetching, 구독 관리, 그리고 다른 외부 소스와의 상호 작용을 처리합니다. 첫 번째 인자로 전달된 함수는 컴포넌트가 렌더링될 때마다 실행되며, 종속성 배열에 특정 값이 들어있는 경우 그 값이 변경될 때만 함수가 실행됩니다. 아래 예시에서는 컴포넌트가 마운트되거나 text 상태가 변경될 때 로그를 출력합니다.

useEffect(() => {
  console.log("The component is rendered!");
}, []);

useEffect(() => {
  console.log("The text has changed!");
}, [text]);

useRef 훅

useRef는 DOM 요소나 변수에 “참조”를 저장하는 데 사용됩니다. 이 참조는 컴포넌트의 lifecycle 동안 유지되며, 참조된 요소나 값에 접근할 때 리렌더링을 유발하지 않습니다. 예를 들어, 스크롤 위치를 제어하거나 이전 상태 값을 저장하는 데 유용합니다. 아래 코드에서는 ScrollView의 참조를 저장하고, 버튼을 클릭하면 스크롤을 맨 위로 이동합니다.

const scrollViewRef = useRef < ScrollView > null;

const handleClick = () => {
  if (scrollViewRef.current) {
    scrollViewRef.current.scrollTo({ x: 0, y: 0, animated: true });
  }
};

useContext 훅

useContext는 컴포넌트 트리를 통한 데이터의 직접적인 전달을 가능하게 하여, 깊은 트리 구조에서 여러 컴포넌트에 걸쳐 데이터를 “prop drilling” 없이 공유할 수 있도록 합니다.

아래 예시에서는 다크 모드 설정을 전역적으로 관리하고, 해당 설정을 여러 컴포넌트에서 직접 읽어 사용할 수 있습니다.

const isDarkMode = useContext(ThemeContext);

Custom Hooks

사용자 정의 훅은 반복적인 로직을 재사용 가능한 함수로 추출하여, 애플리케이션 전반에 걸쳐 일관된 로직을 쉽게 사용할 수 있게 합니다. 예를 들어, useToggle은 토글 상태 관리를 위한 훅으로, 이를 사용하면 토글의 현재 상태와 이 상태를 변경할 수 있는 함수를 제공합니다.

const useToggle = (initialValue = false) => {
  const [value, setValue] = useState(initialValue);
  const toggle = () => setValue(!value);
  return [value, toggle];
};