React Native 하루 기록 - React Hook

♩ useState

• 함수형 component에서 사용하는게 편하다
• 가독성 및 코드의 길이가 줄어듬
• state상태에는 어떠한 상태라도 들어감

const [count, setCount] = useState(0);
const [isOn, setIsOn] = useState(false);
const [name, setName] = useState("");

...
<Button onPress={() => setCount(count+1)} />
<Switch 
	value={isOn}
    onValueChange={v => {
    		setIsOn(v);
    	}
    }
/>

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

♩ 클래스 컴포넌트의 생명주기

순서 

1. 최초 : Constructor -> render -> componentDidMount
2. 변경: render -> componentDidUpdate
3. 제거 : componentWillUnmount

• componentDidMount 
  • 첫 렌더링이 끝난후 딱한번
• componentDidUpdate
  • prop이나 state가 바껴서 rerendering을 마친 후
• componentWillUnmount
  • component가 제거되기 직전에 호출

 

♩ 함수형 컴포넌트의 생명주기

♪ useEffect 

위 내용들을 useEffect로 구현 가능

// 가장 최초에 한번만 실행, didMount대체
useEffect(() => {
// 최초에 동작할 내용 정의	
},[]);

// count의 변화를 감지 = update기능이 동작, didUpdate를 대체
useEffect(() => {
// count값 변경에 따른 동작	
},[count]);