Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- NVM
- next/link
- Client-Side Navigation
- JS
- NextJs
- Node
- toast err
- Mac OS NVM
- jsEvent Loop
- JavaScript
- Passed by Value
- 회고록
- git
- 원티드프리온보딩
- react portal
- CPU와 GPU의 차이점
- Til
- 원티트 프리온보딩인턴십 1주차
- 향해99
- 인풋태그 엔터
- 광고지구
- input error
- 식별자란
- Redux
- react
- CloudFront 무효화
- 프로젝트
- 원티드인턴십
- 알고리즘
- 유령 의존성
Archives
- Today
- Total
SUIN
[React] 조건부 랜더링 본문
728x90
리액트의 조건부 랜더링은 JS의 조건 처리와 동일하게 동작한다.
조건부 랜더링은 엘리먼트를 변수로 만들 수 있다.
1. if
//로그인
function LoginButton(props) {
return (
<button onClick={props.onClick}>
Login
</button>
);
}
//로그아웃
function LogoutButton(props) {
return (
<button onClick={props.onClick}>
Logout
</button>
);
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button;
//조건문
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
2. &&
&& 뒤의 엘리먼트는 조건이 true일때 출력
false라면 React는 무시하고 건너뛴다.
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'];
ReactDOM.render(
//Mailbox
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);
3.? (삼항 조건 연산)
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn
? <LogoutButton onClick={this.handleLogoutClick} />
: <LoginButton onClick={this.handleLoginClick} />
}
</div>
);
}
컴포넌트 랜더링 막기
가끔 다른 컴포넌트에 의해 렌더링 될 때 컴포넌트 자체를 숨기고 싶을 때가 있을 수 있다.
이때는 렌더링 결과를 출력하는 대신 null을 반환하면 해결한다.
function WarningBanner(props) {
//거짓일 경우 랜더링 막기
if (!props.warn) {
return null;
}
return (
<div className="warning">
Warning!
</div>
);
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true};
this.handleToggleClick = this.handleToggleClick.bind(this);
}
//클릭시 state 변경
handleToggleClick() {
this.setState(state => ({
showWarning: !state.showWarning
}));
}
render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
}
참고
'React' 카테고리의 다른 글
react-router-dom v6 <NavLink> 적용해보기 (0) | 2022.12.28 |
---|---|
react-router-dom v6 <Outlet> 적용해보기 (0) | 2022.12.28 |
[React] 타입스트립트로 스켈레톤 구현하기 (0) | 2022.02.10 |
[React] 멀티 element 생성해보기 (React.Fragment를 쓰는 이유 ) (0) | 2022.02.07 |
[Raact] JSX 란 (0) | 2022.02.07 |