[React] 조건부 렌더링(로그인 + 회원가입)

이번 글에서는 React를 처음 배우면서 가장 자주 접하게 되는 기능 중 하나인 조건부 렌더링을 학습하려고 합니다.

조건부 렌더링은 어떤 조건에 따라 화면(UI)애 표시되는 컴포넌트를 다르게 보여주는 것을 말합니다.

 

학습 내용

조건문 if, 삼항 연산자, && 를 사용한 컴포넌트 출력 방식.

로그인 화면과 회원가입 화면을 하나의 컴포넌트에서 전환.

버튼 클릭 시 상태값을 바꿔 조건에 따라 UI가 바뀌도록 구현.

간단한 입력 폼 구성과 버튼 클릭 이벤트 처리.

React의 기본 상태 관리 도구 useState 활용.

---

if문을 사용한 조건부 렌더링

import React from "react";

function IfRender({isLoggedIn}) {
    let content;

    if(isLoggedIn) {
        content = <h2>환영합니다!</h2>;
    } else {
        content = <h2>로그인이 필요합니다.</h2>;
    }
    return <div>{content}</div>;
}

export default IfRender;

 

App.js

import logo from './logo.svg';
import './App.css';
import IfRender from './components/IfRender';

function App() {
  return (
    <div className="App">
      <h1>조건부 렌더링 - if문</h1>
      <IfRender isLoggedIn={false}/>
    </div>
  );
}

export default App;

 

isLoggedIn={false} / {true}

---

삼항 연산자(? :)를 사용한 조건부 렌더링

import React from "react";

function TernaryRender({isAdmin}) {
    return(
        <div>
            <h2>{isAdmin ? '관리자 페이지입니다.' : '사용자 페이지 입니다.'}</h2>
        </div>
    );
}

export default TernaryRender;

 

App.js

import logo from './logo.svg';
import './App.css';
import IfRender from './components/IfRender';
import TernaryRender from './components/TernaryRender';

function App() {
  return (
    <div className="App">
      <h1>조건부 렌더링 - if문</h1>
      <IfRender isLoggedIn={true}/>

      <h1>조건부 렌더링 - 삼항 연산자</h1>
      <TernaryRender isAdmin={false} />
    </div>
  );
}

export default App;

 

isAdmin={false} / {true}

---

&& 연산자를 사용한 조건부 렌더링

import React from "react";

function AndRender({hasNewMessage}) {
    return (
        <div>
            <h2>안녕하세요 사용자님.</h2>
            {hasNewMessage && <p>새 메세지 도착!</p>}
        </div>
    );
}

export default AndRender;

 

App.js

import logo from './logo.svg';
import './App.css';
import IfRender from './components/IfRender';
import TernaryRender from './components/TernaryRender';
import AndRender from './components/AndRender';

function App() {
  return (
    <div className="App">
      <h1>조건부 렌더링 - if문</h1>
      <IfRender isLoggedIn={true}/>

      <h1>조건부 렌더링 - 삼항 연산자</h1>
      <TernaryRender isAdmin={true} />

      <h1>조건부 렌더링 - && 연산자</h1>
      <AndRender hasNewMessage={true} />
    </div>
  );
}

export default App;

 

hasNewMessage={true} / {false}

 

• if문 조건 렌더링 : JSX 바깥에서 로직을 미리 처리하고 결과만 JSX에 넣는 방식으로, 복잡한 조건 로직이 있는 경우 가독성이 좋다. (return문 내에 직접 if는 사용 불가능해서 JSX 밖에서 분기해야 한다.)
• 삼항 연산자 : JSX 내부에서 짧고 간결하게 조건 분기 표현이 가능하고, 2가지 경우 중 하나를 선택해서 출력할 때 유용하다.(너무 복잡한 조건이 많을 경우 가독성이 떨어진다.)
• && 논리 연산자 : true && 표현식은 표현식만 실행되고, false && 표현식은 무시된다. 조건이 참일 때만 내용을 보여줄 때 사용되고, else(거짓) 로직은 표현할 수 없다.

React의 상태에 따라 UI가 자동으로 바뀌는 강점을 실현하는 가장 기본적인 도구가 조건부 렌더링!!

---

하나의 컴포넌트에서 로그인 - 회원가입 화면 전환 구현하기

import React, {useState} from 'react';
import './AuthForm.css';  // 스타일 적용용 파일 import

function AuthForm() {
    // true : 로그인 화면, false : 회원가입 화면을 상태로 관리.
    const [isLogin, setIsLogin] = useState(true);   // 기본값으로 로그인 화면.

    // 입력값들을 state로 관리
    const [userId, setUserId] = useState('');
    const [password, setPassword] = useState('');
    const [name, setName] = useState('');

    // 로그인 / 회원가입 버튼 클릭 시 실행 함수
    const handleSubmit = (e) => {
        if(isLogin) {
            alert(`로그인 시도: 아이디(${userId}), 비밀번호(${password})`);
        } else {
            alert(`회원가입 시도: 이름(${name}), 아이디(${userId}), 비밀번호(${password})`);
        }
    };

    return (
        <div className="auth-container">
            {/* 삼항 연산자 : isLogin이 참이면 로그인 거짓이면 회원가입 */}
            <h2>{isLogin ? '로그인' : '회원가입'}</h2>

            {/* 로그인 / 회원가입 공통 입력 폼 */}
            <form onSubmit={handleSubmit}>
                {!isLogin && (
                    <input type="text" placeholder="이름" value={name} 
                        onChange={(e) => setName(e.target.value)} required />
                )}
                <input type="text" placeholder="아이디" value={userId} 
                    onChange={(e) => setUserId(e.target.value)} required />

                <input type="password" placeholder="비밀번호" value={password} 
                    onChange={(e) => setPassword(e.target.value)} required />
                
                <button type="submit">{isLogin ? '로그인' : '회원가입'}</button>
            </form>

            {/* 로그인 - 회원가입 전환 */}
            <p>
                {isLogin ? '계정이 없으신가요?' : '이미 계정이 있으신가요?'}{' '}
                <button type="button" className="toogle-btn" onClick={() => setIsLogin(!isLogin)}>
                    {isLogin ? '회원가입하기' : '로그인하기'}
                </button>
            </p>
        </div>
    );
}

export default AuthForm;

 

 

로그인하기 / 회원가입 하기 버튼에 따른 폼 전환

---

방식	설명	사용 예
if 문	JSX 바깥에서 조건 분기. 복잡한 조건이나 다단계 분기에 적합.	로그인 / 회원가입, 사용자 역할 조건 분기 등
삼항 연산자	JSX 내부에서 간단하게 조건 분기 가능. (조건 ? 참 : 거짓)	참 / 거짓 에 따라 두 컴포넌트 중 하나 선택
&& 연산자	조건이 true일 때만 특정 요소를 렌더링. (조건 && 출력)	알림, 메세지, 버튼 등 조건부 요소 추가 시