처음에는 로그인 버튼을,
로그인 이후에는 로그아웃 버튼을 보여주고 싶다.
이렇게 조건에 따라서 화면에 렌더링해주는 것을 조건부 렌더링이라고 말하는 듯 하다.
몇가지 사용되는 방법이 있는데, 우선 두가지만 사용했다.
1. && 연산자로 If를 인라인으로 표현하기
isLogin이 true인 경우에만 해당 내용이 표시된다.
2. 변수값을 조건에 맞게 할당
이렇게 isLogin에 따라 삼항연산자로 값을 나눴다.
그런 뒤에 return안에 { 변수 } 형태로 넣어줬다.
결과
로그인 전
로그인 후
'Front-End > React' 카테고리의 다른 글
| React 8 : PUT 메소드 이후 게시글 이동시 수정전 게시글이 불러와진다. (비동기 처리 주의) (0) | 2023.11.02 |
|---|---|
| React 6 : 카카오 소셜 로그인 구현하며 겪은 허무한 오류 (spring) (0) | 2023.10.18 |
| React 5 : 유저전용 페이지 (0) | 2023.10.07 |
| React 4 : [React-Router-Dom, NotFound페이지, Header 표시하기] (0) | 2023.09.28 |
| TIL 230814 : 리액트를 접해보기 3 (useEffect) (0) | 2023.08.17 |
