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

구현한 것

• 팔레트 기능 추가

알게 된 것

1. App에서 생성한 리스트를 Palette 컴포넌트에 props로 전달해서 컴포넌트 배열을 반환하는 부분에서 계속 에러가 났다.

Palette.js:4 Uncaught TypeError: colors.map is not a function

그리고 내가 작성한 코드 ,,,,

import React from "react";

const Palette = (colors) => {
	console.log(colors);
	const colorList = colors.map((color, indx) => <li key={indx}>{color}</li>);
	return <ul>{colorList}</ul>;
};

export default Palette;

리액트 잘 아는 사람들이 보면 진짜 콧방귀 칠 실수 ㅠ props 제일 먼저 공부했으면서 왜 다 까먹었냐

비구조화 문법 사용 안 할 거면 props.colors로 접근하든 했어야 하는데 그것도 아니고 그냥 내부값 바로 사용함 ,,,,

import React from "react";

const Palette = ({ colors }) => {
	console.log(colors);
	const colorList = colors.map((color, indx) => <li key={indx}>{color}</li>);
	return <ul>{colorList}</ul>;
};

export default Palette;

해결 완 ,, 복습을 하자 ! (https://amor-fati.tistory.com/81)

 

2. 팔레트 가로로 가운데 정렬하기

여러 div를 가로로 가운데 정렬 하기

궁금한 것

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

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

export default Palette;

• { } 언제 넣고 언제 안 넣는지 헷갈림

해결해야 될 것

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

 

---

 

개념 다 이해한 줄 알았는데,, 코드 없는 채로 만들어보니까 하나도 모르겠다 ㅎㅎ 큰일났다 ㅎㅎ

선택한 색 진하게 표시하는 건 진짜 모르겠다 ㅠ 생각 좀 해봐야겠음

그리고 아무래도 자바스크립트 책을 하나 사야 될 거 같다 ,, css도 ,,,