[React] (리액트 공부하기 24) 인라인 조건 렌더링

인라인 조건 렌더링은 JSX 안에서 조건에 따라 컴포넌트나 요소를 동적으로 렌더링할 때 사용된다.

---

1. 인라인 if

코드:

function Mailbox(props) {
  const unreadMessage = props.unreadMessage;
  return (
    <div>
      <h1>안녕하세요!</h1>
      {unreadMessage.length > 0 && (
        <h2>현재 {unreadMessage.length}개의 읽지 않은 메시지가 있습니다.</h2>
      )}
    </div>
  );
}

설명:

• && 연산자:
  • javascrip에서 &&는 "논리 AND 연산자"입니다.
  • 앞의 조건이 true일 때만 뒤의 내용을 평가한다.
  • 조건이 false라면 뒤의 코드는 아예 실행되지 않으므로 JSX에서 사용하면 특정 조건에 따라 UI를 동적으로 렌더링 할 수 있다.
• 실행 흐름:
  • unreadMessage.length > 0이 true라면 <h2> 태그가 렌더링 된다.
  • unreadMessage.length가 0이면 <h2>는 렌더링되지 않는다.

예:

props.unreadMessage = [1, 2, 3];
=> "현재 3개의 읽지 않은 메시지가 있습니다." 출력.
props.unreadMessage = [];
=> `<h2>` 태그가 아예 렌더링되지 않음.

---

2. 인라인 If-Else (삼항 연산자)

코드:

function UserStatus(props) {
  return (
    <div>
      이 사용자는 현재 <b>{props.isLoggedIn ? '로그인' : '로그인하지 않음'}</b>상태입니다.
    </div>
  );
}

설명:

• 삼항 연산자:

  • 조건문 ? 참 일때 값 : 거짓일 때 값 형태로 사용 된다.
  • 조건문이 true라면 : 앞의 값을 반환하고, false이면 뒤의 값을 반환한다.

• 실행 흐름:

  • props.inLoggedIn이 true이면 '로그인'이 출력 된다.
  • props.isLoggedIn이 false이면 '로그인하지 않음'이 출력 된다.

예:

props.isLoggedIn = true;
=> "이 사용자는 현재 로그인 상태입니다." 출력.

props.isLoggedIn = false;
=> "이 사용자는 현재 로그인하지 않은 상태입니다." 출력.

---

3. LoginControl 컴포넌트

function LoginControl(props) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  
  const handleLoginClick = () => setIsLoggedIn(true);
  const handleLogoutClick = () => setIsLoggedIn(false);
  
  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
      {isLoggedIn ? (
        <LogoutButton onClick={handleLogoutClick} />
      ) : (
        <LoginButton onClick={handleLoginClick} />
      )}
    </div>
  );
}

설명:

1. State 관리:

• useState(false)로 초기값이 false인 IsLoggedIn을 생성한다.
• setIsLoggedIn(true) 상태를 true로 변경하면 로그인 상태가 되고,
  setIsLoggedIn(false)로 상태를 false로 변경하면 로그아웃 상태가 된다.

2. Greeting 컴포넌트:

• isLoggedIn 값에 따라 로그인 상태인지 아닌지 메시지로 표시한다.

3. 삼항 연산자를 활용한 버튼 렌더링:

• isLoggedIn이 true이면 <LogoutButton>을 렌더링하고, false이면 <LoginButton>을 렌더링한다.

4. 버튼 클릭 핸들러:

• handleLoginClick: 로그인 버튼을 클릭하면 isLoggedIn 상태를 true로 설정.
• handleLogoutClick: 로그아웃 버튼을 클릭하면 isLoggedIn 상태를 false로 설정.

실행 흐름 예시:

1. 초기 화면:

• isLoggedIn = false이므로 "로그인하지 않음" 메시지와 LoginButton이 보임.

2. 로그인 버튼 클릭:

• isLoggedIn = true로 변경.
• "로그인" 메시지와 LogoutButton이 보임.

3. 로그아웃 버튼 클릭:

• isLoggedIn = false로 변경.
• 다시 "로그인하지 않음" 메시지와 LoginButton이 보임.

---

이제 뭔가 이해가 점점 되는 거 같다!!!!!
공부를 꾸준히 할 것!!!