👨‍💻 사건

• 쇼핑몰 구현중, useEffect를 통하여 상태관리를 하였다. 이때, useEffect 는 마운트 될때, 단 한번만 실행하게 하도록 설정을 해두었다. 이미 렌더링 된 데이터를 다른 변수에 할당하여 사용할 생각이였다. 그러나, 자꾸 타입에러와 함께 할당되지 않았다는 에러 문구를 받았다.

✅ 해결

다른 변수에 할당할 값을 전개연산자를 활용하여 복사해두고, 이를 또 다른 변수에 활용할 데이터만 뽑아내어 저장한다.

<예시>

const ProductDetail = ({ locationData }) => {
    const [data, setData] = useState();
    const [count, setCount] = useState(1);
    const [isLike, setIsLike] = useState(false);
    useEffect(() => {
        if (locationData) {
            setData(() => {
                return { ...locationData.state.data };
            });
        }
    }, []);

		const discountPrice = (data.price * (100 - data.discountRate)) / 100; // 에러!!!!

    const copyData = { ...data }; // 전개연산자 활용하여 다른 변수에 할당
    const discountPrice = (copyData.price * (100 - copyData.discountRate)) / 100; // 할당된 변수를 활용하여 원하는 값으로 활용

		return (
			<>
				<p>{discountPrice}</p>
			</>
};

💭 개선

왠만하면 데이터를 다른 변수에 저장하여, 활용하자.