React / Conditional Rendering (&&연산자를 사용한 조건부 렌더링)

What is React Conditional Rendering?

리액트에서 말하는 조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 화면에 렌더링 하는 것을 의미한다.

+) 요즘 리액트를 공부하면서 익히고 있는 개념들 중 하나이다. 삼항연산자, &&연산자등을 활용해서 나타낼 수 있는데, 밑의 코드는 과제 중 일부이다.

 <div className="reviewMain">
        <div className="reviewMainContents">
          {showText && (
            <>
              <p>주문한지 하루만에 배송이 도착해서 너무 좋았습니다.</p>
              <p>다음에도 필요하면 또 여기서 시킬 것 같아요.</p> 
            </>
          )}
        </div>
        <span className="reviewMainHandler" onClick={content}>
          {showText ? "접기 ▲" : "더보기 ▼"}
        </span>
      </div>

< 삼항연산자를 사용한 조건부 렌더링은 주로 특정 조건에 따라 보여줘야하는 내용이 다를때 사용하고, 위의 코드처럼 특정 조건이 만족할 때만 그 결과 값이 출력되고 만족하지 않는다면 아무것도 나오지 않는 간단한 처리가 필요한 상황이라면 &&연산자를 사용 하는게 좋다. >

< && 연산자로 드롭다운 예시 연습 >

import React from "react";
import { useState } from "react";

function App() {
	const [isOpen, setIsOpen] = useState(false);
  	const handleDropdown = () => {
    	setIsOpen(!isOpen); ** 클릭했을때 setIsOpen 값이 나오게 해야한다.
        					state 선언 후에 set값 설정 **
      };
      
    return (
     	<div className = "dropdown">
        	<button onClick={handleDropdown} > click to see </button>
            {isOpen && ( //isOpen(false) -> 클릭 했을때 && 뒤의 값(!isOpen)이 보이게 한다.
            	<ul>
                	<li>hi</li>
                    <li>new developer!</li>
                </ul>
              )}
         </div>
         )};

export default App;

위 부분들을 연습하면서 연산자 사용하는 법이 어색해서 따로 개념 정리 해야겠다고 느껴 개념 정리를 다시해보았다.

단축 평가 논리 계산법(short-circuit evaluation)
&& 연산자와 OR (||) 연산자

ture && ture // true
ture && false // false
false && ture // false

true || true // true
true || false // true
false || true // true
false || false // false -> 뒤의 false 출력
  

A && B 연산자에서 앞의 A값이 true 면 B값이 출력되고, 앞의 A값이 false이면 A값이 출력된다.

-> &&연산자는 false 값을 먼저 찾는다.

A || B 앞의 A값이 true 라면 A 값이 그대로 출력되고, A 값이 false라면 B의 ture값이 출력된다. 또 둘다 false 라면 뒤의 false값을 출력한다.

-> OR (||) 연산자는 true 값을 먼저 찾는다.

나는 OR (||) 연산자가 더 헷갈렸는데 결론적으론 &&연산자는 false을 우선으로 OR연산자는 true값을 우선으로 한다고 일단 이해했다. 아직까지는 이러한 연산자가 어색하고 if문이 더 익숙한데, 상황에 맞게 또 자유롭게 쓸 수 있도록 연습해야겠다.