[React/실습] 투두리스트 제작 #4

구현한 것

• 팔레트에서 선택한 색 진하게 표시

 

지난 실습 때 구현하지 못한 선택한 팔레트 색 진하게 표시하는 부분을 해결했다!

 

현재 선택된 색을 palette 컴포넌트에 props로 함께 넘겨줘서 팔레트 컴포넌트 배열을 생성할 때 현재 생성하려는 palette 컴포넌트의 색이 넘어온 색과 동일한지 검사하고, 동일하면 투명도를 1로 설정하도록 했다!

import React from "react";

const Palette = ({ colorList, onClick, nowColor }) => {
	console.log(nowColor);
	const colors = colorList.map((color, indx) => (
		<div
			className="palette_item"
			key={indx}
			style={{
				background: color,
				width: "33px",
				height: "33px",
				float: "left",
				margin: "10px",
				opacity: nowColor === color && 1,
			}}
			onClick={() => {
				onClick(color);
			}}
		></div>
	));
	return <div>{colors}</div>;
};
export default Palette;

 

알게 된 것

• map 함수에서 key값으로 index를 넣어주었는데, 두 번째 인자가 index 자리여서 index 값을 바로 받을 수 있는 건지?

>> 맞다 !!! 두 번째 인수를 통해 인덱스에 액세스 할 수 있다.

arr.map(currentValue, index, array)

http://daplus.net/javascript-map-함수-내부의-인덱스/