[React] UI 구성하기

📌 React란?

• React는 자바스크립트 UI 라이브러리
• 작은 단위의 컴포넌트들로 화면 구성
• 이 컴포넌트들은 재사용과 중첩이 가능해서
  • 개발자가 자유롭게 화면을 작은 단위로 나누어서 작업할 수 있게 해 줌

🎁 컴포넌트란?

• 컴포넌트는 JSX를 포함하는 자바스크립트 함수
• 컴포넌트는 순수해야 하고 재사용 가능하도록 작은 단위로 나누어져야 함

🎙️ JSX란?

• HTML처럼 작성되지만 실제로는 JavaScript
• HTML보다 작성 형태가 더 엄격하고, JS 변수를 받아서 동적인 정보 표시 가능
• JS 안에 마크업을 삽입할 수 있는 자바스크립트 확장 구문
• 렌더링하는 JS 로직과 렌더링할 마크업 컨텐츠를 한 곳에 둘 수 있음
  • 웹이 점점 인터랙티브해지면서 로직이 컨텐츠를 결정하는 경우가 많아짐
  • React에서 렌더링 로직과 마크업이 같은 위치의 컴포넌트에 함께 있는 이유
• JSX는 브라우저가 인식하지 못해서 바벨을 통해 자바스크립트로 컴파일 필요
• &&이나 삼항 연산자를 통해 조건부 렌더링 가능
  • JSX는 JS 컴포넌트 함수의 '반환 값'
  • if 문은 '문'이어서 안 되고 &&이나 삼항 연산자는 '값'이어서 가능

💡 JSX 규칙

1. 단일 root 엘리먼트 반환

• 여러 엘리먼트를 반환할 때 하나의 부모 태그로 감싸주기
• Fragment 태그로 브라우저 HTML 트리에 흔적을 남기지 않고 여러 개의 태그를 그룹화 가능 (불필요한 div도 추가할 필요 x)
• 왜 여러 개를 하나로 감싸줘야 할까?
  • JSX는 HTML처럼 보이지만 실제로는 자바스크립트인 컴포넌트 함수의 '객체' 반환 값이기 때문
  • 자바스크립트 함수에서는 하나의 객체만 반환할 수 있음

2. HTML보다 엄격하게 작성

• <div> 같은 wrapping 태그는 반드시 앞뒤로 닫아줘야 함 (<div></div>)
• 자체적으로 닫는 태그 뒤에는 반드시 슬래시 추가 (<img> => <img />)

3. attribute는 반드시 '카멜 케이스'로 작성 & 예약어 사용 불가

• JSX의 각 attribute는 각각 자바스크립트 객체의 key
• 객체의 key에는 케밥 케이스나 스네이크 케이스를 사용할 수 없기 때문에 카멜 케이스 사용
  • 예: stroke-width 대신 strokeWidth, 예약어 class 대신 className 사용

🎙️ props란?

• 부모 컴포넌트가 자식 컴포넌트에 정보를 전달하는 것
• props로는 배열, 함수를 포함한 모든 자바스크립트 값을 전달 가능

🎙️ 배열 렌더링

💡 각 항목마다 key 지정하기

• map에서 자체적으로 나오는 id보다 데이터 자체의 id를 key로 사용하는 것이 좋음
• key를 사용하면 목록이 변경되더라도 React에서 각 항목의 위치를 추적할 수 있어서 불필요한 배열 리렌더링이 발생 x

🎙️ 컴포넌트의 순수성

• 리액트 컴포넌트는 컴포넌트 '함수'
• 컴포넌트 함수는 '순수'해야

💡 순수 함수란?

• 호출되기 전에 존재하는 객체나 변수를 변경하지 않는 함수
• 동일한 입력이 주어지면 항상 동일한 결과 값을 반환하는 함수

• 컴포넌트를 순수하게 유지하는 것의 장점
  • 가상 DOM을 사용하는 리액트 => 렌더링 상에서 꼬이는 것 방지

순수하지 않은 컴포넌트 vs. 순수한 컴포넌트

let guest = 0;

function Cup() {
  // Bad ❌: 기존 변수를 직접 변경
  guest = guest + 1;
  
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

순수하게 만드는 방법? => props 사용

function Cup({ guest }) {
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );
}