[React18] 조건부 렌더링

 

 -- Greeting 컴포넌트에 전달되는 props 값에 따라서 

   UserGreeting 또는 GuestGreeting 을 나타낸다.

function UserLogin(){
  return <h1> Hello, users </h1>
}

function GuestLogin(){
  return <h1> Hello, guest </h1>
}


function LoginCheck(props){
  const loginCheck = props.loginCheck;
  
  if(loginCheck){
    return <UserLogin />
  }else{
    return <GuestLogin />
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<LoginCheck loginCheck={false} />);

 

-- 엘리먼트 변수  

 >> 출력의 다른 부분은 변하지 않은 채로 컴포넌트의 일부를 조건부로 렌더링 가능

 >> button을 컴포넌트로 놓고 해당 컴포넌트를 loginCheck 값에 따라서 변경하여사용한다.

class LoginControl extends React.Component{
  constructor(props){
    super(props);
    this.loginComplete = this.loginComplete.bind(this);
    this.loginClear = this.loginClear.bind(this);
    this.state = { LoginCheck : false};
  }
  loginComplete(){
    this.setState({ LoginCheck : true});
  }
  loginClear(){
    this.setState({ LoginCheck : false});
  }
  render(){
    const loginCheck = this.state.LoginCheck;
    let button;
    if(loginCheck){
      button = <LogoutButton onClick={this.loginClear} />;
    }else{
       button = <LoginButton onClick={this.loginComplete} />;
    }
    return(
      <div>
        <Greeting loginCheck={loginCheck} />
        {button}
      </div>
    )
  }
}



function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const loginCheck = props.loginCheck;
  if (loginCheck) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}


function LoginButton(props){
  return (
    <button onClick={props.onClick}>
      Login Button  
    </button>
  )
}

function LogoutButton(props){
  return (
    <button onClick={props.onClick}>
      Logout Button  
    </button>
  )
}





const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<LoginControl />);

 

 

if를 사용하여 조건부로 렌더링 하는 방법은 좋은 방법이지만 짧은 구문을 사용하고 싶은경우

 -- 논리 && 연산자로 if를 인라인으로 표현할 수 있습니다.

 -- javacript에서 true && expression은 항상 expression으로 평가되고 false && expression은 항상 false로 평가됩니다.

 -- 따라서 && 뒤의 엘리먼트는 조건이 true일때 출력이 됩니다.

 -- 리액트의 경우는 false 표현식을 반환하면 여전히 && 뒤에 있는 표현식은 건너뛰지만 false 표현식이 반환된다.

즉 아래의 표현식에서는 <div>0</div>이 render 메서드에서 반환됩니다.

render(){
	const count = 0;
    return (
    	<div>
        	{count && <h1> Messages : {count} </h1> }
        </div>
    )
}

 다른 표현방법으로는  

-- 3항 연산자를 사용하여 나타낼수 있다.

render(){
	const loginCheck = this.state.LoginCheck;
    return(
    	<div>
			{ loginCheck 
            	? <LogoutButton onClick={this.loginClear} />
                : <LoginButton onClick={this.loginComlete} />
            }
		</div>
    )
}

 

 

컴포넌트가 렌더링하는 것을 막는 방법

 -- 가끔 다른 컴포넌트에 의해 렌더링될 때 컴포넌트 자체를 숨기고 싶을 떄가 있을수 있다.

이때는 렌더링 결과를 출력하는 대신 null을 반환하면 해결할 수 있다.

 -- 컴포넌트의 render 메서드로부터 null을 반환하는 것은 생명주기 메서드의 호출에 영향을 주지 않습니다.

 -- 따라서 componentDidUpdate는 계속 호출해줍니다.

function Banner(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>
        <Banner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}  
        </button>
      </div>
    );
  }
}


const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<Page />);