useState의 상태 값이 css에 적용 해야 될 때가 있다.

문제는 tailwind에서 “ w-[${width}px] “ 이런 식으로 지정하면 class는 정상적으로 render되었지만, css가 적용되지 않는다.

이러한 경우 style(인라인 스타일)을 이용해야 한다.

한 개 이상의 스타일을 지정해야 할 경우 { } 안에 다 적용하면 된다.

export default function Item() {
		const [imageSize, setImageSize] = useState({ width: 100, height: 100 });
		const containerStyle = {
	     height: imageSize.height
	     width: imageSize.width,
	   };
	   return (
        <div style={containerStyle}>containerStyle</div>
    );
}

참고