[React] Describing the UI

📄 Docs

2023년에 리뉴얼된 리액트 공식 문서의 "Describing the UI" 내용이다.

📚 You will learn

• React Component
• import / export
• JSX
• props
• 조건부 렌더링
• 목록 렌더링
• 컴포넌트 순수성 유지

---

1. React Component

1-1. 컴포넌트: UI 구성 요소

• 리액트는 markup, CSS, JS를 사용자 정의 컴포넌트로 결합할 수 있게 해주며, 이는 앱의 재사용 가능한 UI 요소가 된다.

1-2. 컴포넌트 중첩

• 컴포넌트는 일반 JS 함수이므로 한 파일에 여러 컴포넌트를 포함할 수 있다.
• 컴포넌트가 다른 컴포넌트를 렌더링할 수는 있지만, 아래처럼 정의를 중첩해서는 안 된다!!

export default function Gallery() {
  // 🔴 Never define a component inside another component!
  function Profile() {
    // ...
  }
  // ...
}

• 아래처럼 최상위 레벨에서 컴포넌트를 정의해야 한다.

export default function Gallery() {
  // ...
}

// ✅ Declare components at the top level
function Profile() {
  // ...
}

---

2. import / export

2-1. root 컴포넌트 파일

• Create React App에서는 앱 전체가 root 컴포넌트 파일인 src/App.js에서 실행된다. (설정에 따라 다른 파일에 위치할 수도 있다.)

모듈성을 강화하고 다른 파일에서 재사용할 수 있게
컴포넌트를 root 컴포넌트 파일 밖으로 옮기는 방법을 알아보자.

2-2. import / export

1) 컴포넌트 이동시키기

• 컴포넌트를 넣을 JS 파일을 생성한다.
• 함수 컴포넌트를 export한다.
• 사용할 파일에서 import한다.

2) default export VS named export

• 한 파일에서 default export는 하나만 가능!
  named export는 여러 개 가능!
• export 방식에 따라 import 방식이 달라진다.
• default import를 사용할 때는 다른 이름으로 가져올 수 있다.
• named import를 사용할 때는 이름이 같아야만 한다.

Syntax	Export	Import
Default	export default function Button() {}	import Button from './Button.js';
Named	export function Button() {}	import {Button} from './Button.js';

---

3. JSX

3-1. 렌더링 로직과 마크업이 같은 컴포넌트에 위치하게 된 이유

• JSX: JS를 확장한 문법으로, JS 파일 안에 HTML과 유사한 마크업을 작성할 수 있게 해준다.

• 기존의 웹은 로직은 JS에, 마크업은 HTML 파일에 분리되어 있었다.
  웹에서 더욱 높은 수준의 상호작용이 허용되면서, 로직이 컨텐츠를 결정하는 데 더욱 중요하게 작용하게 되었다.
  따라서 JS가 HTML을 제어하게 되어 렌더링 로직과 마크업이 함께 존재하게 되었다.

3-2. JSX의 규칙

1) 단일 루트 엘리먼트를 반환한다.

• 여러 엘리먼트를 반환하려면, 하나의 부모 태그로 감싼다.
• <div></div> 혹은 <></>을 사용한다.
  이러한 빈 태그를 Fragment라고 하며, 브라우저상의 HTML 트리 구조에서 흔적을 남기지 않고 그룹화해준다.

🧐 Why?

• JSX는 HTML처럼 보이지만 내부적으로 JS 객체로 변환된다.
• 함수에서 두 객체를 반환할 수 없기 때문에 Fragment로 묶어주는 것이다.

2) 모든 태그를 닫는다.

• 명시적으로 태그를 닫아야 한다.
• <img>처럼 자체적으로 닫는 태그도 닫아줘야 한다.

3) 대부분이 camelCase이다.

• JS의 변수명 규칙 때문에 HTML의 일부 속성은 camelCase 표기법으로 바뀌어야 한다!
• JSX는 JS로 변환되고 JSX에 작성된 속성들은 JS 객체의 key가 된다.
  컴포넌트에서는 이러한 속성들을 변수로 읽어들이는데, JS에는 변수 이름에 대한 제한이 있다. (이름에 대시가 포함될 수 없고, class 같은 예약어 불가능)
• aria-*, data-*와 같은 사용자 정의 속성은 역사적인 이유로 대시를 그대로 사용한다.

