[React] React Component / 컴포넌트

📌 컴포넌트 개념 이해하기

: 컴포넌트를 통해 UI 재사용이 가능한 개별적인 여러 조각으로 나누고, 그 조각을 개별적으로 살펴 볼 수 있다.
= 독립적이다. = 하나하나의 버튼이 전체에 영향을 미치지 않는다.

• 컴포넌트는 javascript 함수와 유사.
• input : props / output : react element

1. React 컴포넌트를 표현하는 두 가지 방법

: 클래스형 컴포넌트 거의 사용 안 함. 함수형 컴포넌트만 사용한다.

🧐 WHY? 공식 홈페이지에서 함수형 컴포넌트를 사용하기를 권장함. 훨씬 쉽고, 사용하기 편리하다.

1) 함수형 컴포넌트

: 주로 가장 많이 사용한다.

// App 이 하나의 컴포넌트를 나타낸다.
function App () {
    return <div>hello</div>
}

// input : props
// output : return 이하. <h1>Hello, {props.name}</h1>

function Welcome(props) { 
  return <h1>Hello, {props.name}</h1>;
}

2) 클래스형 컴포넌트

: 클래스형 컴포넌트가 먼저 나왔으나, 잘 사용하지 않는다...!

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

🚨 React에서 말하는 컴포넌트(Component)
: 즉, 함수를 만드는 것이다. JSX 문법을 사용하여 return 하는 것.

2. 컴포넌트 import/ export

생성한 컴포넌트는 export 하여, 다른 곳에서 import로 받아와 사용할 수 있다.

// 컴포넌트 밖. 내가 필요한 파일을 불러 올 수 있는 영역
import logo from './logo.svg';
import './App.css';
import React from "react";

function App () {
// 여기가 자바스크립트 문법을 사용할 수 있는 영역이다. 

    return 
      <div>
        //  JSX 문법을 쓸 수 있는 영역 
      </div>
}

// 내가 만든 컴포넌트를 밖으로 내보내는 영역
export default App;

🔥 컴포넌트 생성 시, 주의 사항 🔥
: 컴포넌트를 만들 때는, 반드시 첫 글자는 대문자로 작성. / 폴더는 소문자로 시작

3. 부모 - 자식 컴포넌트

• 부모 컴포넌트 : 다른 컴포넌트를 품는 컴포넌트
• 자식 컴포넌트 : 다른 컴포넌트 안에 품어지는 컴포넌트

기존 App 컴포넌트의 형태

import React from "react";

function App() {
  return <div>나는 아들입니다.</div>;
}

export default App;

부모 - 자식 컴포넌트 관계

import React from "react";

// 자식 컴포넌트
function Child() {
  return <div>나는 아들입니다.</div>;
}

// 부모 컴포넌트
// Child 컴포넌트를 품고 있다. 
function App() {
  return <Child />;
}

export default App;

📌 이러한 작업을 refactoring한다고 말한다. = 컴포넌트화 시킨다.

🧐 그렇다면 컴포넌트화는 왜 필요할까?

: 반복되는 로직이 생길 코트를 반복해서 작성해야하기 이를 방지하기 위해 사용한다!

function App() {
  return (
  <div>
    <div>나는 아들입니다.</div>
    <div>나는 아들입니다.</div>
    <div>나는 아들입니다.</div>
    <div>나는 아들입니다.</div>
    <div>나는 아들입니다.</div>
  </div>
  );
}

이렇게 반복되는 로직이 생길 경우, 컴포넌트화 시킨다.

function Child() {
  return <div>나는 아들입니다.</div>;
}

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