[React] 간단 로그인 페이지 구성 / 조건부 렌더링 (삼항 연산자, && 연산)

[React] 간단 로그인 페이지 구성 / 조건부 렌더링 (삼항 연산자, && 연산)

2023. 8. 2. 16:52ㆍ기술 창고/React

728x90

SMALL

이번에는 간단한 로그인 페이지를 구성해보고 추가적으로 조건에 따른 렌더링에 대한 작업에 대해 알아보겠습니다.

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React App</title>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="root"></div>
    <script src="../src/index.js" type="text/jsx"></script>
  </body>
</html>

렌더링될 페이지입니다.

index.js에 렌더링되는 내용들을 포함되어있고, root 영역에 렌더링 될 것입니다.

Index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

ReactDOM.render(<App />, document.getElementById("root"));

render 함수를 통해 index.html에 root 영역에 렌더링 App 컴포넌트를 렌더링시킵니다.

App.jsx

import React from "react";
import Login from "./Login";

var isLoggedIn = false;

function renderConditionally(){
  if(isLoggedIn === true){
    return <h1>Hello</h1>
  }else{
    return (
      <Login />
    );
  }
}

function App() {
  return (
    <div className="container">
      {renderConditionally()}
    </div>
  );
}

export default App;

렌더링될 내용들이 모두 담겨져있는 App 컴포넌트입니다.

- isLoggedIn 변수가 true 이면 로그인된 상태이고, false 이면 로그인되지 않은 상태입니다.

- renderConditionally() 함수에는 로그인이 isLoggedIn 변수를 확인하여 로그인된 상태일 경우 Hello 문구를, 로그인이 되지 않은 상태일 경우에는 Login 컴포넌트를 불러옵니다.

App 함수에는 container 영역에 renderConditionally 함수를 불러오고 있습니다.

Login.jsx

import React from "react";
import Input from "./Input";

function Login(){
  return (
    <form className="form">
      <Input type="text" placeholder="Username"/>
      <Input type="password" placeholder="Password"/>
      <button type="submit">Login</button>
    </form>
  )
}

export default Login;

Input.jsx

import React from "react";

function Input(info){
  return (
      <input type={info.type} placeholder={info.placeholder} />
  )
}

export default Input;

이렇게 해서 간단한 기본적인 React 로그인 동작 기능들을 만들어보았습니다.
앞서 App.jsx 에서 로그인한 상태이거나 혹은 로그인하지 않은 상태일 경우의 로직을 따로 빼서 App에 호출하는 방식으로 구현을 했는데,
이 과정을 좀 더 함축적으로 줄일 수 없을까 생각해보신 분들이 계신다면 이 App 함수의 return 문 도중에 로그인 판단 로직을 그대로 넣어버리면 줄일 수 있지 않을까 생각해보신 분들이 분명 있으리라 생각합니다.

function App() {
  return (
    <div className="container">
    {
    if(isLoggedIn === true){
        <h1>Hello</h1>
    }else{
          <Login />
    }
    </div>
  );
}

즉, 이런식으로 App 함수의 container 영역에 if 로직을 그대로 넣어버릴 수는 없을까 라는 생각을 해봤다는 것이죠.
하지만 jsx 파일 내의 return 문에는 statement 식을 그대로 넣어 사용할 수 없습니다.
이럴 때 도움을 줄 수 있는 것이 Ternary Opertor(삼항 연산자) 와 && 연산자 입니다.

Ternary Operator

기존에 jsx 에서 function 을 통해 반환값을 주려고 할 때 반환값에 html 외에 if문과 같은 statement 형의 식은 넣어줄 수 없습니다.
즉, jsx 파일 내에서 반환 return 문에는 html 태그를 통한 반환값만 부여를 할 수 있다고 볼 수 있는데,
Ternary Opertor는 3항 연산자로서 이를 보완해줄 수 있습니다.
마찬가지로 식 자체를 넣어 사용하는 것이 아니라 따로 로그인 판단 후 처리 로직 함수를 생성하는 것이 아닌 곧바로 return 문에 적용하여 코드를 줄여줌과 동시에 가독성 또한 높여줄 수 있도록 도와주는 것입니다.

var isLoggenIn = true;

function App() {
  return (
    <div className="container">{
      isLoggenIn === true ? <h1>Hello</> : <Login />
    }</div>
  );
}

위에서 간단히 만들어본 로그인 로직 부분을 3항 연산자를 이용하면 이와 같이 줄여줄 수 있습니다.
참 혹은 거짓 판단식을 왼쪽에 두고 만약 판단식이 참이면 ? 기호 바로 옆에있는 결과가 출력되고 거짓이면 : 기호 옆에 있는 결과가 출력되게 됩니다.
양식 : {참/거짓 판단식} ? {참일 시 실행 결과} : {거짓일 시 실행 결과}

&& 연산자

React 에서 사용하는 것이 아니라 다른 언어, 예를 들어 java 같은 언어를 사용해보았다면 && 연산에 대해 많이 경험을 해보시고 사용해봤을 것입니다.

java 에서는 && 연산자를 사용하게 된다면 앞 뒤 && 기호로 엮은 조건식이 모두 참이여야만 원하는 결과 혹은 내용이 수행됩니다.

React 에서도 개념은 똑같지만 살짝 차이점이라고 한다면, 앞에는 true 혹은 false 임을 판단하는 조건식이 나오게 되고 && 기호 다음에 true일 경우에 수행될 결과가 기입되게 됩니다.

양식 : {참거짓 판단식} && {true 일 경우 수행되는 결과 혹은 수행식}

var isLoggenIn = false;

function App() {
  return (
    <div className="container">{
      isLoggenIn === false && <Login />
    }</div>
  );
}

위의 로그인 로직을 다시 && 연산으로 수정해보면 위와같이 변경할 수 있을 것입니다.

isLoggedIn 변수가 false 이면 Login 컴포넌트 호출하게 됩니다.

판단식이 true 일 경우에 오른쪽의 수행식이 수행되게 되며, 만약 false 일 경우에는 수행식이 스킵되게 됩니다.

이렇게 삼항 연산자와 && 연산자를 사용하면 statement 수행식으로 따로 구현했던 if 문과 동일하게 동작되는 반환문을 만들어줄 수 있고 코드의 양도 효율적으로 줄여줄 수 있습니다.

이번에는 로그인 페이지 구현이나 삼항 연산자, && 연산자와 같은 조건부 렌더링에 대해서 전부 간단하게 알아보았지만 이후 좀 더 자세하게 알아보고 정리해보도록 하겠습니다.

728x90

LIST

'기술 창고 > React' 카테고리의 다른 글

[React] Hook - useState (0)	2023.08.03
[React] state(상태)와 React 프로그래밍 방식 (0)	2023.08.03
[React] 컴포넌트 Mapping 데이터 (0)	2023.07.25
[React] React DevTools 와 컴포넌트 세분화 구성 (0)	2023.07.25
[React] Props (0)	2023.07.21

개발남발