[react-native] Hooks(2) useEffect

이 글은 <처음 배우는 리액트 네이티브 (김범준, 한빛미디어)>를 읽고 이해한 바를 바탕으로 작성되었습니다.

GitHub - Alchemist85K/my-first-react-native: [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다.

💡useEffect

useEffect는 컴포넌트가 렌더링될 때마다 원하는 작업이 실행되도록 설정하는 기능이다.

useEffect(() => {}, []);

첫번째 인자로 전달된 함수는 조건을 만족할 때마다 호출되고, 두번째 인자로 전달되는 배열로 그 조건을 작성할 수 있다.

 

💡useEffect 사용해보기

import React, {useState, useEffect} from 'react';
import styled from 'styled-components/native';

const StyledTextInput = styled.TextInput.attrs({
    autoCapitalize:'none',
    autoCorrect: false,
})`
    border: 1px solid #757575;
    padding:10px;
    margin: 10px 0;
    width: 200px;
    font-size: 20px;
`;

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

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 => setEmail(text)}
            placeholder='email'
        />
        </>
    )
};

export default Form;

/* src/components/Form.js */

Form.js에서는 useEffect의 두번째 함수에 아무런 파라미터를 전달해주지 않았다. 두번째 파라미터는 첫번째 파라미터의 함수가 호출되는 조건인데, 이게 없으므로 조건없이 렌더링 될 때마다 첫번째 인자의 함수가 호출된다.

 

useEffect를 사용해서 렌더링될때마다 name과 email을 출력하도록 하였다.

 

 

💡특정 조건에서 실행

이번에는 두번째 파라미터에 조건을 설정해서 특정 조건에서 useEffect함수를 실행해보자.

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

useEffect 함수부분을 이렇게 수정하였다. 두번째 parameter로 [email]을 넘겨주어 email의 상태값이 변경되면 name과 email값이 출력되도록 설정해주었다.

 

💡 컴포넌트가 마운트될 때 실행하기

    useEffect(() => {
        console.log('\n====== Form Component Mount =====\n')
    }, []);

이렇게 두번째 파라미터로 배열을 넘겨주되, 배열 안에 아무것도 작성하지 않으면 컴포넌트가 처음 렌더링될 때만 useEffect의 첫번째 파라미터의 함수가 실행된다.

 

💡 컴포넌트가 언마운트될 때 실행하기

useEffect에서는 첫번째 parameter로 전달하는 함수에서 반환하는 함수를 정리cleanup 함수라고 한다.

 

    useEffect(() => {
        console.log('\n====== Form Component Mount ======\n');
        return () => console.log('\n====== Form Component Unmount ======\n');
    }, []);

첫번째 함수에서 returen함수를 써서 정리함수도 설정해주었다.

두번째 인자인 배열은 빈배열로하여 컴포넌트가 언마운트될 때 정리함수를 실행시켜보자.

 

import React from 'react';
import { Button } from 'react-native';
import styled from 'styled-components/native';
import Counter from './components/Counter'
import Form from './components/Form'
import Button from './components/Button'

const Container = styled.View`
    flex: 1;
    background-color: #fff;
    justify-content: center;
    align-items: center;
`;

const App = () => {
    const [isVisible, setIsVisible] = useState(true);

    return (
        <Container>
            <Button
                title = {isVisible? 'Hide' : 'Show'}
                onPress={() => setIsVisible(prev => !prev)} />
            {isVisible && <Form />}
        </Container>
    );
};

export default App;

/* src/App.js */

isVisible 상태변수와 setIsVisible 세터 함수를 useState로 생성하고, 버튼을 누르면 그 상태가 변경되도록 한다.

그리고 isVisible 상태변수의 값이 True이면 Form 컴포넌트가 나타나도록 한다.

 

여기서 Form 컴포넌트가 마운트mount되면 (show를 눌러서 isVisible이 True가 되면) 첫번째 인자의 함수가 호출이 되서 '===== Form Component Mount ======'가 출력되고,

Form 컴포넌트가 언마운트unmount되면 (hide를 눌러서 isVisible이 False가 되면) 첫번째 인자의 함수의 반환 함수(정리 함수)가 호출이 된서, '====== Form Component Unmount ======'가 출력된다.