[리액트 네이티브] Hooks, useEffect, useRef, useMemo, 커스텀 Hooks 만들기

🤍리액트 네이티브 훅(React Native Hooks)이란?

• 리액트 16.8 버전에서 새롭게 추가된 기능
• 이전에는 컴포넌트 상태 관리, 생명 주기에 따른 특정 작업 시 클래스형 컴포넌트를 사용해야 했음.
• Hooks는 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동할 수 있게 해주는 함수

Hooks	목적
useState	상태 유지, 변경
useEffect	이벤트 처리
useContext	정보 공유
useReducer	상태 유지 및 변경(Redux)
useCallback	콜백 함수 캐시
useMemo	데이터, 값 캐시
useRef	특정 컴포넌트 선택

 

🤍리액트 네이티브 훅(React Native Hooks) 실습

expo init react-native-hooks	//프로젝트 생성
npm install styled-components	//스타일드 컴포넌트 설치

간단한 Button 컴포넌트 작성

import React from "react";
import styled from "styled-components";

const Container = styled.TouchableOpacity`
    background-color: #3498db;
    border-radius: 15px;
    padding: 15px 30px;
    margin: 10px 0px;
    justify-content: center;
`;

const Title = styled.Text`
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
`;

const Button = ({title, onPress}) => {
    return (
        <Container onPress={onPress}>
            <Title>{title}</Title>
        </Container>
    );
};

export default Button;

1. useState, 세터함수

//useState 예시 코드
const [state, setState] = useState(initialState);

//세터 함수 예시코드
setState(prevState => {});

• Counter 컴포넌트 작성
• 숫자 상태를 나타내는 count를 생성하고 Button 컴포넌트를 이용해 클릭 시마다 세터 함수를 이용해 상태 변경
• 이전 상태 값에 의존하여 상태를 변경할 경우, 세터 함수에 함수를 인자로 전달하여 이전 값을 이용하도록 작성

import React, {useState} from "react";
import styled from "styled-components";
import Button from "./Button";

const StyledText = styled.Text`
    font-size: 24px;
    margin: 10px;
`;

const Counter = () => {
    const [count, setCount] = useState(0);

    return (
        <>
            <StyledText>count: {count}</StyledText>
            <Button
                title="+"
                onPress={() => {
                    setCount(prevCount => prevCount + 1);
                    setCount(prevCount => prevCount + 1);
                    console.log(`count: ${count}`);
                }}
            />
        </>
    );
};

export default Counter;

🔋안드로이드 스튜디오(Android Studio) 애뮬레이터로 실행 화면 확인

콘솔에 찍히는 결과

2. useEffect

• useEffect : 컴포넌트 랜더링 시마다 원하는 작업이 실행되도록 설정할 수 있는 기능
• 첫 번째 파라미터로 전달된 함수는 조건 만족 시 호출되고, 두 번째 파라미터로 전달되는 배열을 이용해 함수가 호출되는 조건 설정

//useEffect 예시 코드
useEffect(() -> {},[]);

• 두 번째 파라미터에 어떤 값도 전달하지 않으면, useEffect의 첫 번째 파라미터로 전달된 함수는 컴포넌트가 렌더링될 때마다 호출됨.

const Form = () => {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');

    useEffect(() => {
        console.log(`name: ${name}, email: ${email}\n`);
    });

    return (
        <>
            <StyledText>Name: {name}</StyledText>
            <StyledText>Email: {email}</StyledText>
            <StyledTextInput
                value={name}
                onChangeText={text => setName(text)}
                placeholder="name"
            />
             <StyledTextInput
                value={email}
                onChangeText={text => setName(text)}
                placeholder="email"
            />
        </>
    );
};

🔋안드로이드 스튜디오(Android Studio) 애뮬레이터로 실행 화면 확인

3. useRef

• useRef : 특정 컴포넌트 선택, ex)컴포넌트로 포커스를 설정하려면 해당 컴포넌트를 선택해야함.

//useRef 예시코드
const ref = useRef(initialValue);

• 컴포넌트의 ref로 지정하면 생성된 변수에 값이 저장되는 것이 아닌, 변수의 current 프로퍼티에 해당 값을 담음.
• useState를 이용해 생성된 상태와 달리 useRef의 내용이 바뀌어도 컴포넌트는 다시 랜더링되지 않음!

• useRef 함수를 이용해 refName, refEmail을 생성해 각각 이름과 이메일을 입력받는 TextInput 컴포넌트의 ref로 설정

4.useMemo

• useMemo : 동일한 연산의 반복 수행을 제거해 성능 최적화 시 사용됨.
• 첫 번째 파라미터에는 함수 전달, 두 번째 파라미터에는 함수 실행 조건을 배열로 전달 -> 지정된 값에 변화가 있는 경우에만 함수가 호출됨.

//useMemo 예시 코드
useMemo(()=>{}, []);

화면에서 버튼을 클릭하면 문자열 길이를 구하는 컴포넌트 Length.js

const getLength = text => {
    console.log(`Target Text: ${text}`);
    return text.length;
};

const list = ['JavaScript', 'Expo', 'Expo', 'React Native'];

let idx = 0;
const Length = () => {
    const [text, setText] = useState(list[0]);
    //const [length, setLength] = useState('');
    const _onPress = () => {
        setLength(getLength(text));
        ++idx;
        if (idx < list.length) setLength(list(idx));
    };

    //useMemo를 사용해 text 값이 변경되었을 때에만 길이를 구하도록 수정
    const length = useMemo(()=>getLength(text), [text]);

    return (
        <>
            <StyledText>Text: {text}</StyledText>
            <StyledText>Length: {length}</StyledText>
            <Button title="Get Length" onPress={_onPress} />
        </>
    );
};

export default Length;

🔋안드로이드 스튜디오(Android Studio) 애뮬레이터로 실행 화면 확인

🤍커스텀 Hooks 만들기

• 특정 API에 GET 요청을 보내고 응답을 받는 함수
• 리액트 네이티브에서는 네트워크 통신을 위해 Fetch, XMLHttpRequest,WebSocket 제공

전달받은 API의 주소로 요청을 보내고 그 결과를 성공 여부에 따라 data, error에 담아 반환하는 useFetch 컴포넌트

• useFetch를 이용해 API를 요청하는 Dog 컴포넌트
• Dogs API를 이용해 무작위로 강아지 사진을 받아오는 컴포넌트

https://dog.ceo/dog-api/ 

Dog API

const URL = 'https://dog.ceo/api/breeds/image/random';
const Dog = () => {
    const {data, error, inProgress} = useFetch(URL);

    return (
        <>
            {inProgress && (
                <LoadingMessage>The API request is in progress</LoadingMessage>
            )}
            <StyledImage source={data?.message ? {uri: data.message}:null}/>
            <ErrorMessage>{error?.message}</ErrorMessage>
        </>
    );
};

export default Dog;

🔋Expo Go를 통해 실행화면 확인