useTransition

1. 모듈 불러오기

import {useTransition, animated} from 'react-spring'

2. 사용하기

useTransition 매개변수

• 첫 번째인자 : 상태 전달(boolean, array, ...)

• 두 번째인자 : array와 같이 순환되는 item이라면 (item) => item.key 와 같이 item의 키 추출 하나의 단일 요소만 애니메이션 key 한다면 null을 설정해 매개변수 생략

• 세 번쨰인자 : animation 순서

const [상태, 상태 업데이트 함수] = useState(false)
const transitions = useTransition(상태, null, {
// 기본 스타일 속성 → transition 끝남 
from: { opacity: 0 },
// transition 시작 
enter: { opacity: 1 },
// transition 끝나기 직전 
leave: { opacity: 0 },
})
// map에 전달되는 인자  
// item : 상태 
// key : 배열이라면 useTransition에서 추출한 key 값 (그외엔 하나의 키를 가짐) 
// props : useTransition에 전달 된 스타일 속성 
return transitions.map(({ item, key, props }) => 
    console.log(item) // 상태 
)

2.1 예제

2.1.1 토글 기능 사용

const [toggle, setToggle] = useState(false)
const transitions = useTransition(toggle, null, {
from: { opacity: 0 },
enter: { opacity: 1 },
leave: { opacity: 0 },
})
return transitions.map(({ item, key, props }) => 
item
  ? <animated.div style={props}>😄</animated.div>
  : <animated.div style={props}>🤪</animated.div>
) 

2.2.1 배열

전달되는 상태가 배열이라면 useTransition의 두번째 인자는 null이 아닌 item을 추출하는 식을 사용해야한다.

const testArray = [
    { number: 1, key: "vhsiu" },
    { number: 2, key: "vhfdsiu" },
    { number: 3, key: "vhsssiu" }
  ];
  const [items, setItems] = useState(testArray);
  const transitions = useTransition(items, (item) => item.key, {
    from: { transform: "translate3d(0,-40px,0)" },
    enter: { transform: "translate3d(0,0px,0)" },
    leave: { transform: "translate3d(0,-40px,0)" }
  });
  return transitions.map(({ item, props, key }) => (
    <animated.div key={key} style={props}>
      {item.number}
    </animated.div>
  ));

2.2 API

Property	Type	Description
initial	obj/fn	최초값 (optional, null도 될 수 있음)
from	obj/fn	기준 값 (optional)
enter	obj/fn/array(obj)	animation이 시작할 때 적용되는 것
update	obj/fn/array(obj)	animation이 업데이트 될 때 적용되는 것 (자체 hook으로 새로운 값 업데이트 가능)
leave	obj/fn/array(obj)	animation이 끝날 때 적용되는 것
trail	number	animation 시작 시간 지연(초 단위), enter/update/leave에 추가 가능
unique	bool/fn	true라면, 들어가고 나오는 아이템들은 같은 key를 재 사용함 두 번 이상 렌더링 되지 않도록 하는 속성
reset	ool/fn	‘unique’와 같이 사용되며, enter 아이템들을 처음부터 시작하게 함
onDestroyed	fn	object들이 완전히 사라졌을 때 호출 됨

3. 오류

배열을 상태로 전달 했을 경우 key 값을 설정하지 않으면 전달된 첫 번째 아이템만 출력이 되는 현상이 나타난다. 2.2.1 배열 코드 처럼 고유한 key 값을 전달해서 충돌이 일어나지 않도록 해야한다.

export default function App() {
  const testArray = [{ contexnt: 1 }, { contexnt: 2 }, { contexnt: 3 }];
  const [items, setItems] = useState(testArray);
  const transitions = useTransition(items, (item) => item.key, {
    from: { transform: "translate3d(0,-40px,0)" },
    enter: { transform: "translate3d(0,0px,0)" },
    leave: { transform: "translate3d(0,-40px,0)" }
  });
  return transitions.map(({ item, props, key }) => (
    <animated.div key={key} style={props}>
      {item.contexnt}
    </animated.div>
  ));
}

4. 실습

5. 참고

sideToggle 예제이다. useTransition을 사용하여 구현

Create a React SlideToggle component with hooks and react-springMedium