홈 컴포넌트
포스트
취소

컴포넌트

게시 2024/02/19 업데이트 2024/10/23
By Sangwon Lee
14 분읽는 시간

엘리먼트 (element)

  • View에 렌더링 할 내용을 React에 알려주기 위한 수단
  • React 애플리케이션을 구성하는 가장 작은 블록
  • React 엘리먼트는 HTML 태그의 이름을 값으로 가지는 type 필드와
    그 외 속성들을 값으로 전달받는 props 필드로 구성된
    객체(object) 형태로 정의된다.
    • 예시 : const element = <p className="greeting">Hello, World</p>
  • React는 이 객체를 읽어들여 DOM을 구성하고 최신 상태로 업데이트하는데 사용한다.
  • React 엘리먼트는 일반 객체(plain object)로 손쉽게 생성할 수 있다.
  • React 엘리먼트는 불변 객체(immutable object)이기 때문에 일단 생성된 후에는 상태나 속성을 변경할 수 없다.
  • React에서 UI를 업데이트하기 위해서는 새로운 엘리먼트를 생성하고, 이를 render() 메소드에 전달해야 한다.

루트 DOM 노드(Root DOM Node)

  • React 애플리케이션에 단 하나 존재하는 id 속성값이 root인 div 요소다.
    • <div id="root"></div>
  • 루트 DOM 노드 내부에 들어가는 모든 요소들은 React DOM에서 관리하게 된다.

DOM 요소 (DOM Attribute)

  • React에서는 모든 DOM 속성(attribute)을 카멜 표기법(camelCase)으로 표현한다.
  • 예외적으로 aria-* 와 data-* 속성은 소문자로 표기하며, 사용자 지정 속성도 소문자로만 표기해야 한다.
  • HTML과는 다르게 표기해야 올바르게 동작하는 몇몇 DOM 속성도 존재한다.
  • 예시
    • HTML
      • <div class="container"></div>
    • JSX
      • <div className="container"></div>

React v15까지는 className을 사용하는 대신 실수로 class를 잘못 사용하게 되면 오류가 발생했었지만,
React v16부터는 JSX 코드에 잘못 사용된 class 속성을 자동으로 className으로 변환해준다.
그러나 의미 상의 혼동을 방지하기 위해서라도 JSX에서는 className 속성을 사용하는 것이 바람직하다.

label 요소의 for 속성도 자바스크립트에서 반복문을 정의하는 for 키워드와 중복되므로,
JSX에서는 htmlFor 속성으로 바꿔 사용해야 한다.

React에서 지원되는 HTML DOM 속성 (React v16 이전에서는 지원하지 않는 속성이 있을 수도 있다.)

accept acceptCharset accessKey action allowFullScreen alt async autoComplete
autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked
cite classID className colSpan cols content contentEditable contextMenu controls
controlsList coords crossOrigin data dateTime default defer dir disabled download
draggable encType form formAction formEncType formMethod formNoValidate formTarget
frameBorder headers height hidden high href hrefLang htmlFor httpEquiv icon id
inputMode integrity is keyParams keyType kind label lang list loop low manifest
marginHeight marginWidth max maxLength media mediaGroup method min minLength
multiple muted name noValidate nonce open optimum pattern placeholder poster
preload profile radioGroup readOnly rel required reversed role rowSpan rows
sandbox scope scoped scrolling seamless selected shape size sizes span
spellCheck src srcDoc srcLang srcSet start step style summary tabIndex
target title type useMap value width wmode wrap

컴포넌트(component)

  • React에서 컴포넌트는 자바스크립트 함수의 개념과 비슷한 개념이다.
  • React에서는 애플리케이션의 UI를 설계할 때 사용자가 볼 수 있는 화면을
    여러 개의 컴포넌트로 나누어 구성함으로써 각각의 컴포넌트를 개별적으로 관리할 수 있다.
  • 컴포넌트의 역할
    • 재사용이 가능한 템플릿의 역할
    • 데이터(props)를 입력 받아 View의 상태에 따라 화면에 어떻게 표시되는지를 정의하는 React 엘리먼트를 반환
  • 선언 방식에 의한 분류
    • 클래스 기반의 컴포넌트
    • 함수 기반의 컴포넌트

