REACT-컴포넌트

리액트를 사용하여 애플리케이션을 만들 때 사용자에게 보여지는 화면 요소들을 컴포넌트로 구성한다. 

 

❓컴포넌트(Component)

특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위를 말한다.

컴포넌트를 파일 단위로 작성한 후 필요한 위치에서 임포트해 사용할 수 있다.

 

컴포넌트를 선언하는 방식에는 함수형 컴포넌트와 클래스형 컴포넌트가 있다.

//함수형 컴포넌트
import './App.css';

function App(){
	const userName = "홍길동";
    return (
    <div className="react">{userName}</div>
    );
    }
    
    export default App;

//클래스형 컴포넌트
import React, { Component } from 'react';
import './App.css';

class App extends Component{
	render() {
    	const name = '리액트';
        return <div className="react">{name}</div>;
        }
    }
    
    export default App;

클래스 컴포넌트에서는 render 함수가 꼭 있어야하고, 그 안에서 보여주어야 할 JSX를 반환한다.

클래스 컴포넌트는 Component를 import한 후, extends 해야 한다.

 

❓render() 함수

component의 생성 과정에 속하는 함수로, 

return되는 html 형식의 코드를 화면에 그려주는 함수이다. 

 

❗ 함수 컴포넌트의 장점

1. 클래스 컴포넌트보다 선언하기 훨씬 편하다.

2. 클래스 컴포넌트보다 메모리 자원도 덜 사용한다.

3. 프로젝트를 완성하여 빌드한 후 배포할 때 결과물의 파일 크기가 더 작다.

 

❗함수 컴포넌트의 단점

state와 라이프사이클 API의 사용이 불가능하다 => Hooks 기능이 도입되면서 비슷한 작업을 할 수 있게 되었다.

 

❗모듈 내보내기 (export)

export default  컴포넌트이름;

=> 다른 파일에서 이 파일을 import 할 때 위에서 선언한 클래스를 불러오도록 설정한다.

 

❗모듈 불러오기(import)

import 컴포넌트이름 from '파일경로';

const App = () => {
    return <컴포넌트이름 />;
};

export default App;

=>위 코드에서 import 구문은 우리가 생성한 컴포넌트를 불러온다.