[react-native] Hooks(1) useState

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

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

 

💡Hooks?

이전에는 컴포넌트의 상태를 관리하거나 생명 주기에 따라 특정 작업을 수행하려면 클래스형 컴포넌트를 사용해야 했지만,

Hooks를 이용하면 함수형 컴포넌트에서도 상태를 관리할 수 있고 생명주기에 맞춰 특정 작업을 수행할 수 있다.

 

 

💡useState

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

useState함수를 호출하면 파라미터로 전달한 initialState값을 초깃값으로 갖는 state(상태 변수)와 setState(변수를 수정할 수 있는 setter 함수)를 배열로 반환한다.

 

 

 

💡useState 사용하기

import React, {useState} from 'react';
import styled from 'styled-components/native'
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(count+1);
            }}
        />
        <Button
            title = '-'
            onPress = {() => {
                setCount(count-1);
            }}
        />
        </>
    )
}

export default Counter;

/* src/components/Couter.js */

count 상태변수와 setCount 세터 함수를 반환하는 useState함수를 사용했다.

title이 +인 버튼에서는 세터함수를 변수에 +1을 할 수 있도록 설정하고

title이 -인 버튼에서는 세터함수가 변수에 -1을 할 수 있도록 설정하였다.

 

import React from 'react';
import styled from 'styled-components/native';
import Counter from './components/Counter'

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

const App = () => {
    return (
    <Container>
        <Counter />
    </Container>
    )
};

export default App;

/* src/App.js /*

import React from 'react';
import styled from 'styled-components/native';

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

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

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

export default Button;

/* src/components/Button.js */

 

💡세터 함수

세터 함수는 비동기로 동작하기 때문에 상태가 여러번 일어날 경우 바로 앞 상태 변경이 바로바로 적용이 안된다.

예를 들어 위의 Couter.js 코드에서

<Button
    title='+'
    onPress{() => 
    	setCount(count+1);
        setCount(count+1);
    }
/>

이렇게 세터함수를 두 번 호출하도록 적용을 해줘도 count 변수에 상태가 바로바로 갱신되어 적용이 안되어서 결국 count는 1만 증가한다.

즉, 세터 함수가 비동기로 동작하기 때문에 세터 함수를 호출해도 바로 상태가 변경되지 않는다는 문제점이 발생한다!

 

이렇세 상태의 여러 업데이터가 한꺼번에 발생할 때, 세터함수의 parameter로 '함수' 자체를 전달함으로써 문제를 해결할 수 있다.

import React, {useState} from 'react';
import styled from 'styled-components/native'
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)
            }}
        />
        <Button
            title = '-'
            onPress = {() => {
                setCount(count-1);
            }}
        />
        </>
    )
}

export default Counter;

/* src/components/Couter.js */

이렇게 세터함수(setCount)함수에 함수를 인자로 전달하여 이전 값을 이용할 수 있도록 하면 + 버튼을 누를 때마다 count가 2씩 증가한다.