UI 제작 관습

페이지가 보였다 안보였다 스위치를 착안하여
항상 보이는 UI가 아니라면 삼항연산자로 켜졌다 꺼졌다 스위치처럼 만드는게 관습!!

state값으로 true / false

보이고 안보이고를 state로 저장하는게 관건

function Detail() {
	let [alert, setAlert] = useState(true);
    
  	useEffect(() => { 
    	  let timer = setTimeout(() => { setAlert(false) }, 2000);     
    	}, [ ]) // 빈 배열로  useEffect의 2번째 인자로 두면 mount됐을때만 실행
      
    return (
      {
        alert === true
	? <div> // 쌩 HTML을 넣을 수도 있고, 컴포넌트르 넣어줄 수도 있음.
            <p>재고가 얼마 남지 않았습니다</p> 	
          </div>
        : null
      }
    )
  

Detail 컴포넌트가 업데이트 될때도 useEffect 실해되는걸 막기위해선?

(Detail.js 파일)

function Detail(){

  let [ alert, setAlert ] = useState(true);
  let [input, setInput] = useState('');
  useEffect(()=>{
    let timer = setTimeout(()=>{ setAlert(false) }, 2000);
  });
  
  return (
    <HTML많은곳/>

    { input }
    <input onChange={ (e)=>{ setInput(e.target.value) }}/>

    {
      alert === true
      ? (<div className="my-alert2">
          <p>재고가 얼마 남지 않았습니다</p>
        </div>)
      : null
    }
  )
}

▲
1. input라는 빈 state 생성
2. input 태그를 만들어서 거기 문자가 입력될 때마다 input이라는 state가 변경되도록함.
3. 그리고 그 input state를 확인하기 위해 { input } 데이터바인딩 함.

input 만드는 이유 Detail 컴포넌트 강제 업데이트.
input 에다가 뭔가 입력하면 계속 Detail 컴포넌트가 재렌더링됨(업데이트됨)

*참고) state가 변경될때마다 재랜더링됨

그럼 input에다가 뭔가 입력할 때마다 useEffect() 실행되면 쓸 때 없는 동작으로 자원 낭비가 됨.
그래서 useEffect()의 두번째 인자로 [], 또는 바뀔때마다 실행되기를 바라는 state를 넣는다.

[]만 쓰면 mount될때만 useEffect가 실행됨.
[alert]만 쓰면 mount될때, alert값 변경될때 useEffect 실행됨

ex)

useEffect(()=>{
    let timer = setTimeout(()=>{ setAlert(false) }, 2000);
},[alert]);
// alert라는 state가 변경될때만 감지해서 useEffect 실행됨.

*참고

useEffect(()=>{
  let timer = setTimeout(()=>{ setAlert(false) }, 2000);
},[alert,input]);
// 위처럼 2개의 state만 감지해서 useEffect를 실행할 수도 있음.

useEffect는 랜더링 된 후 무조건 한 번은 실행

setTimeout 타이머 썼으면 타이머해제 필수!

Detail 방문시 2초 후에 UI 사라지게 해주세요~ 라고 코드가 완성됨.
근데 2초가 되기도 전에 Detail을 벗어나게 된다면?

지금은 별 문제없는 것 같지만 남아있는 타이머 때문에 이상한 현상 발생할 수 있음
그래서 컴포넌트가 사라질 때 타이머를 없애는 코드 추가해야함.

useEffect(()=>{
  let timer = setTimeout(()=>{ alert변경(false) }, 2000);
  return () => { clearTimeout(timer) }
  // clearTimeout으로 timer 제거
  // return 뒤에는 해당 컴포넌트가 사라질때 실행할 코드 작성
}, []);