클래스명 붙이기

오늘은 CSS 관련한걸 해봤다
사실 어제 좀 고생한게 클래스명 붙이는 법이 react적으로는 어떤지를 몰라서도 있었어가지고

CSS import

import  "../App.css";
// css 임포트할때는 뭐뭐 가 아니고 그냥 import App.css

이거 import 다른거랑 똑같이 import 뭐뭐 from "../App.css" 이렇게 썼더니 에러나길래 다 빼니까 된다.

{/* <TabContent className=" end" /> 여기가 아니라 그 자식한테 부착해줘야 되는거였음 */}
<TabContent activeTab={activeTab} />

function TabContent({activeTab}){
  return (
    <div className="start end box">
      { [<div>내용1</div>, <div>내용2</div>, <div>내용3</div>][activeTab] }
    </div>
  )
}

useEffect 사용

// 클릭하면 activeTab이 변함 -> 그 때마다 바꿔주면 됨
useEffect(()=>{
},activeTab)

리액트식 클래스명 다는 법 !!!

  let [fade, setFade] = useState('');

state를 빈 문자열같은걸로 하나 만들고
이게 바뀔 때 state 변경함수를 이용해서 빈 문자열을 원하는 클래스명으로 바꿔 주면 된다!!

function TabContent({activeTab}){
  let [fade, setFade] = useState('');
  useEffect(()=>{
    setFade('end');
  },activeTab)
  return (
    <div className={"start box " + fade}>
      { [<div>내용1</div>, <div>내용2</div>, <div>내용3</div>][activeTab] }
    </div>
  )
}

* 기존 클래스명에 띄어쓰기 유의.

---

뗐다가 붙여야 제대로 반영이 되니 clean up도 해줌

function TabContent({activeTab}){
  let [fade, setFade] = useState('');
  useEffect(()=>{
    setTimeout(()=>{
      setFade('end')
    },1000)
    // automatic batching 때문에 state 다 변경하고 나서 마지막에 반영(재랜더링)함
    // 그래서 실행 시점을 미뤄줘야 정상적으로 동작

    return () => {
      setFade('') // 얘가 먼저 실행됨
    }
  },activeTab)

---

Detail 컴포넌트가 로드될때도 붙여보려고 했는데,
컴포넌트 단위니까 부모 컴포넌트에서 달아줘야겠지 ? 라고 잘못생각했다. ;;;
App.js

 <Route path="/detail/:id"  element={<Detail shoes={shoes} className="start black " />} />

황당한 생각이라 다음번엔 안하려고 써둠

  let [fade2, setFade2] = useState('');
  useEffect(()=>{
    let newTimer = setTimeout(()=>{ setFade2('end'); }, 1000);
    return () => { 
      setFade2(' white');
      clearTimeout(newTimer);
    }
  } )


return foundProduct ? (
    <div className={"container black "+ fade2}>

자식 컴포넌트의 제일 위에 컨테이너에 가서 붙여봄. 잘 된다~!