9. Conditional Rendering - Conditional의 정의와 Inline Conditions

dmalk k·2023년 9월 13일

18버전 iOS 개발자 리액트 맥북 무료강의 소플 애플 처음만난리액트 초보 프론트엔드 해설

소플의 리액트

목록 보기

24/50

#Condition(조건, 상태)

- 조건을 의미한다

조건부 랜더링
- 어떠한 조건에 따라서 렌더링이 달라지는 것
- ex)True이면 버튼을 보여주고,
False이면 버튼을 가린다

2개의 컴포넌트

function UserGreeting(props) {
  return <h1>오늘도 페라리를 향해!</h1>;
}

function GuestGreeting(props) {
  return <h1>라이딩 회원가입을 해주세요!</h1>;
}

조건부 적용 후

조건부에 따라 결과를 다르게 리턴을 한다

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

#Truthy와 Falsy

- 참이나 거짓이 아니지만 참이나 거짓으로 여겨지는 갑
- 많은 개발자들을 혼란에 빠뜨리니 잘 이해하고 가야한다

참

// truthy
true
{} (empty object)
[] (empty array)
42(number, not zero)
"0", "false" (string, not empty)

거짓

// falsy
false
0, -0 (zero, minus zero)
0n (BigInt zero)
'', "", `` (empty string)
null(없는 값, 0 아님, 공백문자 아님)
undefined(정의되지 않은, 할당되지 않은, 초기화되지 않은)
NaN(not a number, 숫자가 아닌 값을 숫자로 처리하려는 경우, ex)숫자연산)

#렌더링할 함수를 변수처럼 사용하고 싶을 때

- Element Variable

로그인, 로그아웃 처리 코드

--------------------------------------------------------------------------
// 버튼의 이름을 로그인으로 변경
function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      로그인
    </button>  
  );
}
// 버튼의 이름을 로그아웃으로 변경
function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      로그아웃
    </button>  
  );
}
--------------------------------------------------------------------------
//사용자의 로그인 상태에 따라 버튼의 값을 변경하는 코드
function LoginControl(props) [
  const [isLoggedIn, setIsLoggedIn] = useState(false);
 
  const handleLoginClick = () => {
    setIsLoggedIn(true);
  }
 
  const handleLogoutClick = () => {
    setIsLoggedIn(false);
  }
 
  let button;
  if (isLoggedIn) { // button에 컴포넌트(리엑트 엘리먼트) 대입
    button = <LogoutButton onClick={handleLogoutClick}/>;
  } else {
    button = <LoginButton onClick={handleLoginClick} />;
  }

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn}/> 
      {button} // 랜더링
    </div>
  )
}
--------------------------------------------------------------------------

#Inline Conditions

- In + Line : 조건문을 코드 안에 집어 넣는 것

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
 
  return (
    <div>
      <h1>안녕하세요! 오늘도 라이딩 가시는 군요~</h1>
      {unreadMessage.length > 0 && 
        // 조건문의 종류인 &&(그리고)연산자. 
        // ex) A && B
        // 	   -> A를 만족하고 B도 만족하면 반환하라
        // 앞의 length 비교가 참이면 &&연산자 다음의 값을 반환한다
        // 앞의 length 비교가 거짓이면 &&연산자 다음의 연산을 멈추고 false를 반환한다
        <h2>
          현재 {unreadMessages.length}개의 읽지 않은 메시지가 있습니다.
        </h2>
        // 즉, 언리드메시지에 데이터가 있어서 변수의 길이가 0보다 크면(데이터가 있으면)
        // && 연산자 다음에 오는 코드(<h2>현재...</h2>)를 실행시켜라 
      }
    </div>
  );
}

만약 unreadMessage.length가 0이면 랜더링을 안하는 것아 아니라
false값을 리턴해 변화는 없지만 연산을 수행한다

function Counter(props) {
  const count = 0;
 
  return (
    <div>
      {count && <h1>현재 카운트: {count}</h1>}
    </div>
  );
}
false는 아니지만
falsy값인 0이 count에 들어갔다
count는 false조건이다
div태그가 만들어 지고 count에 0이 들어가 false를 반환하고
div태그가 다시 닫히며
함수가 종료된다 -> <div>0</div>
즉, false가 나온다고 해서 랜더링이 안되는 것은 아니다

## Inline if-Else

- 삼항연산자(condition ? true : false)를 사용한다

function UserStatus(props) {
  return (
    <div>
      이 개발자는 현재 페라리를 <b>{props.isLoggedIn ? '소유한' : '소유하지 않은'}</b> 상태입니다.
      // isLoggedIn의 상태에 따라 문자열을 반환한다
    </div>
  )
}

예제

function LoginControl(props) [
  const [isLoggedIn, setIsLoggedIn] = useState(false);
 
  const handleLoginClick = () => {
    setIsLoggedIn(true);
  }
 
  const handleLogoutClick = () => {
    setIsLoggedIn(false);
  }
 
//  let button;
//  if (isLoggedIn) { // button에 컴포넌트(리엑트 엘리먼트) 대입
//    button = <LogoutButton onClick={handleLogoutClick}/>;
//  } else {
//    button = <LoginButton onClick={handleLoginClick} />;
//  }
//  이 문장 모두가 사라지고, 

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn}/> 
      // {button} // 랜더링
      {isLoggedIn ? // 로그인 되어있나요?
        <LogoutButton onClick={handleLogoutClick}/> // 로그인 안되어 있으면 해당 핸들러를 실행
		: <LoginButton onClick={handleLoginClick}/>// 로그인 되어 있으면 해당 핸들러를 실행
    </div>
  )
}

#Component 랜더링 막기

- null을 리턴하면 된다

function WarningBanner(props) {
  if (!props.warning) { // warning에 해당하지 않을 경우
    return null; // null을 리턴시켜 아무 작업도 안하게 한다
  }
 
  return ( // warning에 해당하여 if문을 벗어날 경우
    <div>경고!</div> // div태그에 문자열을 담아 앨리먼트를 리턴시킨다
  );
}