[React] 조건부 렌더링

특정 조건에 따라 다른 결과물을 출력하는 것을 조건부 렌더링이라고 한다.

어떤 변수가 특정 값을 가질 때 특정 컴포넌트를 렌더링하고 싶은 경우 사용한다.

조건부 렌더링 방법
1. && 사용
2. 삼항 연산자 사용
3. if ~ else 문 사용

1. &&

menubar라는 변수가 있고 이 변수값에 따라서 MenuBar 컴포넌트를 표시한다는 예시를 보면 아래와 같다.

const [menubar, setMenubar] = useState(true);
//...//
function onClickMenuBtn() {
    setMenubar(!menubar);
}
//...//
<div onClick={onClickMenuBtn}>
	<img src={MenuImg} width='45' height='45' alt='menuIcon' />
</div>
//...//
<div>
	{menubar === true && (
		<div className='menubar'>
			<MenuBar />
		</div>
	)}
</div>

먼저, menubar는 동적인 값이기 때문에 useState를 사용하여 생성해준다.

onClick 이벤트가 발생했을때 setMenubar에 의해서 값이 반전되도록 구현되어있다.

이때, menubar가 true면 MenuBar 컴포넌트를 렌더링하고 false이면 렌더링하지 않는것을 &&로 구현할 수 있다.

<div>
	{menubar === true && (
		<div className='menubar'>
			<MenuBar />
		</div>
	)}
</div>

2. 삼항 연산자 사용

위의 같은 예시에서 MenuBar 컴포넌트를 렌더링하는 것을 삼항 연산자를 사용하여 나타낼 수 있다.

<div>
	{menubar === true ? (
		<div className='menubar'>
			<MenuBar />
		</div>
	):null}
</div>

true이면 MenuBar 컴포넌트를 렌더링하고 그렇지 않으면 null을 사용하여 아무것도 렌더링하지 않도록 할 수 있다.

3. if ~ else 문 사용

위의 예시를 if~else 문을 사용해서도 나타낼 수 있다.

<div>
	{
  	if(menubar === true) { return 
		<div className='menubar'>
			<MenuBar />
		</div>
	}else{return 
     		null}
	}
</div>