아랄라랄라
R 스토리
아랄라랄라
전체 방문자
오늘
어제
  • All (197)
    • Web (144)
      • Markup | WEB (9)
      • Styles (45)
      • javascript (32)
      • jquery (28)
      • vue (16)
      • react (10)
      • more (4)
    • IT (31)
      • CS (3)
      • git hub (5)
      • UI | UX (18)
      • more (5)
    • ETC (22)
      • 이슈노트 (12)
      • 스터디 (10)
      • 아랄라 ☞☜ (0)
      • JOB🛠 (0)

인기 글

반응형
hELLO · Designed By 정상우.
아랄라랄라

R 스토리

[리액트] Components
Web/react

[리액트] Components

2022. 12. 15. 16:19

 

 

🎀 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

A JavaScript library for building user interfaces

ko.reactjs.org

 

728x90
저작자표시

'Web > react' 카테고리의 다른 글

[리액트] export와 export default의 차이  (0) 2023.01.03
[리액트] Props  (0) 2023.01.02
[리액트] JSX 문법  (0) 2022.12.15
[리액트] Router  (0) 2022.12.15
[리액트] 시작하기  (0) 2022.12.15

티스토리툴바