JSX, 컴포넌트 리스트(feat. key, 재조정), 조건부렌더링

1. JSX

1) JSX란?

JSX란 JavaScript XML의 약자로, 리액트에서 사용하는 특수한 문법. JSX는 HTML과 매우 유사하지만 엄연히 다른 언어이며, JavaScript 코드에서 마치 HTML을 사용해 UI컴포넌트를 만드는 것 같은 편리한 개발 경험을 제공

2) HTML과 JSX의 문법적 차이

• 모든 프로퍼티 이름은 카멜 케이스(CamelCase)로 함
  -> 자바스크립트 변수명에는 하이픈 -이 올 수 없기 때문, 예를 들어 인라인 스타일로 배경색을 줘야한다면, background-color 대신 backgroundColor로 써야함
• 문자를 제외한 속성값은 중괄호({ })를 사용
• 'true' 값을 갖는 속성은 속성 이름만으로 표현할 수 있음. 만약 false라면 중괄호를 사용.
  -> JSX에서 true, false, null, undefined를 렌더링하게 된다면 아무것도 나타나지 않게 됨
• 'class' 속성은 'className'으로 표기
  -> JSX는 JS코드로 이뤄져있기 때문에 class 라는 단어는 이미 JS에서 예약어로 사용하고 있어 이용할 수 없음
• 인라인 스타일은 객체 형태로 사용

---

2. 컴포넌트 리스트

1) map 메서드를 사용하여 컴포넌트 리스트 만들기

function App() {
  const foods = ["김치찌개", "햄버거", "족발"];
  return (
    <>
    	<h1>맛있는 음식들 리스트</h1>
    	{foods.map(item=> <div>{item}</div>)}
    </>
  );
}

export default App;

2) 재조정

• 리액트는 메모리에 VDOM 이라는 가상의 돔 트리를 존재시킴
• 리액트는 기존의 VDOM과 변경사항이 생긴 VDOM을 비교하는 작업인 재조정(Reconciliation)을 통해 변경시킬 일부 부분만을 리렌더링하게끔함
• 비교할 때 사용하는 비교 알고리즘(Diffing Algorithm)이 존재함 (비교알고리즘 mdn)

3) key

3-1) key값을 넣어줘야하는 이유

• 다음 경고는 "리스트 각 요소가 고유한 key 값을 가지지 않았다."라는 경고 메세지

• 키값을 넣어주는 이유는 리액트에서 랜더링 작업을 진행했을 때 어떤 요소에 변동이 있다면 그 요소만 새로 그려주기 위함. key가 없다면 하나의 요소가 변경이 되어도 array에 담긴 요소를 모두 다시 그림. (예시)

• key 값은 동일한 컴포넌트 리스트에서만 ‘고유한 값’이면 됨.

• 고유의 값을 찾을 수 없다면 인덱스를 key로 사용하면 되지만 단순히 에러를 제거하기 위한 미봉책일 뿐 권장하지 않음 [React] 배열의 index를 key로 쓰면 안되는 이유
  

---

3. 조건부렌더링

1) 삼항연산자

• ? 연산자

function App(){
  const [isLogin, setIsLogin] = useState(false)
  
  return (
  	<div>
    	{
			isLogin ? 
              "로그인상태입니다": "로그인해주세요"
		}  
    </div>
  )
}

export default App;

2) 단락 회로평가

• &&연산자: 첫번째 falsy값과 마지막 truthy값을 반환
  → falsy한 값이 있으면 - falsy중에 첫번째 falsy 값을 반환
  → falsy한 값이 없으면 - truthy중에 마지막 truthy 값을 반환

• || 연산자: 첫번째 truthy값과 마지막 falsy값을 반환
  → falsy한 값이 없으면 - truthy중에 첫번째 truthy 값을 반환
  → falsy한 값이 있으면 - falsy중에 마지막 falsy 반환

  true && <h1>hello world</h1> // h1 출력
  false && <h1>hello world</h1> // false 출력 
  true || <h1>hello world</h1> // true 출력
  false || <h1>hello world</h1> // h1 출력
  
  // false와 true는 화면에 출력되지 않는다.

3) nullish 연산자

• nullish하다란?
• ??연산자
  → 앞의 값이 null이면 뒤의 값 출력
  → 앞의 값이 null이 아니면 앞의 값 출력

  const a = undefined;
  const b = "b";
  {a ?? <div>hi</div>} // <div>hi</div> 출력
  {b ?? <div>hi</div>} // "b" 출력