조건부 렌더링

조건을 걸어 원하는 상황에 렌더링 시키는 방식을 말한다.
조건부 렌더링을 구성할 때는 대표적으로 삼항 연산자를 사용하거나, AND 연산자를 이용한다.
또한 let으로 변수를 선언하여 초기값을 넣고 이를 if문으로 만들어 데이터를 덮어씌우는 식으로 조건부 렌더링을 만들 수 있다.

삼항 연산자를 사용하는 방법

밑의 코드는 삼항 연산자 사용한 조건부 렌더링이다.

JSX

&&(and) 연산자를 사용하는 방법

밑의 코드는 AND 연산자를 사용한 조건부 렌더링이다.

JSX

AND 연산자를 조건부 렌더링에 사용할 때 주의할 점, falsy한 값이 0 인 경우에는 렌더링이 된다.

JSX
const number = 0
return number && <div>내용</div>

위의 경우 렌더링이 됨 number가 falsy한 값이기 때문이다.

let에 데이터를 덮어 씌우는 방법

기본 변수(Variable)에 초기값의 JSX를 넣어두고 if문을 통해 렌더링할 데이터를 업데이트하는 방법이다.

JSX

조건을 걸어 원하는 상황에 렌더링 시키는 방식을 말한다.
조건부 렌더링을 구성할 때는 대표적으로 삼항 연산자를 사용하거나, AND 연산자를 이용한다.
또한 let으로 변수를 선언하여 초기값을 넣고 이를 if문으로 만들어 데이터를 덮어씌우는 식으로 조건부 렌더링을 만들 수 있다.

삼항 연산자를 사용하는 방법

밑의 코드는 삼항 연산자 사용한 조건부 렌더링이다.

JSX
function App(){
	const name = '리액트';
	
	return (
		<div>
			{name === '리액트' ? (
			<h1>리액트입니다.</h1>
			) : (
			<h2>리액트가 아닙니다.</h2>
			)}
		</div>
	)
}

export default App;

&&(and) 연산자를 사용하는 방법

밑의 코드는 AND 연산자를 사용한 조건부 렌더링이다.

JSX
function App(){
	const name = '리액트';
	
	return (
		<div>
			{name === '리액트' && <h1>리액트입니다.</h1>}
			{!name && <h1>리액트가 아닙니다.</h1>}
		</div>
	)
}

export default App;

AND 연산자를 조건부 렌더링에 사용할 때 주의할 점, falsy한 값이 0 인 경우에는 렌더링이 된다.

JSX
const number = 0
return number && <div>내용</div>

위의 경우 렌더링이 됨 number가 falsy한 값이기 때문이다.

let에 데이터를 덮어 씌우는 방법

기본 변수(Variable)에 초기값의 JSX를 넣어두고 if문을 통해 렌더링할 데이터를 업데이트하는 방법이다.

JSX
function App(){
	const name = '리액트';
	
	let basic = <h2>리액트가 아닙니다.</h2>
	if (name) {
		basic = (<h1>리액트입니다.</h1>})
	}
	
	return (
		<div>
			{basic}
		</div>
	)
}

export default App;

삼항 연산자를 사용하는 방법

&&(and) 연산자를 사용하는 방법

let에 데이터를 덮어 씌우는 방법

Synapse Map Insight

조건부 렌더링

삼항 연산자를 사용하는 방법

&&(and) 연산자를 사용하는 방법

let에 데이터를 덮어 씌우는 방법

Synapse Map Insight