React에서의 반응형 데이터 표시

객체 배열이 있고, 그 안에 무언가의 이름과 설명이 포함되어 있다고 가정해 봅시다:

const initNotes = [
	{
		id: id(),
		name: 'name1',
		desc: 'long description 1'
	},
	{
		id: id(),
		name: 'name2',
		desc: 'long description 2'
	},
	{
		id: id(),
		name: 'name3',
		desc: 'long description 3'
	},
];

이 배열의 각 요소를 별도의 단락에 출력해 보겠습니다:

function App() {
	const [notes, setNotes] = useState(initNotes);
	
	const result = notes.map(note => {
		return <p key={note.id}>
			{note.name}, 
			<i>{note.desc}</i>
		</p>;
	});
	
	return <div>
		{result}
	</div>;
}

이제 설명이 처음에는 숨겨져 있지만, 각 단락 끝에 해당 단락의 설명을 표시하기 위한 버튼을 추가해 봅시다. 이를 위해 각 제품 객체에 설명 표시를 제어하는 속성 show를 추가합니다:

const initNotes = [
	{
		id: id(),
		name: 'name1',
		desc: 'long description 1',
		show: false,
	},
	{
		id: id(),
		name: 'name2',
		desc: 'long description 2',
		show: false,
	},
	{
		id: id(),
		name: 'name3',
		desc: 'long description 3',
		show: false,
	},
];

각 단락 끝에 버튼을 만들어, 클릭하면 해당 제품의 전체 설명이 표시되도록 하세요.