[ 3D Web : Front_React.js ] React.JS : React를 구성하는 요소, React 컴포넌트란?

 

 

 

[ 3D Web : Front_React.js ] 

React.JS :  React를 구성하는 요소, React 컴포넌트란?

 

 

 

---

 

∇ React.JS :: React란 무엇일까??

목   차

1. 리액트의 컴포넌트 [ Component ] 란?
2. 컴포넌트 만들기
3. 컴포넌트의 이름.

 

 

---

Ⅰ. React의 컴포넌트 [ Component ] 란?

---

 

    🩻 컴포넌트 [ Component ] 란???

 

               ∇ React는 화면에서 UI 요소를 구성할 때  '컴포넌트'라는 단위를 사용합니다.

                         - 입력(props)을 받아 출력(Element)하는 역할

 

                                  - React COmponent를 만들고자 하는대로 props, 즉 속성을 넣으면

                                         해당 속성에 맞춰 화면에 나타날 Element를 만들어줍니다.

                                  - 객체지향에서 나오는 클래스-인스턴스 개념과 비슷한데,

                                         리액트의 컴포넌트는 객체지향까지는 아니지만 비슷한 개념을 가지고 있다고 볼 수 있습니다.

                                         

 

 

 

 

 

 

               √  쉽게 말하자면, 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있습니다.

                         [ = 레고 블록으로 집을 쌓게 된 경우, 하나의 블록이 '컴포넌트' 인 것 ]

 

               ∇ 컴포넌트는 새로운 컴포넌트를 생성할 수도 있고, MVC의 뷰를 독립적으로 구성하여 재사용할 수도 있습니다.

                      + 리액트의 중요한 핵심인 '컴포넌트'에는 [ 함수 컴포넌트 & 클래스 컴포넌트  ] 2가지가 있습니다.

 

 

            ⚗️ 컴포넌트 구성 요소.

 

                       1) property (≒props)

                              : 부모 레벨 컴포넌트에서 자식 레벨 컴포넌트에 전달되는 데이터 입니디.

                                   ++ 프로퍼티값은 자식 컴포넌트에서 수정할 수 없습니다.

 

                       2) state

                              : 컴포넌트의 상태를 저장하고, 수정 가능한 데이터 입니다.

 

                       3) context

                              : 부모 컴포넌트에서 생성하여, 모든 자식 컴포넌트에게 전달하는 데이터 입니다.

 

 

            ⚗️ 컴포넌트 사용 시 장점.

 

                        1. 코드 양을 줄일 수 있습니다.

                        2. 개발 시간을 줄일 수 있습니다.

                        3. 유지 보수 비용이 줄어들게 됩니다.

 

 

 

---

Ⅱ. React의 컴포넌트 [ Component ] 만들기.

---

 

컴포넌트의 분류

 

 

 

 

 

           

🩻 함수(Function) 컴포넌트.

 

                          ◎ 함수 컴포넌트란?

                                : 함수형 컴포넌트는 말 그대로,  JS의 "함수(Function)" 기반 컴포넌트입니다.

                                     -> JS함수를 선언하듯이 function으로 컴포넌트를 정의하고, return문에 JSX 코드를 반환합니다.

function MyComponent() {
  return (
    <div>
      Hello React!
    </div>
  );
}

  

                      +> "화살표 문법" 으로도 표현 가능합니다.

const function =  (param1, param2, … ) => { statements }

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

 

         + VsCode 환경에서 "Reactjs Code snippet" 라이브러리를 사용하면, 편하게 생성 가능합니다.

             ->> "rsc"를 입력하면 함수형 컴포넌트가 자동완성됩니다.

 

 

                          ◎ 함수 컴포넌트를 사용하는 이유.

 

                                1) Hooks.

                                       - 과거에는 함수형 컴포넌트가 state, 라이프사이클을 지원하지 않았기 때문에

                                         클래스 컴포넌트를 많이 사용했지만

 

                                       - React V16 이후부터 Hooks를 통한 state 및 LifeCycle 관리가 가능해졌기 때문에

                                            리액트에서 공식적으로 함수형 컴포넌트 사용을 권장합니다.

                                           + Hook의 useState를 사용해 state를 관리할 수 있고,

                                                           useEffect를 사용해 LifeCycle를 관리 가능합니다.

 

                                2) 직관적인 코드.

                                         - JS 함수(function) 선언, 화살표 함수를 그대로 활용해 컴포넌트를 사용 가능하기 때문에

                                                  개발자에게 직관적입니다.

 

                                3) 메모리 자원 효율

                                       - 클래스형 컴포넌트에 비해 함수형 컴포넌트가 비교적 메모리 자원을 적게 사용합니다.

 

---

 

 

           

🩻 클래스(Class) 컴포넌트.

 

                          ◎ 클래스 컴포넌트란?

                                : 클래스 컴포넌트는 자바스크립트의 "클래스" 기반 컴포넌트로,

                                        class로 정의하고 render()함수에서 jsx 코드를 반환합니다.

                                  모든 클래스 컴포넌트는 React.Component를 상속받아서 만들어집니다.

                                        [React.Component를 상속받았기 때문에, React component가 됩니다]

 

 

                          ◎ 클래스 컴포넌트란 특징.

 

                                  1) class 키워드로 클래스 컴포넌트 생성

 

                                  2) React.Component 상속.

                                        - React의 ComponentClass를 상속받아서, Component 상속이 필요

 

                                  3) render() 메서드 필수로 사용.

                                        - 클래스 컴포넌트 안에 render() 메서드가 꼭 필요하고 메서드 안에 JSX를 리턴합니다.

 

                                  4) this 키워드 사용하기

                                        - state, props, refs, 컴포넌트 메서드, 생명주기 메서드를 사용할 때

                                               this로 프로퍼티를 참조하여 사용합니다.

 

 

                          ◎ 클래스 컴포넌트 생성하기.

                                   : 클래스 컴포넌트는 React의 ComponentClass를 상속받아서 구현되기 때문에

                                         반드시 {Component}를 import하고 React.Component를 상속 받아야합니다.

import React, { Component } from 'react';

 

 

                          ◎ 클래스 컴포넌트 코드 구조.

                                   -> Component를 상속받고, render() 메서드를 통해 return 문 안에 있는 JSX 코드를 반환합니다.

 

class MyComponent2 extends Component {
    render() {
        return (
            <div>
                Hello React!
            </div>
        );
    }
}

 

                     ** "Reactjs Code snippet" 라이브러리가 설치되어 있다면, 

                               'rcc를 입력하게되면 클래스형 컴포넌트가 자동 완성됩니다.

 

 

 

---

Ⅲ. React의 컴포넌트 [ Component ] 의 이름.

---

 

🩻 컴포넌트의 이름.

 

           √ 컴포넌트의 이름은 항상 대문자로 시작해야 합니다.

 

                   - 리액트는 소문자로 시작하는 컴포넌트를 DOM태그로 인식하기 때문입니다.

   

                   - div, span과 같이 사용하는 것은 내장 컴포넌트라는 것을 뜻하며 div나 span과 같은 문자열 형태로 

                          react.createElement에 전달됩니다.