React에서는 리스트를 렌더링 할 때, 각 아이템을 구분 할 수 있도록 고유한 key 값을 부여해야한다. 오류를 해결하기 위해 고유한 식별자(id) 값을 설정하자
아래와 같이 index를 key 값으로 해서 각 아이템의 식별자로 만들었다. (오류 해결)
실습 (2)
실습(1)과 같은 간단한 예제 말고 복잡한 배열 데이터 바인딩 해보자 아래의 강사의 정보를 담고 있는 배열 데이터가 있다.
5-(2) 데이터 바인딩
5.1 리스트 조건부 처리
5.1-(1) 정리
배열 데이터를 순환 처리 해서 사용하도록 map()메서드를 사용하고 각 아이템을 데이터 바인딩을 한다. 그리고 리스트에는 고유한 key를 가지고 있어야만 오류가 표시되지 않는다.
6. 주의할 점
6-(1) 속성 이름은 camelCase 표기법으로 사용하기
JSX는 HTML이 아닌 JavaScript 식이다. 그래서 React DOM은 HTML 표준 속성 이름 중 일부는 그대로 이름을 사용할 수 없다. 예를 들어 class는 className으로, tabindex는 tabIndex로 사용해야 한다. 즉, 음절이 2개 이상인 경우 camelCase로 표기하기!
// 목록 또는 단락을 조건부 렌더링 하기 위한 조건 상태
let usingList = true
let usingBorderColor = true
const app = (
<div className="app">
<h1>조건부 렌더링</h1>
{/* JSX 내부의 주석 처리 */}
{/* 조건에 따라 목록을 렌더링 */}
{usingList ? (
<ul>
<li>조건 문 활용</li>
<li
className={`bordered ${
usingBorderColor ? 'bordered-red' : ''
}`.trim()}
>
조건 식 (3항식, 논리곱/합 연산자) 활용
</li>
</ul>
) : (
<p>"조건 문 활용" 또는 "조건 식 (3항식, 논리곱/합 연산자) 활용"</p>
)}
</div>
)
// 목록 또는 단락을 조건부 렌더링 하기 위한 조건 상태
let usingList = true
let usingBorderColor = true
const a11y = {
hiddenClass: 'a11y-hidden',
}
const app = (
<div className="app">
<h1 className={a11y.hiddenClass || null}>조건부 렌더링</h1>
{/* JSX 내부의 주석 처리 */}
{/* 조건에 따라 목록을 렌더링 */}
{usingList ? (
<ul>
<li>조건 문 활용</li>
<li
className={`bordered ${
usingBorderColor ? 'bordered-red' : ''
}`.trim()}
>
조건 식 (3항식, 논리곱/합 연산자) 활용
</li>
</ul>
) : (
<p>"조건 문 활용" 또는 "조건 식 (3항식, 논리곱/합 연산자) 활용"</p>
)}
</div>
)
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
// 조건부 처리할 함수
function conditionaRendering(usingList = false) {
// 조건문 if, switch
if (usingList) {
return (
<ul>
<li>조건 문 사용</li>
<li>조건 식 (3항식, 논리곱/합 연산자) 활용</li>
</ul>
)
} else {
return <p>"조건 문 활용" 또는 "조건 식 (3항식, 논리곱/합 연산자) 활용"</p>
}
}
function randomBoolean() {
return Math.random() < 0.5 ? true : false
}
const app = (
<div className="app">
<h1>조건부 렌더링</h1>
{conditionaRendering(randomBoolean())}
</div>
)
ReactDOM.render(app, document.getElementById('root'))
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
// 조건부 처리할 함수
function conditionaRendering(count = 0) {
// 조건문 switch
switch (count) {
case 1:
return (
<ul>
<li>조건 문 사용</li>
<li>조건 식 (3항식, 논리곱/합 연산자) 활용</li>
</ul>
)
break
case 2:
return <p>"조건 문 활용" 또는 "조건 식 (3항식, 논리곱/합 연산자) 활용"</p>
break
default:
return (
<p>
React의 <abbr title="JavaScript Syntax eXtension">JSX</abbr>는
JavaScript 객체(React 요소)를 반환합니다.
</p>
)
}
}
// 숫자를 전달하면 항상 0, 1, 2 중에 하나인 값을 반환하도록 만든다.
function randomCount(number) {
return number % 3
}
ReactDOM.render(app, document.getElementById('root'))
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
// 목록 또는 단락을 조건부 렌더링 하기 위한 조건 상태
let usingList = true
let usingBorderColor = true
const app = (
<div className="app">
<h1>조건부 렌더링</h1>
{/* JSX 내부의 주석 처리 */}
{/* 조건에 따라 목록을 렌더링 */}
{usingList ? (
<ul>
<li>조건 문 활용</li>
<li
className={`bordered ${
usingBorderColor ? 'bordered-red' : ''
}`.trim()}
>
조건 식 (3항식, 논리곱/합 연산자) 활용
</li>
</ul>
) : (
<p>"조건 문 활용" 또는 "조건 식 (3항식, 논리곱/합 연산자) 활용"</p>
)}
</div>
)
ReactDOM.render(app, document.getElementById('root'))
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
// 목록 또는 단락을 조건부 렌더링 하기 위한 조건 상태
let usingList = true
let usingBorderColor = true
const a11y = {
hiddenClass: 'a11y-hidden',
}
const app = (
<div className="app">
<h1 className={a11y.hiddenClass || null}>조건부 렌더링</h1>
{/* JSX 내부의 주석 처리 */}
{/* 조건에 따라 목록을 렌더링 */}
{usingList ? (
<ul>
<li>조건 문 활용</li>
<li
className={`bordered ${
usingBorderColor ? 'bordered-red' : ''
}`.trim()}
>
조건 식 (3항식, 논리곱/합 연산자) 활용
</li>
</ul>
) : (
<p>"조건 문 활용" 또는 "조건 식 (3항식, 논리곱/합 연산자) 활용"</p>
)}
</div>
)
ReactDOM.render(app, document.getElementById('root'))
