// 올바른 예시, else생략도 가능
function Component(){
if( true ){
return <p>참이면보여줄HTML</p>;
} else {
return null;
}
}
// 틀린 예시
function Component(){
return(
<div>
if(true){
return <p>참이면보여줄HTML</p>;
} else {
return null;
}
</div>
)
}
<div> if{~~}{~~} </div>
이 안된다는 것조건문 ? 조건이 참일 경우 실행될 코드 : 조건이 거짓일 경우 실행될 코드
function Component(){
return (
<div>
{
1 === 1 // 조건
? <p> 참일 경우 보여줄 HTML </p>
: null
}
</div>
)
}
// 삼항연산자는 중첩사용도 가능하다.
function Component(){
return (
<div>
{
1 === 1
? <p> 첫번째 참일 경우 보여줄 HTML </p>
: ( 2 === 2
? <p> 두번째 조건이 참일 경우 보여줄 HTML </p>
: <p> 두번째 조건이 거짓일 경우 보여줄 HTML </p>
)
}
</div>
)
}
function Component(){
return(
<div>
{
1 === 1 && <p>참일 경우 보여줄 HTML</p>
}
</div>
)
}
// 위와 아래는 같은 코드
function Component(){
return(
<div>
{
1 === 1
? <p> 참일 경우 보여줄 HTML </p>
: null
}
</div>
)
}
// ( index.js )
// reducer에서 if문
function reducer(state, action){
if ( action.type === '증가'){
return 증가된state
} else if ( action.type === '감소'){
return 감소된state
} else {
return state
}
}
// reducer에서 switch문
function reducer(state, action){
switch( action.type ){ // switch( 검사할변수명 ) {}
case '증가' : // 검사할변수명이 '증가'일 경우
return 증가된state; // 일치할 경우 case : 밑의 코드를 실행해준다.
case '감소' :
return 감소된state;
default : // if문의 else와 동일
return state
}
}
경우에 따라서 다른 HTML을 보여주고 싶을 때
( ex) 쇼핑몰 상품설명부분의 탭을 만들 때)function Component(){
var 현재상태 = 'info';
return(
<div>
{
{
info : <p>상품정보</p>
shipping : <p>배송관련</p>
refund : <p>환불약관</p>
}[현재상태]
}
</div>
)
}
① 자바스크립트 오브젝트자료형
을 이용하여 보여주고 싶은 HTML을 다 담는다.
② 마지막 object{}뒤
에 [] 대괄호
를 붙여서 key값이 현재상태인 자료를 뽑겠다
라는 뜻이다.
③ 위의 예시의 경우 var 현재상태가 'info'면 info항복에 저장된 <p>태그가 보여질 것 이다.
var tabUI = {
info : <p>상품정보</p>,
shipping : <p>배송관련</p>,
refund : <p>환불약관</p>
function Component(){
var 현재상태 = 'info';
return(
<div>
{
tabUI[현재상태]
}
</div>
)
}
}