Fragment

Problem

mbti 같은 체크박스 항목을 만드려고 하니 체크박스 컴포넌트를 중복으로 생성해서 할당을 하니까 재사용성이 너무 떨어지는 문제점이 있었다.

<input
      type="checkbox"
      id=1
      name="checkWrap"
      value='1'
      onChange={(e) => checkOnlyOne(e)}
      />
 <label htmlFor={generateUniqueId(`b${num}`)}>디자인</label>

위 인풋태그를 체크박스 스타일 컴포넌트인 CheckBoxCnt로 여러 항목을 만들었다.

위 그림처럼 스타일 컴포넌트 안에 7개의 인풋태그를 넣어 하나의 체크박스만 선택할 수 있게하고 체크할 시 빨간색으로 보이도록 했다.
하지만 다수의 div 태그 안에 해당 컴포넌트를 넣으니까 다른 div 태그의 버튼을 눌러도 제일 처음 div 태그 안의 컴포넌트만 바뀌는 문제가 있었다. id 문제인 것 같아서 처음에는 위 체크박스 컴포넌트를 복제해서 해결했는데 너무 컴포넌트 재사용성이 떨어진다는 생각이 들었다.

Fragment

리액트에서 하나의 컴포넌트는 여러 개의 요소를 반환한다. 컴포넌트에서 여러 요소를 반환하거나, 부모 요소로 감싸지 않고 여러 요소를 렌더링 해야될 때가 있는데 이때 Fragment를 사용한다.

<CheckBoxCnt>
            {[1, 2, 3, 4, 5, 6, 7].map((num) => (
                <React.Fragment key={num}>
                    <input
                        type="checkbox"
                        id={generateUniqueId(`b${num}`)}
                        name="checkWrap"
                        value={num}
                        onChange={(e) => checkOnlyOne(e)}
                    />
                    <label htmlFor={generateUniqueId(`b${num}`)}>디자인</label>
                </React.Fragment>
            ))}
        </CheckBoxCnt>

map 함수로 1부터 7까지 반복하여 체크박스와 레이블 쌍을 렌더링한다.
React.fragment로 필요없는 DOM 요소가 사용되지 않게 하고 key로 고유 식별자 구분을 할 수 있다.

generateUniqueId 함수는 각 체크박스에 대한 고유한 ID를 이름 기반으로 생성하는 역할을 한다. 제공된 이름과 현재 num을 연결하여 각 체크박스의 고유성을 확보했다.

<div className="num1">
                <img onClick={playMusic} src="./play.png" alt='Sound Icon'/>
                <h3>1번 사운드가 당신의 마음에 드나요?</h3>
                <CheckBox id="checkbox1"/>
            </div>
            <div className="num1">
                <img onClick={playMusic} src="./play.png" alt='Sound Icon'/>
                <h3>2번 사운드가 당신의 마음에 드나요?</h3>
                <CheckBox id="checkbox2"/>

CheckBox 의 id를 checkbox1과 checkbox2 로 구분하여 각 체크박스가 독립적으로 관리가 가능해졌다.