function FlagState() : Element
const isLogin =
has Token &&
hasCookie &&
isValidCookie &&
isNewUser = false &&
isValidToken;
return <div>{isLogin && "안녕하세요! 반갑습니다."}</div>
props의 값이 변하게 되는 경우 useState를 쓰지 말고 아래와 같이 const로 상태를 선언
const UserState = ({ userList }) => {
const filteredUserList = userList.filter((user) => user.completed === true);
};
∵ 컴포넌트 내부 변수는 렌더링마다 고유한 값을 가지기 때문에.
컴포넌트의 전체적인 수명과 동일하게 지속된 정보를 일관적으로 제공해야하는 경우
function RefInsteadOfState() {
const isMounted = useRef(false);
useEffect(() => {
isMounted.current = true;
return () => (isMounted.current = false);
}, []);
return <div>{isMounted && "컴포넌트 마운트 완료!"}</div>
}
const PROMISE_STATE = {
INTI: 'init',
LOADING: 'loading',
FINISH: 'finish',
ERROR: 'error'
}
function FlatState() {
// 하나의 state로 관리
const [promiseState, setPromiseState] = useState(PROMISE_STATE.INTI);
const fetchData = () => {
setPromiseState(PROMISE_STATE.LOADING);
fetch(url)
.then(() => {
setPromiseState(PROMISE_STATE.FINISH)
})
.catch(() => {
setPromiseState(PROMISE_STATE.ERROR)
})
}
if (PROMISE_STATE.LOADING === promiseState) return <LoadingPanle/>
if (PROMISE_STATE.FINISH === promiseState) return <FinishPanle/>
if (PROMISE_STATE.ERROR === promiseState) return <ErrorPanle/>
}
function ObjectState() {
// 하나의 state로 관리
const [promiseState, setPromiseState] = useState({
isLoaidng: false,
isFinish: false,
isError: false
});
}