Conditional Rendering
: 조건부 렌더링
➡️ 어떠한 조건에 따라 렌더링이 달라지는 것
➡️ 조건문 (true/false에 따라 렌더링 달라짐)
➡️ 회원인지 아닌지에 따라 (t/f에 따라) 다른 함수 리턴
💡 Truthy / Falsy
: true는 아니지만 true로 여겨지는 값
: false 아니지만 false로 여겨지는 값
💡 Element Variable
: react element를 변수처럼 다루는 방법
➡️ 버튼 변수에 컴포넌트 대입
➡️ 컴포넌트가 대입된 변수 리턴에 넣어 실제로 컴포넌트가 렌더링 되도록
++ ) 실제로는 component가 아니라 component에 의해 생성된 react element
Inline Condition
: 조건문을 코드 안에 집어넣는 것 (필요한 곳에 직접 넣어 사용)
💡 Inline If
: If문의 경우 && 연산자를 사용
➡️ 조건문이 true면 뒤의 식 실행 (h2실행)
➡️ 조건문이 false면 그냥 바로 false문 실행
➡️ count=0 -> false -> div문 실행
💡 Inline If-Else
: 조건문에 값에 따라 다른 element보여줄 때
➡️ 3항 연산자 사용
➡️ true면 로그인 / false면 로그인하지 않은
➡️ true면 로그아웃 버튼 실행 /false면 로그인 버튼 실행
💡 컴포넌트를 리텅하고 싶지 않을 때!!
: null을 리턴하면 렌더링되지 않음
➡️ warning일 때만 경고 표시
➡️ warning이 아니면 렌더링 xx
