8. 조건부 렌더링
8.1 조건부 렌더링
React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있다. 이렇게 하면 어플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링 할 수 있다.
예시는 아래와 같다. props.isLoggedIn 에 따라서 다른 인사말을 렌더링 한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function UserGreeting(props) { // 사용자에게 인사
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) { // 게스트에게 인사
return <h1>Please sign up.</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
// props.isLoggedIn 값에 따라 유저 또는 게스트 컴포넌트를 사용함.
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,document.getElementById('root')
);
|
cs |
위의 코드처럼 사용하는것도 좋지만 출력의 다른 부분을 변경하지 않고 컴포넌트의 일부를 조건부로 렌더링할 수도 있습니다. (렌더링 최적화)
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
31
32
33
34
35
36
37
38
39
40
41
42
|
class LoginControl extends React.Component {
constructor(props) { // 생성자
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this); // 바인드
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true}); // state.isloggedIn을 true로 설정
}
handleLogoutClick() {
this.setState({isLoggedIn: false}); // state.isloggedIn을 false로 설정
}
render() {
const isLoggedIn = this.state.isLoggedIn; // 변수에 isLoggedIn 저장
let button;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
// true일때 렌더링
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
// false일때 렌더링
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);
|
cs |
8.2 논리 && 연산자로 If를 인라인으로 표현하기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
// true && expression == expression
// false && expression == false
// unreadMessages의 배열 길이가 0보다 크다면 <h2> 태그 안에 있는 내용 출력
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
// Mailbox 컴포넌트를 사용 인자로 messages 배열을 넘겨줌
<Mailbox unreadMessages={messages} />, document.getElementById('root')
);
|
cs |
8.3 조건부 연산자로 If-Else구문 인라인으로 표현하기
엘리먼트 조건부로 렌더링하는 다른 방법은 3항 연산자인 condition ? true : false 를 사용하는 것이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn
? <LogoutButton onClick={this.handleLogoutClick} /> // 참일 때 로그아웃
: <LoginButton onClick={this.handleLoginClick} /> // 거짓 일 때 로그인
}
</div>
);
}
|
cs |
8.4 컴포넌트가 렌더링하는 것을 막기
특정 컴포넌트가 렌더링되는것을 막고 싶다면 렌더링 결과를 출력하는 대신 null 값을 반환하면 해결할 수 있다.
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
function WarningBanner(props) {
if (!props.warn) {
return null;
// warningBanner 컴포넌트의 props가 거짓이면 null 값을 반환하고 렌더링 X
// 참이면 Warning을 렌더링함
}
return (
<div className="warning">
Warning!
</div>
);
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true}; // 초기 showWarning값은 true
this.handleToggleClick = this.handleToggleClick.bind(this); // 바인드
}
handleToggleClick() {
this.setState(state => ({
showWarning: !state.showWarning //함수호출시 showWarning값을 반대로 바꿈
}));
}
render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
// 참 거짓에 따라 렌더링
<button onClick={this.handleToggleClick}>
// 버튼 클릭시 handleToggleClick 함수를 호출함
{this.state.showWarning ? 'Hide' : 'Show'}
// showWarning 값에 따라 hide or show 출력
</button>
</div>
);
}
}
ReactDOM.render(
<Page />, // page컴포넌트 호출
document.getElementById('root')
);
|
cs |
반응형
'Programming Step > React JS' 카테고리의 다른 글
React Hook (0) | 2021.06.20 |
---|---|
REACT 공식 문서 정리 - 9. 리스트와 Key (0) | 2021.06.20 |
REACT 공식 문서 정리 - 7. 이벤트 처리하기 (0) | 2021.06.20 |
REACT 공식 문서 정리 - 6. State 와 생명주기 (0) | 2021.06.20 |
REACT 공식 문서 정리 - 5. Component 와 Props (0) | 2021.06.20 |
댓글