[JavaScript] if문을 대신하는 && , || 논리 연산자

자... 디지털회로 수업을 들어본 학생이라면 (혹은 그냥 코딩하다)  &&, || 를 접해 본 적이 있을 것이다

 

???: &&은 둘 다 참일 때, ||은 둘 중 하나가 참일 때 true을 반환하잖아요!

 

 

&&: 논리곱 연산자

-true && true =>true 반환, true && false => false 반환

둘 다 true일 떄 true를 return!

 

||: 논리합 연산자

- true || true => true 반환, true || false => true 반환,  false || false => false

둘 중 하나라도! true일 때 true를 retrun!

 

자 그럼 이건 무슨 뜻일까? 

{isWriter && ( //isWriter={글 작성자 아이디 === 현재 로그인된 아이디}
    <>
    <button>삭제하기</button>
    <button>수정하기</button>
    </>

 

??? 아니 좌항 우항 비교 해서 true 아니면 false 출력하는 거 아님?

왜 갑자기 버튼을 넣어요...?

그렇다... 사실 논리 연산자를 사용하여 if else문 처럼 사용할 수 있다!

 && 연산자: true일시, 우항 실행

 || 연산자: false일시, 우항 실행

 

//isWriter={글 작성자 아이디 === 현재 로그인된 아이디}로 선언함
//isWriter가 true이면 삭제/ 수정 버튼 컴포넌트를 노출함

{isWriter && ( 
    <>
    <button>삭제하기</button>
    <button>수정하기</button>
    </>

★ <> </>로 감싸준 이유: react에서 사용된 JSX 요소는 반드시 부모 태그가 감싸줘야하는데,

부모 역할을 해줄 빈 태그로로 감싸준 것이다!

 

true일 때

false일 때 버튼 X

기타적인 코드 요소는 제외하였습니다! TRUE시, 버튼이 출력된다는 것만 봐주세요

//isWriter={글 작성자 아이디 === 현재 로그인된 아이디}로 선언함

//isWriter가 false이면, 수정 불가능한 사용자입니다. 라는 문구 출력
{isWriter || ( 
    <> <h1> 수정 불가능한 사용자입니다. </h1>
    </>
    )}

false일 시

 

★ 참고용

//삼항연산자를 사용한 출력
{isWriter ? ( 
<> 
<button>삭제하기</button>
<button>수정하기</button> 
 </>) : ( <></>)
}

삼항연산자를 사용하여 이와같이도 출력할 수 있다~

if else문만 있는 줄 알았더니만 다양하게 true false 값에 따라 값을 출력할 수 있다는 걸 알 수 있지요? ^^