[React] 리액트의 컴포넌트

1. 컴포넌트의 정의

컴포넌트 - 해시넷

여러 개의 프로그램 함수들을 모아 하나의 특정 기능을 수행할 수 있는 하나의 기능적인 단위를 뜻한다.

 

 

 

2. 리액트에서의 컴포넌트

이 글에서는 기초적인 컴포넌트만 다룹니다.
state, props 등의 사용은 함수형 컴포넌트의 형태로 추후에 포스팅 될 예정입니다.

리액트에서의 컴포넌트의 생성 및 사용방식은 다음과 같다.

import React from "react";

function Comp() {
    {/* Comp에 대한 것들을 렌더링 */}
    return (
        <div> ... </div>
    )
}

export default Comp;

import React from "react";
import Comp from "./Comp";

function App() {
    return (
    	{/* Comp 컴포넌트 호출 */}
    	<Comp />
    );
}

export default App;

 

 

 

3. 클래스형 컴포넌트

컴포넌트를 정의 및 호출할 때 클래스(객체)의 형태로 사용되는 방식이다. 이는 객체지향프로그래밍과 흡사한 구조를 가지는데 문법은 다음과 같다.

import React, { Component } from 'react';

class Welcome extends Component {
    render() {
    	// render 함수의 return을 통해 렌더링한다
    	return (
            <div> ... </div>
        );
    }
}

export default Welcome;

import React, { Component } from 'react'; 
import Welcome from './Welcome';

class App extends Component {
  render() {
    return (
    	<Welcome />
    );
  }
}

export default App;

---

여기서, 리액트에서의 class는 클래스형 컴포넌트에 사용되는 예약어이므로 html의 class 선택자를 사용하려면 className으로 사용한다!

<!-- 통상적인 html에서의 class 선택자 사용 -->
<div class="container"> ... </div>

<!-- 리액트에서의 class 선택자 사용 -->
<div className="container"> ... </div>

---

 

 

 

4. 함수형 컴포넌트

컴포넌트를 정의 및 호출할 때 함수의 형태로 사용되는 방식이다. 이는 함수형 프로그래밍과 흡사한 구조를 가져 보다 작은 단위의 기능으로 쪼개어 컴포넌트를 구현할 수 있다.

import React from 'react';

const Welcome = () => {
    // render 함수없이 단순히 return을 통해 렌더링한다
    return (
        <div> ... </div>
    );
}

export default Welcome;

import React from 'react'; 
import Welcome from './Welcome';

function App() {
    return (
        <Welcome />
    );
}

export default App;