참고
리액트 분기, 반복, 조건 렌더링
List - map()을 통한 여러 컴포넌트 생성
NOTE
// function을 통한 컴포넌트 생성
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul> // 컴포넌트 반환
);
}
// 실제 리액트 렌더링
const numbers = [1, 2, 3, 4, 5];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NumberList numbers={numbers} />);
JavaScript
복사
React 컴포넌트 map()예시
실행결과
Key - 식별요소
NOTE
// function(컴포넌트) - 개별 요소
function ListItem(props) {
return <li>{props.value}</li>;
}
// function(컴포넌트) - 리스트
function NumberList(props) {
const numbers = props.numbers; // 1~5
const listItems = numbers.map((number) =>
// key값 사용
<ListItem key={number.toString()} value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
// 실제 리액트 렌더링
const numbers = [1, 2, 3, 4, 5];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NumberList numbers={numbers} />);
JavaScript
복사
Key 선택의 가장 좋은 방법은 항목별 고유한 값을 사용하는 것
•
key는 엘리먼트에 안정적인 고유성 부여를 위해 배열 내부 엘리먼트에 지정해야 함
•
지정하지 않으면 기본적으로 인덱스를 key로 사용한다
[ 참고]
참고]•
항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는걸 권장하지 않는다
•
이로 인해 성능이 저하되거나, 컴포넌트 state와 관련된 문제가 발생할 수 있음!
•
key는 배열 안의 요소에서만 고유값이면 된다 (전체 범위에서 고유 값일 필요는 없음)
•
ex) ListItem 컴포넌트를 추출
◦
ListItem안에 있는 <li> 엘리먼트가 아니라, 배열의 <ListItem /> 엘리먼트 에서 key 값을 가져야 한다
조건부 렌더링 - if
NOTE
React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있다
이렇게 하면 애플리케이션 상태에 따라서 컴포넌트 몇 개 만을 렌더링 할 수 있다!
function UserGreeting(props) { // 컴포넌트 1
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) { // 컴포넌트 2
return <h1>Please sign up.</h1>;
}
// 조건에 따른 컴포넌트 출력 (if)
function GreetingIf(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
// 실제 리액트 렌더링
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<GreetingIf isLoggedIn={false} />);
JavaScript
복사
if구문을 통한 분기처리
// 조건에 따른 컴포넌트 출력 (삼항 연산자)
function GreetingIf(props) {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
JavaScript
복사
삼항연산자를 통한 분기처리
// 조건에 따른 컴포넌트 출력 (&&, || 사용)
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 && //
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
// 실제 리액트 렌더링
const messages = ['React', 'Re: React', 'Re:Re: React'];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Mailbox unreadMessages={messages} />);
JavaScript
복사
논리 연산자 && 사용코드
function WarningBanner(props) {
if (!props.warn) {
return null;
}
return (
<div className="warning">
Warning!
</div>
);
}
JavaScript
복사
컴포넌트 렌더링 막는 코드(렌더링 결과를 출력하는 대신 null을 반환하면 된다!)