[react] UI 표현하기 (feat.공식문서)

potato·2024년 7월 2일

React 공식문서

react

목록 보기

3/7

React를 사용해 UI를 표현하기 위해 기본적으로 사용되는 컴포넌트에 대해 학습해보려고 합니다.

컴포넌트 사용법

먼저 컴포넌트를 정의할 때는 대문자로 시작해야 합니다.
- 소문자인 경우 react는 HTML태그라고 인식합니다.
컴포넌트 안에 다른 컴포넌트를 여러 개 렌더링 할 수 있지만,
그 정의를 중첩해서는 안됩니다.
- 즉, 컴포넌트 안에 다른 컴포넌트를 정의해서는 안됩니다.
- 대신 최상위에 컴포넌트를 정의하고 props를 전달해서 사용해야 합니다.

export 하는 방식

대표적으로 두 가지가 있습니다.

default 방식

한 파일에서 한 번만 사용할 수 있습니다.
import 할 때 원한다면 다른 이름으로 가져올 수도 있습니다.

// Component1.jsx
export default function Component1() {
  return <p>I am Component1</p>
}

// App.jsx
import Component from './Component1.jsx'

Named 방식

한 파일에서 여러 개 사용할 수 있습니다.
import 할 때 중괄호 안에서 같은 컴포넌트 이름으로 가져와야 합니다.

// Components.jsx
export function Component1() {
  return <p>I am Component1</p>
}

export function Component2() {
  return <p>I am Component2</p>
}

//App.jsx
import { Component1 } from './Components.jsx'

JSX로 마크업 작성하기

JSX는 확장된 문법이고 React는 JavaScript 라이브러리입니다.

jsx는 JavaScript를 확장한 문법으로 HTML과 비슷하게 마크업을 작성할 수 있도록 해줍니다.
HTML과 비슷해보이지만 더 엄격하며 동적 정보를 표시할 수 있습니다.

JSX의 규칙

하나의 부모 태그로 반환해야 합니다.
모든 태그는 닫아주어야 합니다.
- HTML에서 <li> 태그는 닫는 태그가 필요 없지만, JSX에서는 명시적으로 닫아주어야 합니다.
캐멀 케이스로 작성해야 합니다.

aria-* 와 data-* 는 대시를 사용해 작성합니다.

중괄호가 있는 JSX 안에서 자바스크립트 사용하기

단순히 문자열 값을 전달하려는 경우 " "(따옴표)를 사용하면 되지만, 값을 동적으로 전달하려는 경우 { } (중괄호)를 사용해서 전달하면 됩니다.

export default function Introduce() {
  const name = "potato"
  
  return (
  	<h1>My name is {name}</h1>
  );
}

div, h1과 같은 태그 이름에는 사용할 수 없습니다.

이중 중괄호 사용하기

객체를 전달할 때 또한 중괄호를 사용하게 됩니다.
따라서 JSX에서 객체를 전달하려면 이중 중괄호로 감싸줘야 합니다.
person={{ name: 'potato', age: 35 }}
inline-style이 필요할 때 사용하곤 합니다.

  // style property는 캐멀 케이스로 작성합니다.
  <div style={{ color: 'green', backgroundColor: 'black' }}`>
    {person.name}
  </div>

컴포넌트에 props 전달하기

객체, 배열, 함수를 포함한 모든 JavaScript 값을 전달할 수 있습니다.

// 1. 자식 컴포넌트에 전달
export default function Intoduce() {
  return (
  	<div>
      <Profile
        person={{ name: 'potato', age: '35' }}
        size={100}
      />
      <Profile
        person={{ name: 'tomato', age: '30' }}
        size={80}
      />
  	</div>
  );
}
  
// 2. 자식 컴포넌트에서 받기
function Profile(props) {
  let person = props.person;
  let size = props.size
  
  return (
  	<div>
      {person.name}
      {person.age}
  	</div>
  );
}
  
// 보통 구조 분해 할당으로 받습니다.
// 기본값을 넣어줄 수도 있습니다.
function Profile({ person, size = 80 }) {
  return (
  	<div>
      {person.name}
      {person.age}
  	</div>
  );
}
  
// spread 문법도 사용 가능합니다.
function Introduce(props) {
  return <Profile {...props} />
}

자식을 props로 전달하기

children으로 props를 받을 수 있습니다.

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

export default function Introduce() {
  return (
    <Card>
      <Profile
        size={100}
        person={{ 
          name: 'potato',
          age: 35
        }}
      />
    </Card>
  );
}

Props의 특징
1. props는 변경할 수 없습니다.

대신, 부모 컴포넌트에 새로운 객체를 전달하도록 요청하며 이전 props는 버려지게 되는 것입니다.

상호작용이 필요한 경우 state를 설정해야 합니다.

props는 읽기 전용으로, 렌더링 할 때마다 새로운 props를 받습니다.