2024.1.22 TIL

Today I Learned

오늘 정리 해볼것은 React Component 이다.

컴포넌트(Component) 는 React에서 UI를 구성하는 독립적인 모듈로, 재사용 가능하며 독립적으로 관리될 수 있는 빌딩 블록이다. 각 컴포넌트는 자체적으로 상태(state) 를 가질 수 있으며, 이벤트 핸들링과 렌더링 로직을 포함할 수 있다.


컴포넌트의 주요 특징으로는

재사용성 (Reusability): 컴포넌트는 독립적이고 재사용 가능한 단위로 구성되어 있다. 이를 통해 코드의 재사용성이 향상되고, 유지보수가 용이해진다.

가독성 (Readability): 각 컴포넌트는 특정 기능이나 UI 조각을 담당하므로, 코드의 가독성이 향상된다. 높은 수준의 추상화를 통해 코드의 이해와 관리가 쉬워진다.

상태 관리 (State Management): 컴포넌트는 상태를 가질 수 있다. 상태는 컴포넌트 내에서 관리되며, 상태의 변경은 컴포넌트를 다시 렌더링한다.

라이프사이클 (Lifecycle): 컴포넌트는 라이프사이클 메서드를 통해 생성, 갱신, 제거 등의 단계에서 특정 작업을 수행할 수 있다.

JSX (JavaScript XML): React에서는 JSX 문법을 사용하여 JavaScript와 비슷한 문법으로 UI를 작성할 수 있다. 이는 가독성을 높이고, 컴포넌트의 구조를 쉽게 파악할 수 있도록 도와준다.

간단한 컴포넌트 예시:

import React from 'react';

const MyComponent = () => {  //const MyComponent는 함수형
    return (                   컴포넌트를 정의하는 키워드   
    <div>
      <h1>Hello!</h1>
      <p>This is component.</p>
    </div>
  );
};

export default MyComponent;

컴포넌트는 애플리케이션을 더 모듈화하고 유지보수를 쉽게하기 위해 분리를 할수있다.

React에서 컴포넌트를 정의하고 다른 파일에서 사용하기 위해 import와 export를 사용하는 것이 일반적이다.

1. 컴포넌트 정의와 내보내기 (Export)

// MyComponent.js
import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
};

export default MyComponent;  // 컴포넌트 내보내기

위의 코드에서 MyComponent는 React 컴포넌트이며, export default 구문을 통해 다른 파일에서 사용할 수 있도록 내보내고 있다.

2. 컴포넌트 가져오기 (Import)

// AnotherComponent.js
import React from 'react';
import MyComponent from './MyComponent';  // 컴포넌트 가져오기

const AnotherComponent = () => {
  return (
    <div>
      <MyComponent /> {/* MyComponent를 가져와서 사용 */}
      <p>Another component content</p>
    </div>
  );
};

export default AnotherComponent;

위의 코드에서 import MyComponent from './MyComponent'; 구문을 통해 MyComponent를 현재 파일에서 가져와 사용할 수 있다.

내가 실제로 해본 컴포넌트 분리, components 폴더를 새로 만들어 정리했다.

이런식으로 import 와 export 를 사용하여 React 컴포넌트를 다른 파일에서 재사용할 수 있습니다. 이로써 컴포넌트를 모듈화하고 여러 파일 간에 컴포넌트를 쉽게 공유할 수 있다. 이는 코드의 가독성을 높이고 유지 보수성을 향상시키는 데 도움이 된다.