(React) 리액트 조건부 렌더링/삼항연산자, AND연산자, OR연산자

---

(React) 리액트 조건부 렌더링/삼항연산자, AND연산자, OR연산자

---

1. 삼항연산자

<True일때>

ex) 1 === 1 ? "true일때 들어올 값" : "false일때 들어올 값";

 

아래 코드에서 blog ==="코짜문" 이 식은 true이므로 

<h1>코드짜는 문과녀 입니다.</h1>를 화면에 출력하게 됩니다.

*아래는 함수형 컴포넌트 입니다.

 

src/App.js

import React from "react";

function App() {
  const blog = "코짜문";
  return (
    <div>
      {blog === "코짜문" ? <h1>코드짜는 문과녀 입니다.</h1> : <h1>없음</h1>}
    </div>
  );
}

export default App;

 

<출력화면>

<False일때>

하지만 아래와 같이 blog === "아무값" 은 false이므로 <h1>없음</h1>이 화면에 출력됩니다.

 

src/App.js

import React from "react";

function App() {
  const blog = "코짜문";
  return (
    <div>
      {blog === "아무값" ? <h1>코드짜는 문과녀 입니다.</h1> : <h1>없음</h1>}
    </div>
  );
}

export default App;

 

 

<출력화면>

---

2. AND 연산자(&&)

And연산자는 a && b 에서 a와 b 둘다 true일 경우에만 식이 성립됩니다.

a와 b중 하나라도 false인 경우, null과 값이 아무것도 출력하지 않습니다.

 

<True일때>

*아래는 화살표 함수형 컴포넌트 입니다.

 

src/App.js

import React from "react";

const App = () => {
  const blog = "코짜문";
  return <div>{blog === "코짜문" && <h1>코짜문 입니다.</h1>}</div>;
};

export default App;

blog === "코짜문" 은 true이고,  <h1>코짜문 입니다.</h1> 도 true이므로

화면에 값을 출력합니다.

blog = undefined, blog=null 과 값이 값이 없을 경우는 false입니다.

또한, <h1>코짜문</h1> && <h1>코짜문입니다</h1> 과 같이 양쪽 다 태그를 넣은 문장일 경우,

뒷 문장만 출력합니다. 

 

<h1>코짜문</h1> && <h1>코짜문입니다</h1>  

=> (출력) <h1>코짜문입니다</h1>

 

<출력화면>

 

 

<False일때>

 

src/App.js

import React from "react";

const App = () => {
  const blog = undefined;
  return <div>{blog && <h1>코짜문 입니다.</h1>}</div>;
};

export default App;

 

둘중 하나가 false인 경우, 아래와 같이 빈페이지를 출력합니다.

 

---

2. OR 연산자( || )

OR연산자는 a || b 에서 a와 b 둘 중 하나만  true여도 식이 성립됩니다. 

 

그러므로 undefined값이나, null값일 경우, 보여주고 싶은 문구가 있을시 사용할 수 있습니다.

*blog는 false지만, <h1></h1> 값은 true이므로 h1태그 안에 있는 문장을 화면에 출력합니다. 

 

src/App.js

import React from "react";

const App = () => {
  const blog = undefined;
  return <div>{blog || <h1>undefined 입니다.</h1>}</div>;
};

export default App;

 

 

<출력화면>

 

*OR연산자에서 둘다 false일 경우, 빈페이지가 화면에 출력됩니다.