[react study]조건에 따라 다른 컴포넌트 넣기
https://reactjs.org/docs/conditional-rendering.html
- 로그인 됐을 때 UserGreeting, 로그인하지 않았을때 GuestGreeting 실행 (isLoggedIn prop에 따라 다른 값 출력)
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) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
//결과 : Please sign up 출력
- Element variables
조건에 따라 다른 컴포넌트 render하기
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});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
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>
);
}
}
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) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
function LoginButton(props) {
return (
<button onClick={props.onClick}>
Login
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={props.onClick}>
Logout
</button>
);
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);
- && 논리 연산자 사용해보기
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 unreadMessages={messages} />,
document.getElementById('root')
);
결과 : Hello! You have 3 unread messages.
It works because in JavaScript, true && expression always evaluates to expression, and false && expression always evaluates to false.
Therefore, if the condition is true, the element right after && will appear in the output. If it is false, React will ignore and skip it.
Note that returning a falsy expression will still cause the element after && to be skipped but will return the falsy expression. In the example below, <div>0</div>
will be returned by the render method.
true && exression 은 언제나 expression으로 평가하고
false && expression 은 언제나 false로 평가한다.
그러므로, 만약 true인 상태라면 && 오른쪽의 element는 ouput에 나타날것이다. 만약에 false라면, React는 무시하고 넘어갈 것이다.
falsy expression 을 return하는 것은 여전히 && 뒤에 있는 element가 넘어가게 할 것이지만 falsy expression을 return할 것이다. 아래의 예시를 보면, <div>0</div>
가 render method에 의해 return될 것이다.
render() {
const count = 0;
return (
<div>
{ count && <h1>Messages: {count}</h1>}
</div>
);
}
- condition ? true : false 사용해보기
예시 1
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
예시2
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn
? <LogoutButton onClick={this.handleLogoutClick} />
: <LoginButton onClick={this.handleLoginClick} />
}
</div>
);
}
- 렌더링할 때 Component를 막기
- 드문 경우에, 컴포넌트를 숨기고 싶을 수 있다. 이런 경우에는 null을 return하면 된다.
아래 예시를 보면 <WarningBanner />
는 warn으로 불려지는 prop의 값에 따라 render된다. 만약에 prop 값이 false라면 component는 render되지 않는다.
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);
}
handleToggleClick() {
this.setState(prevState => ({
showWarning: !prevState.showWarning
}));
}
render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
}
ReactDOM.render(
<Page />,
document.getElementById('root')
);
null을 return하는 것은 component의 lifecycle method에 영향을 주지 않는다. 예를 들면 componentDidUpdate는 여전히 call되고 있다.
Q.
handleToggleClick(){
this.setState(prevState => ({
showWarning : !prevState.showWarning
}));
}
--> prevState가 함수인가..?
Author And Source
이 문제에 관하여([react study]조건에 따라 다른 컴포넌트 넣기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hongihongi60/react-study-if저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)