컴포넌트의 특징

  • 리액트는 컴포넌트와 함께 동작한다.
  • 리액트 앱은 하나의 컴포넌트만을 랜더링 해야한다. (App)
  • 새로운 기능을 추가할 때에는 App.js에 추가한다.
  • 컴포넌트는 <App/>처럼 html코드처럼 사용되지만 엄연한 하나의 함수다.
  • 리액트는 컴포넌트를 가져와서 브라우저가 이해할 수 있는 평범한 일반 html로 만든다.
  • 리액트의 컴포넌트에 key 속성을 부여해서 각 속성값이 유일하도록 만든다.
    • 이유 : 실제 값이 달라도 리액트가 스마트하지않게 작동해서 오류를 일으킨다.
  • 리액트에서 class는 js의 클래스를 가리키기 때문에
    return에서 사용되는 html 태그내의 class 속성은 class가 아닌 className으로 명시해야 한다.
  • 리액트에서 for는 js의 반복문을 가리키기 때문에
    return에서 사용되는 label 태그내의 for 속성은 for가 아닌 htmlFor으로 명시해야 한다.

함수 컴포넌트

  • function 키워드를 통해 생성한 컴포넌트
  • 예시
export default function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

클래스 컴포넌트

  • class 키워드를 통해 생성한 컴포넌트
  • React.Component를 상속받아야 한다.
  • render 메소드 안에 반환할 엘리먼트를 작성해야 한다.
  • 리액트 모든 클래스 컴포넌트에 있는 render 메소드를 자동으로 실행한다.
  • 예시
import React from "react";

export default class App extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

함수 컴포넌트와 클래스의 차이

  • React에서 이 두 가지 유형의 컴포넌트는 기능적으로는 완전히 동일하게 동작합니다.
  • 차이점
    • 함수 컴포넌트는 state 기능과 생명 주기 메소드를 사용할 수 있다.
    • 클래스 컴포넌트는 state 기능과 생명 주기 메소드를 사용할 수 있다.
  • 그러나 함수 컴포넌트의 장점이 많아지며 현업에서는 함수 컴포넌트를 많이 쓰게 되었다.
    • 함수 컴포넌트는 클래스 컴포넌트보다 선언하는 방법이 훨씬 간결하다.
    • React v16.8부터 React Hook을 통해서 함수 컴포넌트도 state 기능과 생명 주기 메소드를 사용할 수 있게 되었다.

컴포넌트를 사용하는 방법

  1. 요구사항에 맞는 컴포넌트를 생성한다.
//MyComponent.jsx
function MyComponent() {
  return (
    <div>
      <h1>This is My First Component !!!</h1>
    </div>
  );
}
  1. 해당 컴포넌트를 반출한다.
//MyComponent.jsx
export default MyComponent;
  1. 사용하기 원하는 곳에 사용한다.
//App.js
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
        <MyComponent/>
    </div>
  );
}

export default App;

모듈 내보내기

  • 작성한 코드를 다른 파일에서도 사용할 수 있기 위해서는
    해당 코드를 다른 모듈에서 불러와 사용할 수 있도록 내보내야 한다.
  • export 키워드를 통해 작성한다.
  • export문을 함수의 선언부보다 먼저 작성해도 올바르게 동작한다.
  • React에서 모듈의 유형
    • 하나의 컴포넌트만 선언되어 있는 모듈
    • 복수의 컴포넌트가 선언되어 있는 라이브러리 형태의 모듈

선언과 동시에 내보내기

export default function MyComponent() {
    return (
        <div>
            <h1>This is My First Component !!!</h1>
        </div>
    );
}

선언과 별도로 내보내기

