[React] 16. 컴포넌트 전환효과 부여해주기

이전 글 ▼

0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅

1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX

2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object)

2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용)

3. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 3. 컴포넌트 (Component)

4. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 4. 동적인 UI 제작하기

5. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 5. 반복되는 부분 축약하기 (map)

6. 2023.05.29 - [🌌 | WEB DEV/React] - [React] 6. props

7. 2023.07.03 - [🌌 | WEB DEV/React] - [React] 7. 이미지 삽입하기(css, html, public폴더에서 가져오기)

8. 2023.07.06 - [🌌 | WEB DEV/React] - [React] 8. 다른 파일에서 데이터 가져오기

9. 2023.07.09 - [🌌 | WEB DEV/React] - [React] 9. 라우팅-1 (react-router-dom세팅, Routes, Route, Link)

10. 2023.07.10 - [🌌 | WEB DEV/React] - [React] 라우팅-2 (useNavigate, 404page, Nested Routes, Outlet)

11. 2023.10.03 - [🌌 | WEB DEV/React] - [React] 11. 라우팅-3 양산형 라우팅

12. 2023.10.04 - [🌌 | WEB DEV/React] - [React] 12. Styled-components (+ 한 컴포넌트에 css파일 적용법)

13. 2024.01.02 - [🌌 | WEB DEV/React] - [React] 13. 리액트 컴포넌트의 Lifecycle와 useEffect

14. 2024.01.12 - [🌌 | WEB DEV/React] - [React] 14. React와 서버 연동하기 (ajax를 이용해! (get, post) )

15. 2024.01.13 - [🌌 | WEB DEV/React] - [React] 15. React 메뉴탭 만들기 (클릭 이벤트에 따른 내용 변경)

 

컴포넌트를 전환할때 효과를 넣어보자!

 

이전 포스트와 이어집니다!

2024.01.13 - [🌌 | WEB DEV/React] - [React] 15. React 메뉴탭 만들기 (클릭 이벤트에 따른 내용 변경)

[React] 15. React 메뉴탭 만들기 (클릭 이벤트에 따른 내용 변경)

 

1. 전환효과를 위한 4step

컴포넌트 전환 과정은 아래의 4단계를 거쳐서 만들어주면 된다.

[전환효과 4step]
1) 동작 전 style 담은 className 생성
2) 동작 후 style 담을 className 생성
3) transition 속성 추가
4) 상황에 따른 2)번 className 제거or생성

 

 

---

2. 제작 방법

아래와 같이 메뉴 탭을 클릭하면 아래의 컨텐츠 컴포넌트가 바뀌고, 이들에게 전환효과를 넣어보자.

 

 

1) 동작 전 style 담은 className 생성

.unselected{
  transform: scale(0);
}

 

2) 동작 후 style 담을 className 생성

.selected{
  transform: scale(100%);
}

 

3) transition 속성 추가

0.3초의 전환시간을 부여하였다.

.selected{
  transform: scale(100%);
  transition: .3s
}

 

 

4) 상황에 따른 2)번 className 제거or생성

 

- className 달아주기

전환 전, 후를 대상 태그에 달아준 후,

전환 후 style을 담은 className을 전환 이벤트 발생 시 제거->생성해줄 것이다.

(전환 전: unselected, 전환 후: selected)

...
<div className="tab-content">
  {
    <RenderTab idx={tabIdx}/>
  }
</div>
...

 

위의 경우에는 컴포넌트를 제작하였기 때문에 <RenderTab/>에 className을 직접 다는 것이 아닌

아래처럼 실제로 렌더링 되는 태그에 달아주어야 한다.

 

function RenderTab({idx}){
  return(
    <div className={"unselected selected"}>
      {
        [ <Tab1/>,  <Tab2/>,  <Tab3/> ][idx]
      }
    </div>
  )
}

 

 

- className 제어

평소에는 selected라는 className이 붙어있지 않지만

state를 이용해서 tab이 바뀌는 경우 붙도록 해보자.

 

className을 제어할 때 주의할 점은 "unselected "처럼 공백을 두어야한다는 점이다.

두지 않는다면 "unselectedselected" 라는 하나의 className으로 인식되기 때문에

원하는 style을 적용할 수 없다!

function RenderTab({idx}){
  const [pop, setPop] = useState("");
    
  useEffect(()=>{
    setTimeout(() => {
      setPop("selected");
    }, 100);
    return()=>{
      setPop("")
    }
  },[idx])

  return(
    <div className={"unselected " + pop}>
      {
        [ <Tab1/>,  <Tab2/>,  <Tab3/> ][idx]
      }
    </div>
  )
}

 

① 초기화

pop 이라는 state를 생성해준 뒤, "" 으로 초기화하였다.

const [pop, setPop] = useState("");

 

② 클릭 시 (컴포넌트 생성)

setPop("") : "unselected " / setPop("selected") : "unselected selected" 이 되도록 해주어야한다.

useEffect(()=>{
  setPop("selected");
  return()=>{
    setPop("")
  }
},[idx])

 

클릭 이벤트 발생시, 동작 전style, 동작 후 style을 순서대로 보여주기 위해서

setPop(""); setPop("selected"); 순으로 코드가 실행이 되어야 한다.

하지만 이들을 붙여서 사용할 경우 제대로 동작하지 않는다.

 

따라서 clean up function을 이용하면 useEffect 내부 코드 직전에 setPop("")을 먼저 실행한 뒤,

useEffect 내부에서 setPop("selected")를 실행할 수 있다!

 

이렇게만 했다면 역시나 동작하지 않는다..

setTimeout 등을 이용해 시간차를 두어 state 변화를 주어야한다.

useEffect(()=>{
  setTimeout(() => {
    setPop("selected");
  }, 100);
  return()=>{
    setPop("")
  }
},[idx])

 

이는 React18에 나온 신기능인 automatic batching 때문인데,

이로 인해 state를 한번에 연달아서 변경하려고 할때, 모든 state를 변경한 후 마지막에 화면이 재렌더링된다.

(setPop(""); setPop("selected");를 붙여서 쓰면 원하는 결과를 얻을 수 없었던 이유)

 

그렇기에 ""으로의 설정과 "selected"로의 설정을 분리시켜주어야한다.

 

 

※ flushSync 활용하기

import { flushSync } from "react-dom"

useEffect(()=>{
  flushSync(()=>{setPop("");})
  setPop("selected")
},[idx])

setTimeout 과 cleanup function을 이용했던 방법 외에도
flushSync()를 활용하는 방법이 있다.

이는 aysnc await 처럼 비동기 코드를 동기적으로 만들어서
react의 리렌더링을 강제할 수 있는 방법이다!

 

 

 

- 결과