컴포넌트의 state(상태)를 관리 할 수 있다.
상태에 따라, 다른 화면 출력
React에서 사용자의 반응에 따라, 화면을 바꿔주기(렌더링) 위해 사용되는 트리거역할을 하는 변수
React가 state를 감시하고, 바뀐 정보에 따른 화면을 표시해준다.
( state와 setState함수의 반환값을 비교 )
// React에 기본적으로 내장되어 있는 useState 훅을 사용하면, state를 만들 수 있다.
import { useState } from "react";
// const [state, state변경함수] = useState(기본 state값);
const [isLoggedIn, setIsLoggedIn] = useState(false);
// 전에 만든 "isLoggedIn" state의 값을 true로 변경한다.
setIsLoggedIn(true);
// ** useState함수를 사용해 만든 "state 변경 함수"를 사용하여야 한다.
렌더링 이후에 실행할 코드를 만들수 있다.
어떤 변수가 변경될때마다(의존성), 특정기능이 작동하도록 할 수 있다.
// React에 기본적으로 내장되어 있는 useState와, useEffect 불러오기
import { setState, useEffect } from "react";
...
function App() {
const [data, changeData] = setState(false)
// useEffect(실행할 함수, 트리거가 될 변수)
useEffect(() => {
if (data.me === null) {
console.log("Data changed!")
}
return () => console.log("컴포넌트 파괴, 언마운트 됨")
}, [data]);
// data변수가 바뀔때마다, react가 이를 감지해, 콘솔창에 "Data changed!" 출력
return (
<div>
<button value="적용" onClick={changeData(!data)} />
</div>
)
}
export default App;
useEffect 동작하기 전에 특정코드를 실행하고 싶으면
return ()=>{} 안에 넣을 수 있습니다.
useEffect(()=>{
그 다음 실행됨
return ()=>{
여기있는게 먼저실행됨
}
}, [count])
그럼 useEffect 안에 있는 코드를 실행하기 전에
return ()=>{ } 안에 있는 코드를 실행해줍니다.
참고로 저걸 clean up function 이라고 부릅니다.
useEffect(()=>{
let a = setTimeout(()=>{ setAlert(false) }, 2000)
return ()=>{
clearTimeout(a)
}
}, [])
(참고1) clean up function에는 타이머제거, socket 연결요청제거, ajax요청 중단 이런 코드를 많이 작성합니다.
(참고2) 컴포넌트 unmount 시에도 clean up function 안에 있던게 1회 실행됩니다.
1. 재렌더링마다 코드를 실행가능합니다.
useEffect(()=>{ 실행할코드 })
2. 컴포넌트 mount시 (로드시) 1회만 실행가능합니다.
useEffect(()=>{ 실행할코드 }, [])
3. useEffect 안의 코드 실행 전에 항상 실행됩니다.
useEffect(()=>{
return ()=>{
실행할코드
}
})
4. 컴포넌트 unmount시 1회 실행됩니다.
useEffect(()=>{
return ()=>{
실행할코드
}
}, [])
5. state1이 변경될 때만 실행됩니다.
useEffect(()=>{
실행할코드
}, [state1])
컴포넌트나 HTML 요소를 래퍼런스로 관리할 수 있다.
HTML요소(태그)나 컴포넌트의 메모리주소를 가져와, 객체(레퍼런스) 형식으로 관리할 수 있다.
export default App(){
// 괄호()속에 초기값 입력
const viewRef = useRef(null)
// viewRef 객체에 있는 메소드를 사용한다.
function testFunc(){
viewRef.current?.메소드()
}
/// viewRef요소에, 해당 메모리 주소 전달
return <View ref={viewRef}>
<Text>Test</Text>
</View>
}