[RN] Hooks (useState, useEffect, useRef)

Hooks

React 16.8 버전에서 새롭게 추가된 기능이다.

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

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

 

컴포넌트의 생명 주기

모든 컴포넌트는 생성 → 업데이트 → 제거 의 생명주기를 갖는다.

생명주기의 때에 따라 어떤 작업을 처리해야 하는지 지정해주어야 불필요한 업데이트를 방지할 수 있다.

따라서 Hooks를 써서 컴포넌트의 생명 주기에 맞춰 원하는 작업을 제때 실행시킬 수 있게 해야 한다.

 

1. useState

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

• state : initialState를 초기값으로 갖는 상태 변수
• setState : state를 수정할 수 있는 세터 함수

관리해야 하는 상태의 수만큼 여러 번 사용 가능

상태를 관리하는 변수는 반드시 setState 함수를 이용해 값을 변경해야 하고 상태가 변경되면 재랜더링됨.

 // 버튼을 누를 때 마다 count 상태 변수에 1씩 증가하는 값이 저장됨.
const Example = () => {
    const [count, setCount]  = useState<number>(0);
    return (
        <View>
            <TouchableOpacity onPress = {() => setCount(count+1)} >
            	<Text>+</Text>
            </TouchableOpacity>
        </View>
     );
 };

 

2. useEffect

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

• 첫번째 파라미터: 조건을 만족할 때마다 호출
• 두번째 파라미터: 함수가 호출되는 조건 설정

컴포넌트가 랜더링될 때마다 원하는 작업이 실행되도록 설정할 수 있는 기능

 

// textInput에 값을 변경하면 name이 변경됨
// name이 변경될 때마다 console.log("name: " + name); 함수 실행

const Example = () => {
    const [name, setName]  = useState<string>('');
    useEffect(()=> {
        console.log("name: " + name);
    }, [name]);

    return (
        <View>
            <TextInput
                value = {name}
                onChangeText = {setName}
             />
         </View>
     );
 };