function MyComponent() {
    return (
        <div>
            <h1>This is My First Component !!!</h1>
        </div>
    );
}

export default MyComponent;

복수의 컴포넌트 내보내기

 function MyComponent1() {
    return (
      <div>
        <h1>This is My First Component !!!</h1>
      </div>
    );
  }

   function MyComponent2() {
    return (
      <div>
        <h1>This is My Second Component !!!</h1>
      </div>
    );
  }
  export default {MyComponent1, MyComponent2};

export default

  • default라는 의미처럼 기본적으로 어떤 것을 쓸 것인지 정의한다.
  • 사용할 수 있는 경우
    • 전체 컴포넌트를 내보낼 때
      • 예시 : export default {MyComponent1, MyComponent2};
    • 주로 쓰이는 컴포넌트를 내보낼 때
      • 예시 : export default function MyComponent(){ ... }
  • export default로 내보낸 모듈은 이름을 변경해서 사용할 수 있다.
    • 내보낼 컴포넌트
      • export default {MyComponent1, MyComponent2};
    • 실제 사용
      • import Sample from './MyComponent'
      • <Sample.MyComponent1/>

        모듈 불러오기

  • 다른 파일에서 작성한 코드를 사용하기 위해서는
    해당 파일에서 작성한 컴포넌트를 불러와야 한다.
  • React에서는 가급적이면 다른 파일에서 가져오는 컴포넌트의 이름을 구체적으로 명시하는 것이 좋다.
    • 모듈 번들러는 로딩 속도를 높이기 위해 번들링과 최적화 작업을 수행하면서 사용하지 않는 리소스를 삭제하기 때문이다.
    • 실제 사용되는 함수를 빠르게 파악할 수 있다.
    • 사용되지 않는 함수는 번들링 결과물에서 제외시킴으로써 최종 결과물의 크기를 줄일 수 있다.
    • 사용되는 컴포넌트의 이름과 용도가 명확해지기 때문에 전체적인 코드의 구조를 파악하기가 쉬워진다.
    • 결과적으로 코드의 리팩터링이나 유지보수가 쉬워진다.

단일 컴포넌트 불러오기

//App.js
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
        <MyComponent/>
    </div>
  );
}

export default App;

복수 컴포넌트 불러오기

//App.js
import {MyComponent1, MyComponent2} from './MyComponent';
//import {MyComponent1 as MC1, MyComponent2 as MC2} from './MyComponent'; //별칭을 사용할 수도 있다.

function App() {
  return (
    <div>
        <MyComponent1/>
        <MyComponent2/>
    </div>
  );
}

export default App;

모든 컴포넌트 불러오기

//App.js
import * as sample from './MyComponent'; //별칭 지정하기

function App() {
  return (
    <div>
        <sample.MyComponent1/>
        <sample.MyComponent2/>
    </div>
  );
}

export default App;

화살표 함수(arrow function)

  • ES6 문법부터 추가된 화살표 함수(arrow function)는 function 키워드 대신
    화살표 기호(⇒)를 사용함으로써 함수 컴포넌트를 손쉽게 선언할 수 있다.
  • 화살표 함수는 함수의 이름을 설정할 수 없기 때문에
    기존 자바스크립트에서 사용된 익명 함수(anonymous function)처럼 함수를 선언하고
    바로 변수나 상수에 대입하는 방식으로 사용합니다.
  • 화살표 함수는 주로 함수 자체를 파라미터로 전달할 때나 값을 연산하여 바로 반환할 때 사용하여
    코드의 양을 줄여줄 뿐만 아니라 코드의 가독성도 높여준다.
  • 화살표 함수는 function 키워드를 사용한 기존의 함수 선언 방식과 그 사용 용도가 약간 다르지만,
    React에서 함수 컴포넌트를 선언하는 경우에 두 방식 사이의 큰 차이는 없다.
  • 예시
const MyComponent = () => {
    return <h1>This is My Component !!!</h1>;
};

export default MyComponent;
React
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.
최근 업데이트
바로가기