React공식사이트에서 UI표현하기 중 중요한 내용만 추출

현재 노트: KR-010.20 a
상위 분류: KR-010.20 React

#React

https://ko.react.dev/learn/describing-the-ui
해당 내용은 기술적인 내용이긴하지만, 이는 official docs에서 제공하는 내용중에서도 React를 처음 시작하면 기억해야할만한 내용만을 편집한 부분입니다. 각 파트의 제목은 이 내용이 중요한 이유를 정리한 제목입니다.

컴포넌트파일 이름규칙 대문자

Notice that <MyButton /> starts with a capital letter. That’s how you know it’s a React component. React component names must always start with a capital letter, while HTML tags must be lowercase.

괄호가 없으면 return 뒷 라인에 있는 모든 코드가 무시됩니다!

컴포넌트는 다른 컴포넌트를 렌더링할 수 있지만, 그 정의를 중첩해서는 안 됩니다.

export default와 name export 사용시 고려사항

보편적으로 한 파일에서 하나의 컴포넌트만 export 할 때 default export 방식을 사용하고 여러 컴포넌트를 export 할 경우엔 named export 방식을 사용합니다. 어떤 방식을 사용하든 컴포넌트와 파일의 이름을 의미 있게 명명하는 것은 중요합니다. export default () => {} 처럼 이름 없는 컴포넌트는 나중에 디버깅하기 어렵기 때문에 권장하지 않습니다.

Fragment를 써야하는 이유

JSX는 HTML처럼 보이지만 내부적으로는 일반 JavaScript 객체로 변환됩니다. 하나의 배열로 감싸지 않은 하나의 함수에서는 두 개의 객체를 반환할 수 없습니다. 따라서 또 다른 태그나 Fragment로 감싸지 않으면 두 개의 JSX 태그를 반환할 수 없습니다.

모든 태그는 닫아주기

JSX에서는 태그를 명시적으로 닫아야 합니다. <img>처럼 자체적으로 닫아주는 태그는 반드시 <img /> 형태로 작성해야 하며, <li>oranges와 같은 래핑 태그도 <li>oranges</li> 형태로 작성해야 합니다.

거의 대부분 캐멀 케이스로!

JavaScript는 변수명에 제한이 있습니다. 예를 들면, 변수명에 대시를 포함하거나 class처럼 예약어를 사용할 수 없습니다. 이것이 바로 React에서 HTML과 SVG의 어트리뷰트 대부분이 캐멀 케이스로 작성되는 이유입니다. 예를 들면, stroke-width 대신 strokeWidth로 사용합니다. class는 예약어이기 때문에, React에서는 DOM의 프로퍼티의 이름을 따서 className으로 대신 작성합니다.
역사적인 이유로, aria-*와 data-*의 어트리뷰트는 HTML에서와 동일하게 대시를 사용하여 작성합니다.

prop의 기본값은 없거나 undefined일 때

이 기본값은 size prop이 없거나 size={undefined}로 전달될 때 사용됩니다. 그러나 size={null} 또는 size={0}으로 전달된다면, 기본값은 사용되지 않습니다.

컴포넌트 조건부 렌더링시 삼항 연산자

if (isPacked) {
  return <li className="item">{name} ✅</li>;
}
return <li className="item">{name}</li>;

위와 같은 대신에 아래와 같이 작성

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

&&연산자로 조건부 렌더링시 왼쪽에 숫자는 놓으면 안된다

&&의 왼쪽에 숫자를 두지 마세요.
조건을 테스트하기 위해 JavaScript는 자동으로 왼쪽을 부울로 변환합니다. 그러나 왼쪽이 0이면 전체 식이 (0)을 얻게 되고, React는 아무것도 아닌 0을 렌더링할 것입니다.

화살표 함수의 암시적인 return 반환

화살표 함수는 암시적으로 => 바로 뒤에 식을 반환하기 때문에 return 문이 필요하지 않습니다.

const listItems = chemists.map(person =>
  <li>...</li> // 암시적 반환!
);

하지만 => 뒤에 { 가 오는 경우 return 을 명시적으로 반환해야합니다.

const listItems = chemists.map(person => { // 중괄호
  return <li>...</li>;
});

key 규칙

• key는 형제 간에 고유해야 합니다. 하지만 같은 key를 다른 배열의 JSX 노드에 동일한 key로 사용해도 괜찮습니다.
  • key는 변경되어서는 안 되며 그렇게 되면 key는 목적에 어긋납니다! 렌더링 중에는 key를 생성하지 마세요.

Key가 필요한 이유

React에 key가 필요한 이유는 무엇인가요?
데스크탑의 파일에 이름이 없다고 상상해 보세요. 대신 첫 번째 파일, 두 번째 파일 등 순서대로 파일을 참조할 것입니다. 익숙해질 수도 있지만, 파일을 삭제한다면 혼란스러워질 수도 있습니다. 두 번째 파일이 첫 번째 파일이 되고 세 번째 파일이 두 번째 파일이 되는 식으로 말이죠.

React 렌터 트리에 HTML 태그가 없는 이유

이러한 플랫폼 UI 기본 요소는 React의 일부가 아닙니다. React 렌더 트리는 앱이 렌더링되는 플랫폼에 관계없이 React 앱에 대한 통찰력을 제공할 수 있습니다.