[React18] 2. 컴포넌트 (import/export, JSX)

 

컴포넌트: UI 구성 요소

React를 사용하면 마크업, CSS, JavaScript를 재사용 가능한 UI 요소인 사용자 정의 "컴포넌트"를 만들 수 있습니다. React 컴포넌트는 특별한 것처럼 보이지만 마크업으로 뿌릴 수 있는 JavaScript 함수입니다. 컴포넌트를 빌드하는 방법은 다음과 같습니다.

 

1. 컴포넌트 내보내기: export default를 사용해 다른 파일에 가져올 수 있도록 합니다.

2. 함수 정의하기: function 키워드를 이용해 JavaScript 함수를 정의합니다. 이름은 대문자로 시작해야 하며 그렇지 않으면 작동하지 않습니다.

3. 마크업 추가하기: 함수에 return 키워드를 이용해 JSX를 반환합니다. 

 

** 컴포넌트는 보통 대문자로 시작합니다. 그 이유는 html은 소문자로 시작하기 때문에 대문자로 시작해서 React 컴포넌트라는 것을 인지하기 쉽기 때문입니다.

 

** 컴포넌트는 다른 컴포넌트에서 렌더링 될 수 있지만 중첩해서 선언(정의)해서는 안됩니다. 컴포넌트가 재렌더링이 될 때 중첩되어 있는 컴포넌트도 다시 렌더링 되어 성능상 좋지 못합니다.

 

export default function Greeting() {
  return (
    <p className='greeting'>Hello!</p>
  )
}

 

export / import

컴포넌트는 일반 JavaScript 함수이므로 같은 파일에 여러 컴포넌트를 포함할 수 있습니다. 컴포넌트를 한 번 정의하면 다음 원하는 곳에 import를 사용해 여러 번 사용할 수 있다는 장점이 있습니다.

 

default와 named export라는 두 가지 방법으로 값을 export 합니다. 한 파일에 하나의 default export만 존재할 수 있고, named export는 여러 개 존재할 수 있습니다. default export를 import 할 때 다른 이름으로 가져올 수 있지만 named export는 여러 개가 존재할 수 있고, 정확한 이름을 가져와야 합니다. 

• export default function Button() → import Button from './button.js'; 
• export function Button() → import {Button} from './button.js'; 

보편적으로 한 파일에서 하나의 컴포넌트만 export 할 때 default export 방식을 사용하고 여러 컴포넌트를 export 할 경우엔 named export 방식을 사용합니다. 

 

---

JSX

JSX는 JavaScript를 확장한 문법으로, HTML과 비슷하게 마크업을 작성할 수 있도록 해줍니다. 이전에는 HTML로 콘텐츠를, CSS로 디자인을, JavaScript로 로직을 작성했지만 웹이 다양한 UX를 지원해 주면서 로직이 콘텐츠를 결정하는 경우가 많아졌습니다. 그래서 JavaScript가 HTML을 담당하게 되었고 React에서 렌더링 로직과 마크업이 같은 위치에 함께 있게 된 이유입니다. (컴포넌트)

 

** JSX와 React는 함께 사용되지만 별개의 개념입니다. JSX는 확정된 문법이고, React는 JavaScript 라이브러리입니다.

 

JSX의 규칙

1. 하나의 루트 엘리먼트로 반환하기

컴포넌트에서 여러 요소를 반환하려면 하나의 부모 태그로 감싸야합니다.(ex <div></div>, <></> => Fragment로 브라우저상의 HTML 트리 구조에서 흔적을 남기지 않고 그룹화해 줍니다.)

 

** 여러 JSX 태그를 하나로 감싸야하는 이유: JSX는 HTML처럼 보이지만 내부적으로는 JavaScript 객체로 반환합니다. 즉, 하나의 부모 태그가 감싸주지 않는다면 두 개의 객체가 반환되어야 하지만 그럴 수 없기 때문입니다.
 
2. 모든 태그는 닫아주기 (ex <br/>)
 
3. 대부분 캐멀 케이스로

JSX는 JavaScript로 바뀌고 JSX로 작성된 속성(attribute)은 JavaScript객체의 키가 됩니다. 그렇기 때문에 JavaScript에 있는 변수명 제한이 적용됩니다. (ex HTML에서 class는 JavaScript의 예약어이기 때문에 JSX에서는 className을 사용합니다.) 그 덕분에 HTML 속성은 카멜 케이스로 작성됩니다. (ex stroke-width => strokeWidth) 굳이 모든 속성을 외울 필요는 없습니다. 틀리더라도 브라우저 콘솔이 수정 가능한 부분을 알려줍니다. 

** 컴포넌트는 JSX를 리턴하고 만약 JSX가 같은 라인에 있지 않는 경우 괄호로 묶어야 합니다.

 

 

---

 

** React18 공식 문서 보고 정리한 내용입니다.
https://ko-react-exy5xcwjj-fbopensource.vercel.app/learn/importing-and-exporting-components

컴포넌트 import 및 export 하기 – React

https://ko-react-exy5xcwjj-fbopensource.vercel.app/learn/writing-markup-with-jsx

JSX로 마크업 작성하기 – React