🌝 Describing the UI

Your First Component

• Defining a component

  1. Export the component

     export default prefix는 리액트에서만 사용되는게 아닌 표준 자바스크립트 구문이다.

  2. Define the function

     function App() { } 으로 App이라는 자바스크립트 함수를 정의한다.

     🌚 함수 이름은 반드시 대문자로 시작해야한다.

  3. Add markup

     JSX를 사용하여 마크업 사이에 자바스크립트를 넣을 수 있다.

• Deep Dive: Components all the way down
  컴포넌트는 재사용을 위해서만 사용하는 것은 아니다. 컴포넌트는 UI와 마크업 쉽게 구성할 수 있는 방법이다. 그렇기 때문에 일부 컴포넌트는 한 번만 사용될 수 있다.

Importing and Exporting Components

• The root component file
  리액트에서는 보통 src/App.js가 최상위 컴포넌트 파일이고, 어떻게 셋업하느냐에 따라 달라질 수 있다. 만약 Next.js 같은 파일 베이스 라우팅을 하는 프레임워크를 사용하면 최상위 컴포넌트는 각 페이지마다 다를 수 있다.

• Exporting and importing a component 🌚 import 할 때 .js 파일 확장자를 생략하는 것도 가능하지만, 아래와 같이 작성하는 것이 기본 ES 모듈의 작동 방식에 가깝다.

  import Gallery from './Gallery.js';

Writing Markup with JSX

• JSX: Putting markup into JavaScript
  웹이 더 interactive 해지고, 점점 로직이 콘텐츠를 결정하게 되었다. 자바스크립트가 HTML의 역할을 하게 된 것이다. 이것이 리액트에서 렌더링 로직과 마크업이 하나의 컴포넌트에 같이 있는 이유이다.

  • What’s a JSX Transform?
    브라우저는 JSX를 이해할 수 없기 때문에 리액트 유저는 JSX 코드를 일반 JavaScript로 바꿔주는 Babel이나 TypeScript에 의지한다.

• The Rules of JSX

  1. Return a single root element

     여러 개의 요소를 하나의 컴포넌트에서 반환하기 위해서는 하나의 부모 태그로 묶어야 한다.

     빈 태그인 Fragment를 사용해도 된다. Fragment는 브라우저 HTML 트리에 흔적을 남기지 않고, 즉 DOM에 추가 노드를 추가하지 않고 요소들을 그룹화할 수 있다.

     • Deep Dive: Why do multiple JSX tags need to be wrapped?
       JSX가 HTML처럼 보이지만, 내부적으로는 일반 자바스크립트 객체로 변환된다. 배열로 wrapping 하지 않고는 함수에서 두 개의 객체를 반환할 수 없기 때문에 하나의 부모 태그로 묶어야하는 것이다.

       return {} {} // 불가능
       return [{}, {}] // 가능

       return (
         <>
           <div className="good">parent</div>
         </>
       );

       compiles into:

       React.createElement(
         React.Fragment,
         null,
         React.createElement(
           'div',
           {
             className: 'good',
           },
           'parent',
         ),
       );

  2. Close all the tags

     닫힘 태그가 필수적이다. self-closing 태그도 <img /> 처럼 닫혀야 한다.

  3. camelCase all most of the things!

     JSX는 JavaScript로 바뀌고 JSX로 작성된 속성은 JavaScript 객체의 키가 된다. 컴포넌트에서 이러한 속성을 변수로 쓰고 싶은 경우, 변수 이름에 대한 제한이 있다. 예를 들어 이름에 대시(-)를 포함하거나 class와 같은 예약어를 사용할 수 없다. 그래서 리액트에서는 HTML와 SVG의 많은 속성들이 카멜케이스로 작성되어 있다.

     🌚 Historical Reason으로 aria-*와 data-* 속성은 대시가 있는 HTML로 작성된다.

JavaScript in JSX with Curly Braces

• Using “double curlies”: CSS and other objects in JSX
  CSS style이나 JavaScript 객체는 curly braces { }로 한 번 더 감싸서 값을 전달한다.

References

• react/your-first-component
• react/importing-and-exporting-components
• react/writing-markup-with-jsx
• react/javascript-in-jsx-with-curly-braces
• Babel · The compiler for next generation JavaScript