[React] Component

Component

재사용 가능한 각각의 독립된 모듈

프런트 엔드 시각으로 말하면

재사용 가능한 UI 구성 단위

쉽게 말하면

레고블럭

위의 사진과 같이 자주 쓰이는 요소들을 블럭으로 만들어 사용하는 것을 component라고 한다.

component의 장점

1. 코드 재활용성 증가
2. 코드 유지보수 용이
3. 해당 페이지가 어떻게 구성되어 있는지 파악 용이
4. 컴포넌트 또 다른 컴포넌트를 포함(작은 레고를 조합해서 큰 레고를 만든다)
   
   

component의 종류

1. class component
초기에 사용되었던 component. 함수형에 비해 문법과 사용법이 복잡하다.

2. function component
class component에 비해 간단하고 단순. 초창기에는 state를 관리하지 못한다는 단점으로 잘 사용되지 않았지만 React 16.8버전에서 hooks라는 기능이 추가되며 state를 잘 관리할 수 있게 됨

import React from "react";

//class
class Login extends React.Component{
	render(){
    	return <h1>Login<h1/>
    }
};
  
//function
function Login(){
	return <h1>Login</h1>
};

React에서 함수 component의 rendering이란

React는 state와 props를 인자로 받아 rendering을 통해 jsx로 변환하여 UI로 나타내는 것

React에서 함수 component의 rendering이란 state, props를 기반으로 UI요소를 그려내는 행위이다.

const introduce = (name) => `Hello ${name}`;
//input: name;
//output: Hello {name};
//introduce name을 인풋으로 받아서 Hello name을 리턴하는 함수

const sum = (num1, num2) => num1 + num2;
//input: num1, num2
//output: num1 + num2
//sum함수는 num1, num2를 인풋으로 받아서 num1 + num2를 리턴하는 함수다

const Component = (state, props) => JSX
//input: state, props
//output: JSX
//리액트 컴포넌트를 한문장으로 정의하자면 state, props를 받아서 JSX를 리턴하는 함수이다.
//리액트는 JSX를 UI로 표현해준다.