Describing the UI

Describing the UI

The Concepts of Components

Importing and Exporting Components

Writing Markup With JSX

• 단일 요소를 반환해야 한다. 이때 요소를 감싸는 부모 태그로서 <></> 형태의 Fragment를 사용할 수 있다. Fragment는 브라우저 HTML 트리에 어떤 흔적도 남기지 않으면서 자식 요소를 그룹핑해 단일 요소로 만들 수 있다.
• JSX는 HTML 처럼 생겼지만 결과적으로 바닐라 자바스크립트 객체로 변환된다. 자바스크립트 함수는 두 개 이상의 객체를 그대로 반환할 수없다. 각 객체를 요소로 하나의 배열로 감싸야만 한다. 이것이 두 개 이상의 요소를 반환하려면 Fragment같은 부모 요소로 감싸야하는 이유다.

• 모든 태그를 닫아야한다. HTML과 다르게 <img> 를 허용하지 않으며 <img /> 로 모든 태그는 명시적으로 닫아줘야한다.

• ’거의’ 모든걸 카멜케이스로 작성한다. JSX는 자바스크립트 객체로, JSX의 속성은 객체의 키로 변환된다. 그리고 많은 경우 JSX 속성은 해체 할당되어 변수로 사용된다. 그래서 React안 HTML과 SVG 속성 상당수가 자바스크립트 변수명 제한(대시 포함 불가, 예약어 사용 불가)을 고려하여 카멜케이스로 변경되었다(예: stroke-width → strokeWidth).
• 관습을 이유로 aria-* 와 data-* 속성은 HTML과 같이 대시와 함께 작성된다.

• 기존 HTML 마크업을 JSX로 바꿔야 한다면 converter 를 사용하자.

JavaScript in JSX with Curly Braces

• JSX 태그 바로 안쪽 텍스트. 태그 안에서 평가되어 텍스트를 채우는 용도. 태그 안 텍스트가 아닌 태그명에 중괄호 사용 불가. <{tag}>Gregorio Y. Zara's To Do List</{tag}> 는 동작하지 않는다.

• 속성 바로 옆에있는 = 에 할당하는 경우. src={avatar} 와 같이 사용한다. src="{avatar}" 는 문자열 "{avatar}"로 인식한다.

Passing Props to a Component

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

function Avatar({ person, size }) {
  // 이제 person, size를 값으로 평가되는 식별자로 
  // 컴포넌트 안에서 사용할 수 있다.
}

function Avatar({ person, size = 100 }) {
  // ...
}

// Avatar 컴포넌트의 속성은 결과적으로 객체를 받는 인자인 props의
// 프로퍼티다. 즉, 부모 컴포넌트의 props 객체를 자식 컴포넌트의 빈 
// props 객체에 풀어 할당하는 것이다.
function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

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

Conditional Rendering

Rendering Lists

const listItems = people.map(person =>
  <Fragment key={person.id}>
    <h1>{person.name}</h1>
    <p>{person.bio}</p>
  </Fragment>
);

Keeping Components Pure

• 호출 이전부터 존재하고 있는 그 어떤 객체나 변수에 영향을 끼치지 않고 자신의 연산만을 수행함.

• 동일한 인풋이면 항상 동일한 아웃풋을 반환한다.

let guest = 0;

function Cup() {
  // Bad: changing a preexisting variable!
  guest = guest + 1;
  return <h2>Tea cup for guest #{guest}</h2>;
}

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

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

export default function TeaGathering() {
  let cups = [];
  for (let i = 1; i <= 12; i++) {
    cups.push(<Cup key={i} guest={i} />);
  }
  return cups;
}

• 동일 인풋, 동일 결과 이므로 다른 환경에서도 컴포넌트를 실행할 수 있다.

• 인풋이 바뀌지 않은 컴포넌트의 렌더링을 건너뜀으로써 성능을 향상시킬 수 있다. 인풋이 바뀌지 않으면 기존의 렌더 결과와 동일할 것이 보장되기 떄문이다.

• 딥 컴포넌트 트리를 렌더링하는 과정에서 일부 데이터가 변경되면, 리액트는 구형이된 렌더링을 중단하고 렌더링을 재시작 한다. 이렇게 언제든 연산을 중단 하려면 독립적으로 자신의 연산만을 수행하면 되는 컴포넌트의 순수성이 필요하다.

Understanding Your UI as a Tree