6. React View, Component 반복, 조건부 랜더링

헤이 에부리바디! 효근이에요!

오늘은 Component 의 반복, 조건부 렌더링과 간단한 To - Do List View를 제작해볼겁니다.

스타일은 css를 사용하여 제작하겠습니다.

ToDo 하나의 데이터는 아래 json 데이터를 삽입하겠습니다.

{
	title: '제목',
	date: '날짜',
	isDone: false, // 완료
}

제목과 날짜, 완료 체크가 있는 간단한 형태입니다.

const data = [
	{
		title: '제목1',
		date: '2020-09-27',
		isDone: false,
	},
	{
		title: '제목2',
		date: '2020-09-27',
		isDone: true,
	},
	{
		title: '제목3',
		date: '2020-09-27',
		isDone: false,
	},
];

위의 포맷대로 json array 데이터를 준비합니다.

const App = () => {
	return (
		<div id='todoList'>
			{data.map((item, key) => (
				<div key={`todo_${item.key}`}>{item.title}</div>
			))}
		</div>
	);
};

data.map 을 사용하여, list 만큼 컴포넌트를 반복하여 출력합니다.

map 함수의 인자 값으로는 array의 index번째 데이터와 index를 얻을 수 있습니다.

<div key={`todo_${item.key}`}>{item.title}</div>

key를 넣어 Element의 고유 값을 추가합니다.

render 함수의 식별표 라고 보시면 될 것 같습니다. 고유한 값을 가져야 합니다.

const App = () => {
	return (
		<div id='todoList'>
			{data.map((item, key) => (
				<div className='item' key={`todo_${item.key}`}>
					{item.isDone ? <div className='checked' /> : <div className='unChecked' />}
					<div>
						<div style={{ marginBottom: '10px', fontWeight: 'bold' }}>{item.title}</div>
						<div>{item.date}</div>
					</div>
				</div>
			))}
		</div>
	);
};

날짜와 완료를 넣은 형태입니다.

{item.isDone ? <div className='checked' /> : <div className='unChecked' />}

삼항연산자를 넣은 조건부 렌더링을 사용하여, isDone의 색의 유무를 다르게 했습니다.

<div className={item.isDone ? 'checked' : 'unChecked'} />

ClassName만 교체한다면, 이런 식으로 사용할 수도 있습니다.

이상으로 글을 마치겠습니다.