React - Component

 컴포넌트 (component)

component의 사전적의미 : n. 구성요소, 성분

  컴포넌트는 사용자 정의 태그를 만드는 기술로 React의 가장 기본이 되는 단위이다.
  다른 사람이 만든 컴포넌트도 쓸 수 있어서 재사용이 가능해, 생산성을 높여준다.

  리액트로 화면을 구성하면, 사용자에게 보여지는 UI 요소를 컴포넌트 단위로 구현할 수 있다.

---

create-react-app으로 처음 리액트 App을 생성했을 때, App.js 파일이 기본으로 작성되어있는 것을 볼 수 있다.

App 컴포넌트를 최상위에 두고, 원하는 화면의 UI 컴포넌트를 생성한 후 이곳에 import 해주면 된다.

• import: 다른 파일에서 데이터를 불러 옴
  무슨 파일을 어디서 불러올 것인지 다음과 같이 작성해주면 된다.
  import ~~ from "./~~";

• export: 다른 파일에서 데이터를 읽을 수 있도록 전환하여 발송
  발송할 파일이 변경되지 않도록 default를 함께 작성해준다.
  export default ~~;

---

함수형 컴포넌트

function으로 정의하고 return문에 jsx코드를 반환한다.

우선 함수형 컴포넌트는 다음과 같이 두가지 방식으로 작성이 가능하다

    ① function으로 함수 정의

import React from 'react';
import './App.css';

function App() {
	const name = "test";
	return (
   	<h1>Hello, {name}</h1>
   );
}

export default App;

    ② 화살표 함수 사용

import React from 'react';
import './App.css';

const App = () => {
	const name = "test";
	return (
    	<h1>Hello, {name}</h1>
    );
};

export default App;

---

클래스 컴포넌트

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

import React from 'react';
import './App.css';

class App extends Component {
	render(){
    	const name = "react";
        return (
        	<div className="react">
            	{name}
            </div>
        );
    }
}

export default App;

• React v16.8부터 Hooks이라는 기능이 새롭게 도입되어 클래스 컴포넌트의 문제점을 해결해주기 때문에 현재는 더 간결한 방식의 함수형 컴포넌트를 주로 사용한다.

컴포넌트 이름은 항상 대문자로 시작해야 한다.
소문자로 작성하면 DOM태그와 혼동될 수 있기 때문이다.

참고: ChanBLOG https://chanhuiseok.github.io/posts/react-4/