[React] 컴포넌트에 조건문 주기, if, 3항 연산

컴포넌트에 분해할당으로 속성을 전달하는 것을 알아보았다.

[React] 분해할당, Destructuring Assignment

이번엔 조건문을 통해 컴포넌트의 출력을 다르게 해보도록 한다.

 

if

AppOther컴포넌트 내의 Booklist컴포넌트에 속성값으로 ASC를 주었다.

Booklist의 sortOrder속성이 ASC일 경우엔 위의 경우로

ASC값이 아닐 경우에는 아래의 경우로 출력되도록 해봤다.

ASC                                                                                         DESC

 

sortOrder값에 따라 BookCard의 위치가 다르게 출력된다.

 

삼항연산자 - 조건 ? 참 : 거짓

3항 연산자도 같은 형식으로 만들었다.

조건이 참일때는 위의 내용이, 

거짓일 때는 아래의 내용이 출력된다.

이번엔 DESC일 경우를 먼저 테스트하고 후에 ASC를 넣어본다.

DESC                                                                                                   ASC

컴포넌트로 전달받은 속성값에 따라 조건문을 주어 내용을 통제할 수 있다.