React 11/8

조건부 렌더링

챌린지 도전하기 2

function Item({ name, importance }) {
  return (
    <li className="item">
      {name} {importance > 0 && <i>(Importance: {importance})</i>}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          importance={9} 
          name="Space suit" 
        />
        <Item 
          importance={0} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          importance={6} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

i 태그는 글자를 기울여서 표시하는 태그로, italic의 약자

p 태그는 문단(paragraph)을 나타내는 태그.

대부분의 브라우저에서는 태그의 위와 아래의 간격을 분리합니다.

챌린지 도전하기 3

공식 문서의 경우 개별 변수 선언

let part, caffeine, age;
  if (name === 'tea') {
    part = 'leaf';
    caffeine = '15–70 mg/cup';
    age = '4,000+ years';
  } else if (name === 'coffee') {
    part = 'bean';
    caffeine = '80–185 mg/cup';
    age = '1,000+ years';
  }

2차원 배열을 활용해서 풀이

function Drink({ name }) {
  const arr = [
    ['leaf', '15–70 mg/cup', '4,000+ years'],
    ['bean', '80–185 mg/cup', '1,000+ years']             
  ];
  let flag = 0; // name === 'tea'
  if (name === 'coffee') {
    flag = 1;
  }
  return (
    <section>
      <h1>{name}</h1>
      <dl>
          <dt>Part of plant</dt>
          <dd>{arr[flag][0]}</dd>
          <dt>Caffeine content</dt>
          <dd>{arr[flag][1]}</dd>
          <dt>Age</dt>
          <dd>{arr[flag][2]}</dd>
       </dl>
    </section>
  );
}

export default function DrinkList() {
  return (
    <div>
      <Drink name="tea" />
      <Drink name="coffee" />
    </div>
  );
}

리스트 렌더링

각 항목이 하나가 아닌 여러 개의 DOM 노드를 렌더링해야 하는 경우에는 어떻게 해야 할까요?
div 로 그룹화하거나 약간 더 길고 명시적인 Fragment 문법을 사용

Fragment를 사용하는 이유는 여러 개의 DOM 노드를 하나의 부모 요소로 감싸야 할 때 불필요한 div 요소를 추가하지 않기 위해

Fragment는 렌더링될 때 실제 DOM에는 아무것도 출력되지 않으므로, 추가적인 DOM 요소 없이 여러 자식 요소를 하나로 묶을 수 있

컴포넌트 순수하게 유지하기

• Deep Dive 엄격 모드

  엄격 모드로 순수하지 않은 연산을 감지
  -> 사용자의 입력에 따라 무언가를 변경 하려는 경우

  • 변수를 직접 수정(X) / set state를 활용(O)
  • props, state, context 등 이러한 입력 요소는 항상 읽기전용으로 취급
  • <React.StrictMode> 엄격 모드 == 컴포넌트 함수를 두 번 호출함

지역 변형 잘 이해X

• TeaGathering안에 동일한 렌더링중에 생성되었기 때문에 괜찮습니다.(O)
• 만약 cups 변수나 [] 배열이 TeaGathering의 바깥에서 생성되었다면 큰 문제가 될 겁니다! 항목을 해당 배열에 푸시하여 기존 객체를 변경할 수 있습니다. => 어떤 식으로 변경이 일어나는거지?

• Deep Dive React는 왜 순수함을 신경쓸까요?

  • 동일한 입력에 대해 동일한 결과를 반환 -> 하나의 컴포넌트가 많은 사용자 요청을 처리할 수 있음
  • memo를 사용하면 컴포넌트의 props가 변경되지 않은 경우 리렌더링을 건너뛸 수 있습니다.

const MemoizedComponent = memo(SomeComponent, arePropsEqual?)

입력이 변경되지 않은 컴포넌트 렌더링을 건너뛰어 성능을 향상시킬 수 있습니다. 순수 함수는 항상 동일한 결과를 반환하므로 캐시하기에 안전합니다.

트리로서의 UI

• Deep Dive 렌더 트리에 HTML 태그는 어디에 있나요?

  • 렌더 트리에서 각 컴포넌트가 렌더링하는 HTML 태그에 대한 언급X
  • 렌더 트리가 React 컴포넌트로만 구성
  • React는 플랫폼에 독립적. react.dev에서는 HTML 마크업을 UI 기본 요소로 사용하는 웹을 렌더링하는 예시를 보여주는 것 뿐
  • React의 구조나 로직을 재사용할 수 있음 -> 동일한 컴포넌트를 모바일에서도 활용
  • 대신 html 태그를 React Native의 전용 컴포넌트로 변경해줘야함