[리액트] 애니메이션 / div 그룹화 / 클래스 중복 / cleanUp function 활용

div 그룹화 
- 클래스명을 내용마다 다 일일이 부착을 해야 애니메이션이 보임.

 

function TabContent({ 탭 }) {
  return [<div className="end">내용0</div>, <div>내용1</div>, <div>내용2</div>][
    탭
  ];
}

컴포넌트 사용해서 if 문 생략한 코드

function TabContent({ 탭 }) {
  return (
    <div>{[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][탭]}</div>
  );
}

 

---

애니메이션 만들기
- 투명도가 0에서 1로 서서히 증가하는 애니메이션

 

1. 애니메이션 동작 전 스타일을 담을 className 만들기 

2. 애니메이션 동작 후 스타일을 담을 className 만들기 

3. transition 속성도 추가

4. 원할 때 2번 탈부착

1. 애니메이션 동작 전
2. 애니메이션 동작 후 className 만들기 

.start {
  opacity : 0
}
.end {
  opacity : 1;
}

동작 전엔 투명도가 0, 동작 후엔 투명도가 1

3. transition 추가

.start {
  opacity : 0
}
.end {
  opacity : 1;
  transition : opacity 0.5s;
}

transition은 "해당 속성이 변할 때 서서히 변경해주세요~" 라는 뜻

---

div 그룹화 
- 클래스명을 내용마다 다 일일이 부착을 해야 애니메이션이 보임.

function TabContent({ 탭 }) {
  return [<div className="end">내용0</div>, <div>내용1</div>, <div>내용2</div>][
    탭
  ];
}

컴포넌트 사용해서 if 문 생략한 코드

function TabContent({ 탭 }) {
  return;
  <div className="start end">
    {[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][탭]}
  </div>;
}

div 로 묶어주기 

className 를 줘서 한 번에 묶어주기. 

function TabContent({ 탭 }) { 
  return (
    <div className="start end">
      {[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][탭]}
    </div>
  );
}

return 오른쪽의 html이 길다고 생각될 경우

= () 써주기

function TabContent({탭}){

  return (
    <div className="start end">
      { [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][탭] }
    </div>
  )
}

 end라는 className 떼었다가 붙여보면 진짜로 애니메이션이 동작

---

애니메이션 만들기

4. 원할 때 end 부착 - 버튼 눌렀을 때 부착하도록 하기

"버튼을 누를 때 마다 end를 저기 부착해주세요"

탭이라는 state (props) 가 변할때마다

end 라는 클래스를 부착해달라고 코드를 짜기

( 코드를 3번이나 짜야함 버튼이 3개라서. 너무 반복적일 거 같음 )

useEffect 사용

- state가 변경이 될 때마다 특정코드를 실행 

function TabContent({ 탭 }) {
//여기다가 코드 짜기



  return (
    <div className="start">
      {[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][탭]}
    </div>
  );
}
export

 

탭이라는 state (props) 가 변할때마다

end 라는 클래스를 부착해달라고 코드를 짜기

1) 파라미터 두 번째에 [탭] 쓰기

function TabContent({ 탭 }) {
 
  useEffect(() => {

  }, [탭]);

  return (
    <div className="start">
      {[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][탭]}
    </div>
  );
}

[탭] 의미

탭이라는 state가 변경될 때마다 안의 코드 실행해준다는 의미.

2) state를 먼저 하나 만들기

fade 하나 생성하고 setFade 로 변경함수 

function TabContent({ 탭 }) {
  let [fade, setFade] = useState("");
  useEffect(() => {
   
  }, [탭]);

  return (
    <div className="start">
      {[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][탭]}
    </div>
  );
}

대충 문자 자료로 기본값 집어넣기. ("")

대충 문자 자료로 집어 넣는 이유 >>

let [fade, setFade] = useState("");​

""는 빈 문자열 자료
useState("")를 사용하여 초기 상태를 빈 문자열로 설정

fade 상태가 빈 문자열로 시작

useEffect를 사용하여 탭 상태가 변경될 때마다
setFade("end") 를 호출하여
fade 상태를 "end"로 설정

 

3) fade라는 변수를 start 옆에다가 집어넣기

function TabContent({ 탭 }) {
  let [fade, setFade] = useState("");
  useEffect(() => {

  }, [탭]);

  return (
    <div className={`start ${fade}`}>
      {[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][탭]}
    </div>
  );
}

 

fade라는 변수를 start 옆에다가 집어넣는 이유 >>
조건부로 클래스 이름을 적용하여 애니메이션 효과를 제어.
fade상태가 변경되면 (예:"end"로), 해당 클래스가 추가됨.

변수(fade)를 문자 중간, 

html 중간에 넣으려면 {} 사용

변수랑 같이 클래스 중복 사용 
- 따옴표 + 띄어쓰기
- 백틱 사용

 <div className={"start " + fade}>

start 옆에 띄어쓰기 있는 거 주의

 <div className={`start ${fade}`}>

또는 백틱사용

변수 있는 부분은 ${변수} 

4) fade라는 state를 end로 바꿀 수 있도록 코드를 짜기.

function TabContent({ 탭 }) {
  let [fade, setFade] = useState("");
  useEffect(() => {
    setFade("end");
  }, [탭]);

  return (
    <div className={`start ${fade}`}>
      {[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][탭]}
    </div>
  );
}

  useEffect(() => {
    setFade("end");
  }, [탭]);

fade 라는 state 가 end 로 바뀜.

 

end 라는 클래스명 집어넣고 싶은 경우

이렇게 써준다.

 

중괄호 안의 코드가 실행 되면

fade 라는 state 가 end 로 바뀜.

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

setFade = fade 변경함수

---

보이게 하기 
( 떼었다 붙이기 / end 부착 시점을 조금 뒤로 미루기 )
 - cleanUp function 활용 / 타이머 활용

떼었다가 붙이는 모습을 만들기

(잠깐 떼었다가 end 부착해달라는 의미)

1) cleanUp function

function TabContent({ 탭 }) {
  let [fade, setFade] = useState("");
  useEffect(() => {
    setFade("end");
    return () => {};
  }, [탭]);

  return (
    <div className={`start ${fade}`}>
      {[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][탭]}
    </div>
  );
}

useEffect 실행하기 전에, 

특정코드 실행하고 싶은 경우 사용하는 것 =  cleanUp function

여기다가 fade 스테이트를 먼저 공백으로 만들어주게끔 하기

 setFade("");

이렇게 "" 공백만 쓴 경우,

fade 라는 state 를 공백으로 바꿔달라는 의미.

fade 스테이트를 먼저 공백으로 만들어주게끔 하기

2) end 부착 시점을 조금 뒤로 미루기

약간 더 이후로 미루기.

= 타이머 같은 걸 집어넣어줌.

setTimeout(()=>{ setFade('end') }, 100)

0.1초 후에 안의 코드를 실행해줌.

function TabContent({탭}){

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

  useEffect(()=>{
    setTimeout(()=>{ setFade('end') }, 100)
  return ()=>{
    setFade('')
  }
  }, [탭])

  return (
    <div className={'start ' + fade}>
      { [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][탭] }
    </div>
  )
}

clean up function 안에 fade라는 state를 공백으로 바꾸기

clean up function 때문에 useEffect 실행 전엔 'end'가 ' ' 이걸로 바뀜