[RN] Hooks (useState, useEffect, useRef)

2023. 2. 15. 00:04·👩‍💻 Programming/React
반응형

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>
     );
 };
반응형

'👩‍💻 Programming > React' 카테고리의 다른 글

[RN] 상태관리 라이브러리 Redux란 ?  (0) 2023.03.02
[RN] React Query 기초 지식  (0) 2023.02.15
[React] Next.js 프레임워크의 정의와 장단점  (4) 2023.02.05
[RN] React Native의 정의와 장단점  (0) 2023.01.30
FCM Token 만료 및 갱신 (3)  (0) 2023.01.26
'👩‍💻 Programming/React' 카테고리의 다른 글
  • [RN] 상태관리 라이브러리 Redux란 ?
  • [RN] React Query 기초 지식
  • [React] Next.js 프레임워크의 정의와 장단점
  • [RN] React Native의 정의와 장단점
S J ʕ·͡ᴥ·ʔ
S J ʕ·͡ᴥ·ʔ
  • S J ʕ·͡ᴥ·ʔ
    누워서 코딩하기 - 떡 먹는 것처럼 쉽고 재밌게!
    S J ʕ·͡ᴥ·ʔ
  • 전체
    오늘
    어제
    • 분류 전체보기 (99)
      • 👩‍💻 Programming (25)
        • React (18)
        • JavaScript (5)
        • Swift (1)
        • JAVA (1)
      • 🌐 CS-Study (16)
        • CS 스터디 (13)
        • 컴퓨터 네트워크 (3)
      • 🔧 Backend (20)
      • 🎨 UX & HCI (12)
      • 📊 Data analysis (7)
      • 📚 License study (19)
  • 인기 글

  • hELLO· Designed By정상우.v4.10.3
S J ʕ·͡ᴥ·ʔ
[RN] Hooks (useState, useEffect, useRef)
상단으로

티스토리툴바