쇼핑몰 장바구니 기능 구현하기 - 코드 리팩토링

하드코딩 대신 map 이용

📍 Tab.js

const menuArr = [
    { name: 'Tab1', content: 'Tab menu ONE' },
    { name: 'Tab2', content: 'Tab menu TWO' },
    { name: 'Tab3', content: 'Tab menu THREE' },
  ];

위 menuArr 배열을 li 엘리먼트로 나타내기

<li className="submenu">{menuArr[0].name}</li>
<li className="submenu">{menuArr[1].name}</li>
<li className="submenu">{menuArr[2].name}</li> 

➡️

{menuArr.map((menu, index) => {
	<li key={index}
  		className="submenu">
      {menu.name}
  	</li>
});

map을 이용하여 li 엘리먼트를 나타내고자 할 때는 고유한 값을 나타낼 수 있는 key 속성을 꼭 작성해야한다. 여기서 key 속성은 배열의 index값으로 나타내 unique 유일한 값으로 설정해주었다.

📍 Tag.js

const initialTags = ['CodeStates', 'kimcoding'];
const [tags, setTags] = useState(initialTags);

위 initialTags 배열을 초기값으로 설정한 tags 값 li 엘리먼트로 나타내기

{tags.map((tag, index)=>{
	<li key={index} className="tag"></li>
});

HTML Entities

HTML에는 미리 예약된 몇몇 문자가 있는데 , 이러한 문자를 HTML 예약어(reserved characters)라고 한다.
이러한 HTML 예약어를 HTML 코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 한다.
따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)라고 한다.
이는 &엔티티이름; 또는 &#엔티티숫자; 로 사용될 수 있다.

filter 이용한 set갱신함수 사용

📍 Tag.js

 {tags.map((tag, index) => (
            <li key={index} className="tag">
              <span className="tag-title">{tag}</span>
              <span 
                className="tag-close-icon" 
                onClick={() => { removeTags(index)}}>$times;</span>
			</li>
))}

앞선 map 메서드를 이용해 tags 값을 li 엘리먼트로 나타내고
삭제 버튼을 클릭 했을 때 index 값을 이용하여 removeTags 이벤트 핸들러 작성하기

const removeTags = (indexToRemove) => {
	setTags(tags.filter((el, index) => index !== indexToRemove));
}

전달인자로 가져온 index 값은 삭제할 index값이다.
따라서 tags 배열을 순회하면서 index가 가져온 indexToRemove 값이 아닌 원소만 뽑아내어 setTags 갱신한다.

📍 Autocomplete.js

InputValue 가 변

state 에 따른 class 추가 및 변경

📍 Toggle.js

isOn의 상태가 true일 때 toggle--checked 클래스 추가

<div className=`toggle-container${isOn ? " toggle--checked" : ""}`></div>

📍 Tab.js

const [currentTab, setCurrentTab] = useState(0);

현재 탭인 속성 currentTab은 나타내고자하는 탭 배열 menuArr의 인덱스값으로 설정해줄 수 있으며, 탭을 클릭할 때마다 currentTab 속성에 따라 focused 클래스 추가

{menuArr.map((menu, index)=>{
	<li key={index}
  		className={`submenu${currentTab === index ? " focused" : ""}`}
		onClick={() => {selectMenuHandler(index)}
  	>{menu.name}</li>
})

해당 li 탭을 클릭시 selectMenuHandler 이벤트 함수를 통해 setCurrentTab이 이루어지며 다시 렌더링될 때 갱신된 currentTab 값이 map 메서드에서 사용하고 있는 index과 같을 시 클래스 추가