[리액트] Components

 

 

🎀 Components

• 개념적으로 컴포넌트는 JavaScript 함수와 유사하다.
• React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 "props"라고 한다.
• 처음에는 컴포넌트를 추출하는 작업이 지루해 보일 수 있지만, 재사용 가능한 컴포넌트를 만들어 놓는 것은 더 큰 앱에서 작업할 때 두각을 나타낸다.
  • UI 일부가 여러 번 사용되거나(Button, Panel, Avatar), UI 일부가 자체적으로 복잡한(App, FeedStory, Comment) 경우에는 별도의 컴포넌트로 만드는 게 좋다.

 

 

😚 컴포넌트의 이름은 항상 대문자로 시작한다.

React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리한다. 예를 들어 <div />는 HTML div 태그를 나타내지만, <Welcome />은 컴포넌트를 나타내며 범위 안에 Welcome이 있어야 한다.

 

 

 

 

1. 컴포넌트
   • 재사용 가능한 HTML 조각단위
2. 클래스 컴포넌트
   • React 오리지널 컴포넌트
   • class 형태로 정의하는 컴포넌트
   • 함수형 컴포넌트보다 구문이 복잡하고 길다
   • 함수형 컴포넌트보다 구문이 좀 더 명확하다
   • 클래스 안에 통칭 LifeCycle 이라는 미리 정해진 함수들을 통해 화면의 갱신 시점이나 변수값의 변경 시점에 화면을 어떻게 처리할지 정의할 수 있다
3. 함수형 컴포넌트(권장)
   • 클래스 컴포넌트보다 구문이 간결하지만 그만큼 더 난해할 수 있다
   • 리액트 버전16 이후에 LifeCycle을 처리할 수 있는 hook이라는 기능이 도입되면서 React레서 공식적으로 권장하는 컴포넌트 작성 방법이다

 

 

 

 

---

 

 

 

 

 

e.g.) 함수형 컴포넌트 예제

 

 

 

 

👉 App.js

// 리액트 패키지 참조(모든 js 파일의 최 상단에서 필수명시)
import React from 'react';
// 직접 작성한 컴포넌트 참조
import Hello from './Hello';
import World from './World';

// App이라는 이름의 함수형 컴포넌트(재사용 가능한 HTML 조각단위)
// 프로젝트에서 컴포넌트를 렌더링하면 함수에서 반환하고 있는 내용이 브라우저에 나타남
// 반환되는 HTML 코드는 JSX 문법을 사용
// JSX : XML과 비슷한 React 전용 JavaScript 확장 문법
function App() {
  return (
    <div className="App">
      <h1>Hello REACT😊</h1>
      <Hello />
      <World />
    </div>
  );
}

export default App;

 

 

 

 

👉 Hello.js

// 리액트의 기본을 구성하는 패키지 참조
import React from 'react';

// 함수형 컴포넌트 정의
// 함수 이름은 혼선을 방지하기 위해 소스파일 이름과 동일하게 구성하는 것이 일반적
const Hello = () => {
    // 리턴은 항상 HTML구조를 의미하는 JSX 문법이어야 하고,
    // JSX 구조는 무조건 단 하나의 태그요소만 반환해야 한다.
    // >> 복잡한 구조는 부모 요소 하나에 모두 포함되어야 한다는 의미이다.
    return (
        <h2>
            Hello😄
        </h2>
    );
};

export default Hello;

 

 

 

 

👉 World.js

import React from 'react';

const World = () => {
    return (
        <h2>
            World😁
        </h2>
    );
};

export default World;

 

 

 

 

 

 

 

 

---

참고:

 

https://ko.reactjs.org/docs/components-and-props.html

Components와 Props – React