Redux 애플리케이션에 추가 로직 추가하기

이번 수업에서는 애플리케이션에 마지막 컴포넌트를 추가할 것입니다. 구체적으로 말하면, 상품에 대한 사용자 반응(주문했거나 정보를 읽은 것)을 추가할 것입니다.

상품 애플리케이션을 열어봅시다. 판매자 이름의 경우와 마찬가지로, 사용자 반응을 애플리케이션의 여러 곳에서 표시해야 합니다. 이는 별도의 컴포넌트가 필요하다는 것을 의미합니다. 따라서 products 폴더에 UserReactions.jsx 파일을 생성하는 것으로 시작하겠습니다. 먼저 반응들을 담을 객체를 작성해 보겠습니다:

const reactionObj = {
	good: '+',
	soso: '+/-',
	bad: '-',
}

아래에서는 함수 작성을 시작하고, product 슬라이스를 전달할 것입니다:

export const UserReactions = ({ product }) => {}

이제 중괄호 안에 UserReactions 함수의 본문을 작성해 보겠습니다. 이를 위해 map을 사용하여 reactionObj의 키-값 쌍을 반복하고, 각각에 대해 버튼 표시 ('+', '+/-' 또는 '-')와 해당 반응의 수치(store의 product에서 반응 이름으로 가져올 것입니다)를 얻을 것입니다:

const userReactions = Object.entries(reactionObj).map(([name, image]) => {
	return (
		<button key={name} type="button" className="reaction-button">
			{image} {product.reactions[name]}
		</button>
	)
})

그리고 함수 코드 끝에서 userReactions 버튼이 포함된 마크업을 반환하겠습니다:

return <div>{userReactions}</div>

또한 index.css에 약간의 스타일을 추가하겠습니다:

.reaction-button {
	margin-right: 10px;
	margin-bottom: 10px;
}

이것이 조금 혼란스럽게 보인다면, 걱정하지 마세요, 곧 모든 것이 훨씬 더 명확해질 것입니다.

학생 애플리케이션을 열어보세요. 애플리케이션에서는 사용자가 학생들 중에서 반장과 운동부 주장을 선택할 수 있는 기능이 있을 것입니다. 따라서, 강의 자료를 학습한 후, students 폴더에 UserVotes.jsx 파일을 생성하세요. 파일 시작 부분에 두 개의 속성 - leader와 captain을 가진 votesObj 객체를 생성하세요. 값은 버튼 표시로 GL와 TC로 하세요.

아래 파일에서 객체 정의 후 이 강의 자료와 유사하게 UserVotes 함수 코드를 작성하세요.