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

이전 글 ▼ 더보기 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, obje

bluishhot-star.tistory.com

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의 리렌더링을 강제할 수 있는 방법이다!

- 결과

저작자표시

'🌌 | WEB DEV > React' 카테고리의 다른 글

[React] 15. React 메뉴탭 만들기 (클릭 이벤트에 따른 내용 변경) (1)	2024.01.13
[React] 14. React와 서버 연동하기 (ajax를 이용해! (get, post) ) (2)	2024.01.12
[React/JS] setTimeout, setInterval 은 전혀 "시계" 하지 않아 (setTimeout, setInterval 오류) (1)	2024.01.06
[React] 13. 리액트 컴포넌트의 Lifecycle와 useEffect (1)	2024.01.02
[React] 13. 리액트 컴포넌트의 Lifecycle과 useEffect (0)	2024.01.02

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

1. 전환효과를 위한 4step

2. 제작 방법

1) 동작 전 style 담은 className 생성

2) 동작 후 style 담을 className 생성

3) transition 속성 추가

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

- className 달아주기

- className 제어

- 결과

'🌌 | WEB DEV > React' 카테고리의 다른 글

댓글

티스토리툴바

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

1. 전환효과를 위한 4step

2. 제작 방법

1) 동작 전 style 담은 className 생성

2) 동작 후 style 담을 className 생성

3) transition 속성 추가

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

- className 달아주기

- className 제어

- 결과

'🌌 | WEB DEV > React' 카테고리의 다른 글

관련글

댓글

티스토리툴바