React 리액트 - 변수 표현, 삼항연산자

 

 

jsx에서의 변수 표현

 

 

const Jsx03 = () => {

  const name = "아엘"
  const age = "23"
  const gender = "여"
  const intro = `이름: ${name} | 나이: ${age} | 성별: ${gender}`

  return (
    <>
      <h1>
        {intro}
      </h1>
    </>
  )
}

export default Jsx03;

 

 

jsx에서 쓰는 표현은 키보드의 Esc 아래의 ``(백틱)키를 사용한다

 

 

<결과화면>

 

 

삼항연산자

 

 

const Jsx04 = () => {

  const login = true;

  return (
    <>
      <h1>삼항연산자</h1>

      {login ? ( 
        <>
          <p>로그인 성공!</p>
          <p>❤️</p>
        </>
      ): (
        <>
          <p>로그인 실패</p>
          <p>💔</p>
        </>
      )}
    </>
  );
};

export default Jsx04;

 

 

JSX는 if문을 사용할 수 없기 때문에 삼항연산자를 지원한다

JSX 영역 내에서 엔터를 치고 싶으면 소괄호로 감싸준다

 

 

{ 조건식 ? 참일 때 랜더링할 JSX : 거짓일 때 랜더링할 JSX }
{ 조건식 && 참일 때 랜더링할 JSX, 거짓이면 아무것도 출력되지 않는다 }

 

 

if문을 쓰지 않고 연산자로 값을 출력할 수 있다
if문은 JSX 내부에 {} 안에서 사용할 수 없고, 함수 내부에서는 정산적으로 사용할 수 있다

<결과화면>

 

 

const Jsx04 = () => {

  const login = false;

  return (
    <>
      <h1>삼항연산자</h1>

      {login ? ( 
        <>
          <p>로그인 성공!</p>
          <p>❤️</p>
        </>
      ): (
        <>
          <p>로그인 실패</p>
          <p>💔</p>
        </>
      )}
    </>
  );
};

export default Jsx04;

 

 

const login의 값을 false로 바꾸면 

조건식이 거짓일 때의 값이 출력된다

 

* true/false는 소문자로 사용한다

 

 

<결과화면>

 

 

컴포넌트 분리

 

 

age 상수로 나이를 설정한다(임의) 19세 초과 성인이라면 "입장 가능" 성인이 아니라면 "입장 불가" 성인과 관계 없이 age가 짝수라면 "당첨"을 출력

 

 

<코드작성>

const age = 15;
const isAdult = age > 19
const isLucky = age%2 === 0

const Jsx05 = () => {
  return (
    <div>
      { isAdult ? (
        <>
         입장가능
        </>
      ) : (
        <>
          입장불가
        </>
      )}
      { isLucky ? (
        <>
          당첨
        </>
      ) : (
        <>
          꽝
        </>
      )}
    </div>
  );
};

export default Jsx05;

 

 

<결과화면>

 

 

=> 가급적이면 js 작성을 위해 코드를 수정

=> 화면의 동적 제어

 

 

<코드작성>

const age = 10;
const [lucky, unLucky, pass, notPass] = ["당첨", "꽝", "입장 가능", "입장 불가"]
const luckyComponent = <p>{lucky}</p>;
const unLuckyComponent = <p>{unLucky}</p>;
const passComponent = <p>{pass}</p>;
const notPassComponent = <p>{notPass}</p>;

const isAdult = age > 19
const isLucky = age % 2 === 0
const enter = isAdult ? passComponent : notPassComponent
const win = isLucky ? luckyComponent : unLuckyComponent

const Jsx05 = () => {
  return (
    <div>
      {enter}
      {win}
    </div>
  );
};

export default Jsx05;

 

 

<결과화면>

 

 

=> 컴포넌트 분리

 

 

<컴포넌트 파일 분리 생성>

 

 

컴포넌트 파일은 항상 대문자로 시작해야 한다

 

 

<코드작성>

import React from 'react';
import LuckyComp from './LuckyComp';
import UnLuckyComp from './UnLuckyComp';
import PassComp from './PassComp';
import NonePassComp from './NonePassComp';

const age = 20;

const isAdult = age > 19
const isLucky = age % 2 === 0
const enter = isAdult ? <PassComp /> : <NonePassComp />
const win = isLucky ? <LuckyComp /> : <UnLuckyComp />

const Jsx05_4 = () => {
  return (
    <div>
      {win}
      {enter}
    </div>
  );
};

export default Jsx05_4;

 

 

<결과화면>

 

 

 

https://developernew.tistory.com/431

리액트 React 설치방법 feat. VS Code

 

https://developernew.tistory.com/432

React 리액트 기본 개념 + 기초 용어 + 화면구성 및 설정

 

https://developernew.tistory.com/433

React 리액트 - 기본 함수, 컴포넌트의 연산