3-3. string 전달

• 문자열 속성을 전달하려면 작은따옴표 or 큰따옴표를 사용한다.

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

• 동적으로 값을 전달하려면 따옴표를 {}로 바꿔서 JS를 사용할 수 있다.

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

3-4. 중괄호 사용

• 중괄호 {} 안에서 함수 호출을 포함한 모든 JS 표현식을 사용할 수 있다.

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

3-5. 객체 전달 : 이중 중괄호 사용

• 이중 중괄호를 사용해 CSS 등의 객체를 전달할 수 있다.

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

---

4. props

4-1. props란?

• JSX 태그에 전달하는 정보이다.
• 아래의 className, src, alt 등이 모두 props
• 컴포넌트의 유일한 인자이다.
  컴포넌트 함수는 하나의 인자인 props 객체를 받는다.

function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/1bX5QH6.jpg"
      alt="Lin Lanying"
      width={100}
      height={100}
    />
  );
}

export default function Profile() {
  return (
    <Avatar />
  );
}

4-2. 컴포넌트에 props 전달

1) 자식 컴포넌트에 props 전달

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

2) 자식 컴포넌트 내부에서 props 읽기

• function 컴포넌트이름 뒤에 있는 ({}) 안에서 나열해서 변수처럼 사용할 수 있다.
• 보통 전체 props 자체를 필요로 하지 않기 때문에 개별 props로 구조 분해 할당을 사용한다.

function Avatar({ person, size }) {
  // person and size are available here
}

4-3. props 기본값 지정

• props가 지정되지 않았을 때의 기본값을 지정하려면, 변수 뒤에 =과 함께 기본값을 지정하면 된다.
• props가 전달되지 않거나 undefined로 전달될 때 기본값이 사용된다.
• null 또는 0으로 전달되는 경우 기본값이 아닌 전달된 값이 사용된다.

4-4. spread 구문으로 props 전달

• props 전체를 자식 컴포넌트에 전달하려면 spread 구문을 사용할 수 있다.

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

4-5. 자식을 JSX로 전달하기

아래처럼 컴포넌트들끼리 중첩시키는 방법을 알아보자

<Card>
  <Avatar />
</Card>

• JSX 태그 안에 내용을 넣으면 부모 컴포넌트는 이 내용을 children이라는 prop으로 받게 된다.

import Avatar from './Avatar.js';

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

4-6. props는 읽기 전용!

• props를 직접 변경하지 말 것!
• props를 변경해야 하는 경우, 부모 컴포넌트가 다른 props (새로운 객체)를 전달하도록 요청해야 한다.

---

5. 조건부 렌더링

5-1. null

• 아무것도 렌더링하고 싶지 않을 때는 return null;

5-2. 삼항 연산자

return (
  <li className="item">
    {isPacked ? name + ' ✔' : name}
  </li>
);

5-3. 논리 && 연산자

• 참일 때만 렌더링
• 조건이 false이면 SX 트리상의 구멍으로 간주하고, 아무것도 렌더링하지 않는다.

return (
  <li className="item">
    {name} {isPacked && '✔'}
  </li>
);

---

6. 목록 렌더링

6-1. 목록 렌더링

const people = [
  'Creola Katherine Johnson: mathematician',
  'Mario José Molina-Pasquel Henríquez: chemist',
  'Mohammad Abdus Salam: physicist',
  'Percy Lavon Julian: chemist',
  'Subrahmanyan Chandrasekhar: astrophysicist'
];

export default function List() {
  const listItems = people.map(person =>
    <li>{person}</li>
  );
  return <ul>{listItems}</ul>;
}

6-2. key

• 각 목록의 JSX 요소에는 각 요소 간 고유하게 식별할 수 있는 문자열 또는 숫자 key를 반드시 부여해야 한다.
• key는 형제간 고유해야 하며 변경되지 않아야 한다.
• key를 랜덤으로 생성하면 (key={Math.random()} ❌) 렌더링될 때마다 매번 모든 컴포넌트와 DOM이 다시 생성되어 속도가 느려지고 항목 내부의 사용자 입력도 손실되므로, 데이터에 기반한 안정적인 ID를 사용해야 한다. (데이터베이스 ID / crypto.randomUUID() / uuid 패키지 ⭕️)
• key는 prop으로 받지 않으므로 ID를 사용하려면 별도의 프로퍼티로 전달해야 한다.

