리액트에서는 true , false 로 인해서 렌더링이 될지 안될지 결정하는 Condition Rendering 이 있습니다 오늘은 이에 대해서 알아보겠습니다
Truthy , Falsy
그전에 먼저 이에 대해서 알아보겠습니다 컴퓨터 프로그래밍 자료형에서 참 거짓을 나태내는 자료형은 Boolean 이라는 자료형입니다 이 자료형에는 true , false 가 들어가서 해당 변수가 참인지 거짓인지 알 수 있게 만들어져 있습니다 그런데 이 참 거짓 자료형은 아니지만 마치 true 처럼 false 처럼 행동하는 것들을 각각 Truthy , Falsy 라고 합니다
Truthy 종류
Truthy 종류에 대해서 알아보도록 하겠습니다
1
2
3
4
5
6
7
8
9
10
if({}){
console.log(`{} 은 Truthy`)
}else{
console.log(`{} 은 Falsy`)
}
예를 들면 이런 식입니다 {} 배열은 Truthy 로 움직입니다 그래서 이곳에서는 console.log(`{} 은 Truthy`) 가 호출이 됩니다 이런 종류를 좀더 적어보면
1
2
3
4
5
{} (빈 오브젝트)
[] (빈 배열)
number (숫자 0이 아닌 모든 수 )
String (비어 있지 않은 모든 문자 또는 문자열)
이런 4개의 종류는 기본적으로 Truthy 로 행동합니다
마찬가지로 Falsy 종류를 알아보면
1
2
3
4
5
0 (숫자중에서 0만)
"" (비어 있는 문자열)
null
undefinded
요런것들은 Falsy 로 false 처럼 행동합니다 그러면 이것을 먼저 보는 이유는 하나입니다 실제로 react 조건부 렌더링에서는 true , false 보다는 이런 Truthy , Falsy 로 조건부 렌더링을 하게 됩니다
조건부 렌더링
다음과 같은 요구사항이 있습니다 어떤 변수를 두고 그 변수가 true 이면 환영합니다 라는 문구를 표기하고 false 리면 처음 오셨군요 라는 요구사항이 있다고 합니다 이를 각각 조건부 렌더링으로 구현을 하겠습니다
1
2
3
4
5
6
7
8
9
10
11
import React from "react";
function First(props){
return (
<div>처음 오셨군요</div>
)
}
export default First;
1
2
3
4
5
6
7
8
9
10
11
import React from "react";
function NotFirst(props){
return (
<div>환영합니다</div>
)
}
export default NotFirst;
먼저 2개의 리액트 컴포넌트를 만들겠습니다 처름오셨으면 First 아니면 NotFirst 를 보여줄것입니다
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
32
33
34
35
36
37
import React, { useState } from "react";
import First from "./First";
import NotFirst from "./NotFirst";
function Welcom(props){
const [isFirst , setIsFirst] = useState(false)
let button;
if(isFirst){
button = <First/>
}else{
button = <NotFirst/>
}
const btn_isFirst = (event) => {
setIsFirst(!isFirst)
}
return (
<div>
{button}
<button onClick={btn_isFirst}>isFirst 변경</button>
</div>
)
}
export default Welcom
이곳이 메인이 되는 Welcom 리액트 컴포넌트입니다 지금보면 useState 변수 isFirst 에 의해서 button 이라는 변수 안에 각기 다른 리액트 컴포넌트가 들어가고 있습니다 이처럼 변수에 리액트 컴포넌트 값을 집어넣는것을 element Variables 이라고 합니다 그리고 하단에는 useState 의 변수 isFirst 바꾸는 버튼과 이벤트가 설정이 되어 있습니다 버튼을 누를 떄마다 서로다른 리액트 컴포넌트가 변경되어서 렌더링 되는 모습을 볼 수 있습니다
삼항연산자
위의 소스를 return 에서 바로 사용해보겠습니다 이때는 삼항연산자를 활용해서 사용할 것입니다
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
import React, { useState } from "react";
import First from "./First";
import NotFirst from "./NotFirst";
function Welcom(props){
const [isFirst , setIsFirst] = useState(false)
const btn_isFirst = (event) => {
setIsFirst(!isFirst)
}
return (
<div>
{isFirst ? <First/> : <NotFirst/> }
<button onClick={btn_isFirst}>isFirst 변경</button>
</div>
)
}
export default Welcom
이 소스는 위와 같은 소스를 현재 삼항연산자로 표현을 한것입니다 오늘은 이렇게 변수의 값에 의해서 렌더링이 달라지는 조건부 렌더링에 대해서 알아보았습니다