[멋쟁이 사자처럼 프론트엔드 스쿨] 62일차 TIL - JSX 마크업 (조건부 렌더링, 리스트 렌더링)

🍰 우와 너무 밀려서 일단 올려놓고 업데이트 해야겠다.

🍫 ?url

• Vite 또는 다른 번들러에서 사용되는 특별한 쿼리 파라미터
• 에셋 처리 지시자 - ?url은 번들러에게 이 파일을 어떻게 처리해야 하는 지 알려줌
• ?url 사용 시 번들러가 자동으로 content hash를 생성해줌

🍫 Content hash

• 파일의 내용을 기반으로 생성되는 고유한 문자열
• 파일 내용 변경 시 해시 값도 변경됨
• 생성 과정
  • 번들러가 빌드 과정에서 각 파일의 내용을 읽음
  • 파일 내용을 해시 함수에 통과시켜 고유한 해시값을 생성함
  • 이 해시 값을 파일 이름에 추가함
  • 번들러가 이 과정을 자동으로 처리함

 

🍴 JSX 마크업

: JSX는 JavaScript의 확장 문법. HTML보다 더 엄격하고 몇 가지 규칙이 있음.

🍫 1. 하나의 루트 엘리먼트로 반환하기

return(
	<div>
    	<h1>JSX 규칙 공부하기</h1>
    </div>
    )

그러나 div는 묶기 위해서 사용하기에는 목적이 잘못되었기 때문에 의미에 맞는 요소가 없을 때 최후의 수단으로 사용해야 한다. React의 Fragment 사용하기!

🍫 Fragment

: 빈 태그. 브라우저상의 HTML 트리 구조에서 흔적을 남기지 않고 그룹화해 줌.

return(
    <>
    	<h1>JSX 규칙 공부하기</h1>
    </>
    )

🍫 왜 JSX 태그를 하나로 감싸야 함?

• JSX는 내부적으로 일반 JavaScript 객체로 변환됨.
• 하나의 배열로 감싸지 않은 하나의 함수에서 두 개의 두 개의 객체를 반환할 수 없음.
• => 감싸지 않으면 두 개의 JSX 태그를 반환할 수 없음.

🍫 2. 모든 태그는 닫아주기

<img src="" alt="" />

🍫 3. camelCase로 작성

• JSX는 JavaScript로 바뀌고 JSX의 어트리뷰트는 JavaScript 객체의 키가 됨.
• JavaScript는 변수명에 예약어를 사용할 수 없음.

<h1 className="title">이런 식으로 카멜 케이스로 작성</h1>