https://stackoverflow.com/questions/54938236/can-you-early-return-with-react-hooks
https://ko.reactjs.org/docs/hooks-rules.html
로그인 성공시 toastMessage 값이 바뀌면 Toast 컴포넌트가 리렌더링 된다.
이때 toastMessage의 배열에 값이 없으면 Toast 컴포넌트를 리턴하여 끝내고,
배열에 값이 있다면 jsx가 렌더된다.
이후 1초 뒤에 toastMessage배열에 값을 없애주어 toast 팝업창이 사라지게 한다.
useEffect를 실행하기 전에 if문이 실행된다면, 아래있는 hook은 실행이 안됨.
그러나, hook은 최소 한번은 실행되야 하기때문에 이 코드는 오류가 남.
const Toast = ({ toastMessage, setToastMessage }) => {
// 1. 조건문 먼저 실행되면 컴포넌트가 종료되서, 아래있는 useEffect hook이 안읽히는 경우가 있게됨.
if (toastMessage.length < 1) {
return null;
}
// 2. hook은 : 무조건 한번은 실행되야 된다. 따라서 (if문 앞쪽에 쓰는것이 올바름.)
useEffect(() => {
if (toastMessage.length > 0) {
setTimeout(() => {
setToastMessage([]);
}, 1000);
}
}, [toastMessage]);
const Toast = ({ toastMessage, setToastMessage }) => {
// 1. hook은 : 무조건 한번은 실행되야 된다. 따라서 if문을 hook코드 밑에 써줌
useEffect(() => {
if (toastMessage.length > 0) {
setTimeout(() => {
setToastMessage([]);
}, 1000);
}
}, [toastMessage]);
// 2. 어떤 컴포넌트가 조건부로 나오고 안나오고 할때, 이런식으로 컴포넌트 안에서 return을 해줘버림
if (toastMessage.length < 1) {
return null;
}
return (
<div className="toast">
<p className="imoji">🙂</p>
{toastMessage.join()}
</div>
);
};
import React, { useState } from "react"
function Hooks(props) {
if (!props.isExist) {
const [state, setState] = useState(); // Error!
}
const [state2, setState2] = useState(); // Error!
}
// react가 여러 훅들을 구분할 수 있는 유일한 정보는 훅이 사용된 순서 뿐이기 때문.