key의 역할

• 각 컴포넌트가 어떤 배열 항목에 해당하는지 key를 통해 식별하며
  위치나 데이터가 변경되더라도 React가 각 컴포넌트를 추적할 수 있게 된다.

---

7. 컴포넌트 순수성 유지

• 순수 함수는 계산만 수행하고 그 이상의 것은 수행하지 않는다.
• 컴포넌트를 엄격하게 순수 함수로만 작성함으로써, 코드베이스가 커짐에 따라 생기는 예측할 수 없는 동작을 피할 수 있다.

7-1. 순수성 Purity : 수식으로서의 컴포넌트

1) 순수 함수의 특징

순수 함수는 아래의 특징을 가진 함수이다.

side effects가 없다.

• 호출되기 전에 존재했던 객체나 변수를 변경하지 않는다.
• 함수가 외부 세계와 독립적이며, 외부 상태에 의존하지 않는다는 것을 의미한다.

참조 투명성

• 동일한 입력이 주어지면 항상 동일한 결과를 반환한다.
• 함수의 동작이 예측 가능하며 일관성 있음을 의미한다.

React는 이 개념을 중심으로 설계되어 모든 컴포넌트가 순수 함수라고 가정한다.
즉, React 컴포넌트는 동일한 입력이 주어졌을 때 항상 동일한 JSX를 반환해야 한다.

2) Side Effects

• 아래는 Side Effects가 없어야 한다는 규칙을 어기는 컴포넌트이다.
• 외부에서 선언된 guest 변수를 읽고 쓰고 있어 호출할 때마다 다른 JSX가 생성된다.

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 />
    </>
  );
}

• guest를 prop으로 전달해서 고칠 수 있다.

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} />
    </>
  );
}

• 렌더링은 언제든지 발생할 수 있으므로, 컴포넌트가 특정한 순서대로 렌더링될 것이라고 기대해서는 안 된다.
  컴포넌트의 렌더링이 서로 의존하거나 조정하지 않고 독립적으로 수행되어야 한다.

7-2. StrictMode

• 컴포넌트가 렌더링에 사용하는 세 종류의 입력값이 있다. props, state, context
  이 입력들을 항상 읽기 전용으로 취급해야 한다.
  사용자 입력에 대한 반응으로 무언가를 변경하려면 기존 객체를 변이하는 대신 setState를 사용해야 한다.
• React가 제공하는 StrictMode에서는 각 컴포넌트의 함수를 두 번 호출해서 이러한 규칙을 어기는 컴포넌트를 찾는 데 도움이 된다.
• StrictMode를 선택하려면 루트 컴포넌트를 <React.StrictMode>로 감싸면 된다.

7-3. Side Effects를 처리하는 방법

• React에서 Side effects는 보통 이벤트 핸들러에 속한다.
• 이벤트 핸들러는 컴포넌트 내부에 정의되어 있지만 렌더링 중에 실행되지는 않는다.
  따라서 이벤트 핸들러는 순수할 필요가 없다.
• Side effects에 적합한 이벤트 핸들러를 찾을 수 없다면, useEffect를 호출해 Side effects를 첨부할 수 있다.
  이렇게 하면 렌더링 후 Side effects가 허용될 때 실행하도록 지시한다.
  하지만 이 방법은 최후의 수단으로 사용해야 한다. (코드의 복잡성이 증가할 수 있기 때문)

7-4. React가 순수성을 중요시하는 이유

1) 컴포넌트를 다른 환경에서 실행할 수 있다. (ex 서버)

• 동일한 입력에 대해 동일한 결과를 반환하기 때문에 하나의 컴포넌트가 많은 사용자 요청을 처리할 수 있다.

2) memo를 통해 성능을 향상시킬 수 있다.

• 동일한 결과를 반환하므로 캐싱해도 안전하다.

3) 데이터 변경 시 렌더링 프로세스를 재시작할 수 있다.

• 렌더링 중 깊은 컴포넌트 트리에서 어떤 데이터가 변경되면, 오래된 렌더링을 완료하는 시간을 낭비하지 않고 렌더링을 다시 시작할 수 있다.
• 순수성 덕분에 어느 시점에서든 렌더링을 안전하게 중단하고 재시작할 수 있는 것!