리액트 기본 배우기 -조건부 렌더링에 대해-

1. 조건부 렌더링 조건에 따른 렌더링 어떠한 조건에 따라 렌더링이 달라지는 것 조건문의 결과 true아니면 false인데 이 결과에 따라 렌더링을 다르게 하는 것 function UserGreeting(props) { return 다시 오셨군요! } function GuestGreeting(props) { return 회원가입을 해주세요. } 위 코드에서는 UserGreeting과 GuestGreeting 두개의 함수 컴포넌트가 있다 UserGreeting은 이미 회원인 사용자에게 보여줄 메시지를 출력하는 컴포넌트이고 GuestGreeting은 아직 가입하지 않은 게스트 사용자에게 보여줄 메시지를 출력하는 컴포넌트이다. 회원인지 아닌지에 따라 2개의 컴포넌트를 선택적으로 보여줘야할 것이다. functi..

• format_list_bulleted 프로그래밍/React
• · 2023. 1. 12.
• textsms

inline 요소와 block 요소 완전 정복

1. css 원칙 2 "모든 요소는 네모(박스모델)이고 좌측 상단부터 위에서 아래로, 왼쪽에서 오른쪽으로 배치" "display에 따라 크기와 배치가 달라진다" 박스로 쌓이는 태그들을 display 설정에 따라 배치해나간다 2. block display:block 줄 바꿈이 일어나는 요소 말 그대로 블록처럼 위에서 아래로 쌓인다 화면 크기 전체의 가로 폭을 차지 그러니까 다음 블록을 쌓으면 다음 줄에 쌓인다 물론 width로 크기를 지정할 수 있는데 그렇다고 해서 여러 block이 한줄에 쌓이는 것은 아니다 width만큼 내용물을 채우고 그만큼 우측에 margin을 자동으로 채우나봐 블록 요소 안에는, 인라인 요소가 들어갈 수 있다 대표적인 블록 요소는 div, ul,ol,li, p, hr, form 3..

• format_list_bulleted 프로그래밍/비전공자를 위한 Web
• · 2022. 8. 7.
• textsms