Javascript의 Logical AND (&&), Logical OR (||)의 정의 및 사용 예시에 대해 알아봅니다.
- 정의(Logical AND &&) -
같은 값을 출력하는 코드를 삼항연산자와 Logical AND를 사용하여 각각 작성하였습니다.
하기 소스코드를 실행합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
import { Fragment, useEffect, useState } from 'react';
function Test() {
const [toggle, setToggle] = useState(true);
useEffect(() => {
console.log(toggle);
});
return (
<Fragment>
<div style={{ marginLeft: 30, marginTop: 30 }}>
<button
onClick={() => {
setToggle((toggle) => !toggle);
}}
>
Component toggle버튼
</button>
{/* ******삼항연산자로 표현****** */}
{toggle === true ? (
<div>toggle이 참 일 경우에만 보입니다(삼항연산자)</div>
) : null}
{/* ******Logical AND로 표현****** */}
{toggle && <div>toggle이 참 일 경우에만 보입니다(Logical AND)</div>}
</div>
</Fragment>
);
}
export default Test;
|
cs |
- 브라우저에서의 구동 -
그림에서와 같이 동일한 결과를 얻을 수 있습니다.
'웹개발자공부 > Javascript' 카테고리의 다른 글
| Javascript - Import, Export 간단 사용 예시 메모 (0) | 2023.02.12 |
|---|---|
| Javascript - Set객체 배열로 변환하기 (0) | 2023.02.08 |
| Javascript - this 사용 유무에 따른 변수 호출 결과 차이 확인 (0) | 2022.12.28 |
| Javascript - 동기와 비동기, 콜백함수, Promise, Async와 Await 개념 정리 (0) | 2022.12.16 |
| Javascript - Nullish coalescing operator(??)의 정의 및 사용 예시 (0) | 2022.12.16 |