조건부 랜더링

taeheech·2020년 8월 2일

로그인화면에서 회원로그인&비회원로그인 각각의 탭을 눌렀을 때
화면에 보이는 것들이 달라지는 코드

회원로그인 탭을 눌렀을 때

비회원로그인 탭을 눌렀을 때

state에 key: activeID, value: 0(default로 갖고싶은 값)

사용자가 클릭(event handler-onClick)시 실행될 함수
state에 저장된 activeID키값을 인자(id)로 들어오는 값으로 변경한다(setState)

onClick이벤트가 실행되는 곳
클릭 시 tabHandler함수를 실행시키며 0이라는 인자를 보내준다

MememberSignIn 과 NonMemberSignIn 두개의 컴포넌트를 activeID키값에 따라 변경되는 조건문.
activeId === 0 일 때, MemeberSignIn 컴포넌트가,아니면 NonMemberSignIn컴포넌트가 div(상위태그)에 들어온다.

0개의 댓글