React - Conditional Rendering

Conditional Rendering

Definition

• Rendering only parts of a component based on the program's state - Can be used for purposes such as showing/hiding elements or handling authentication - Can be implemented using if statements or conditional operators

Example

• Not logged in

• While logged in

Code used

### How to Use

~~~react //if문 사용 방식 function LoginComp(comp){ const loggedBool = comp.isLogged; if(loggedBool){ return( <logout/> ) } return( <logout/> ) }


//How to use the ternary operator //Operates as condition ?. true : false function LoginComp(comp) {   const loggedBool = comp.isLogged;   return(     <> {loggedBool ? <logout/> : <login/>}   </> ) }

- When using the ternary operator, a single return statement is sufficient.