React 조건부 렌더링

조건부 렌더링

• 상황(조건)에 따라서 다르게 렌더링하려 할때 사용하는 방법
• if, &&, ? : 를 사용하는 방법이 존재

common syntex

interface Props{
	num: number;
}

1. if문을 이용한 조건부 반환

• JSX 외부(return 밖) 에서 조건에 따라 return을 다르게 주는 방법

num 값이 양수면 붉은색, 음수면 파란색, 0이면 초록색으로 표시

function IfComponent({num}:Props){
	if(num > 0){
		return(
			<h1 style={{color: 'red'}}>{num}</h1>
		);
	}
	if(num < 0){
		return(
			<h1 style={{color: 'blue'}}>{num}</h1>
		);
	}
	return(
		<h1 style={{color: 'green'}}>{num}</h1>
	);
}

2. 삼항연산자 (? :) 를 이용한 조건부 렌더링

• JSX 내부(return 내부) 에서 상황(조건)에 따라서 랜더링 하고자 할 때 사용

num 값이 양수면 붉은색, 음수면 파란색, 0이면 초록색으로 표시

function TreeTermComponent({num}:Props){
	return(
		<h1 style={{color: num > 0 ? 'red' : num <0 ? 'blue' : 'green'}}>{num}</h1>
	)
}

3. 논리 AND & OR 연산자 활용

• JSX 내부 (return)내부 에서 상황(조건)에 따라서 렌더링 하고자 할 때 사용

num이 짝수일때만 렌더링

function LogicComponent({num}: Props){
	return (
		<h1>num: {(num % 2 === 0) && num}</h1>
	)
}