현상: 페이지를 새로고침하면 문제가 없음, 다른 페이지에서 next/link로 이동해서 넘어오면 인라인으로 설정한 margin이 적용되지 않는 문제를 발견
원인: 인라인 스타일을 입력할 때 속성값 뒤에 세미콜론을 넣은것이 문제
ex) { marginRight: '5px;', marginTop: '30px;' };
import React, { useMemo } from 'react';
import { conditions } from '../../constants/conditions';
type ConditionProps = {
condition: string;
};
export const RadioButton = ({ condition }: ConditionProps) => {
const container = useMemo(() => {
세미콜론이-> return { marginRight: '5px;',
들어감 marginTop: '30px;' };
}, []);
return (
<div style={container}>
<input type="radio" name="condition" style={container} />
<label htmlFor={condition}>{conditions[condition]}</label>
</div>
);
};
해결: 세미콜론 삭제