[React] Input Radio에서 default checked 기본값 설정하기

axios로 formData를 post 하는 과정에서
스크린샷처럼 Radio input에 default value가 checked 되게끔 만들었다!

form 데이터 state는 이런식으로 설정해주었다.

const [formData, setFormData] = useState({
    category: 'Entertainment',
    description: '',
    clientName: '',
    organization: '',
    contact: '',
    email: '',
    position: '',
});

const Category = styled.input`
    margin-bottom: 10px;
    position: absolute;
    left: -9999px;
    &:checked + span {
      background-color: rgb(219, 41, 23, 0.3);
      &:before {
        box-shadow: inset 0 0 0 0.4375em #000;
      }
    }
`;
/// 중간 코드 생략
<RadioBlock>
    {categories.map((category, index) => (
        <CLabel key={index}>
            <Category
                type="radio"
                name="category"
                id={category}
                value={category}
                onChange={handleDataChange}
                checked={formData.category === category}
            />
            <CName>{category}</CName>
        </CLabel>
    ))}
</RadioBlock>

시행착오

초기에는 useEffect를 이용하여 기본값을 설정하려고 하였다.

    (초기 코드)
    // useEffect(() => {
    //     let checkedCategory = document.getElementById("Entertainment");
    //     checkedCategory.checked = true;

    // }, []);

그러나 useEffect에 대해 공부해보면서, react 공식문서에도 나온 useEffect를 남발하지 말자! 글을 읽게 되었다.

• You don’t need Effects to transform data for rendering
• You don’t need Effects to handle user events.
  출처 : https://react.dev/learn/you-might-not-need-an-effect#how-to-remove-unnecessary-effects

요약 ) '렌더링을 위한 데이터 변환 시'와 '사용자 이벤트를 처리할 시'에 Effect가 필요하지 않다.

결론 : 현재 기능은 form 내의 사용자 이벤트를 처리하기 위한 코드이므로 useEffect를 사용하지 않고, 명시적인 key값을 이용해 default 값을 설정하게 되었다!