[React] Component

Componenet

컴포넌트란 리액트를 이루는 최소 단위, 하나의 의미를 가진 독립적인 단위 모듈로 사용자가 정의하여 HTML 태그와 비슷하게 사용된다.

컴포넌트를 이용하면 소프트웨어의 재사용성과 유지보수가 쉽다.

---

 

컴포넌트 사용 방법

버튼를 반환해주는 Btn 컴포넌트를 정의해보자.

단, 리액트에서 소문자로 시작하는 컴포넌트는 DOM태그로 인식하기 때문에 컴포넌트의 이름은 항상 대문자로 시작한다.

 

함수형 컴포넌트로 정의하는 방법

function Btn({text}){
            return(
                    <button 
                        style={{
                            backgroundColor:"tomato",
                            color:"white"
                        }}>{text}</button>
                );}

 

클래스형 컴포넌트로 정의하는 방법

class Btn extends React.Component{
	render(){
    	return(
        	<button style={{
                            backgroundColor:"tomato",
                            color:"white"
                        }}>{text}</button>
        );
    }
}

 

위에서 주황색 배경과 흰색 글자 스타일의 버튼 컴포넌트를 정의하였다.

정의한 Btn 컴포넌트를 HTML 태그처럼 원하는 곳에 사용할 수 있다.

function App (){
        return(
        <div>
            	<Btn text={"Hi"}
        	<Btn text={"React"}/>
        </div>    
        );
    }
        const root=document.getElementById("root");
        ReactDOM.render(<App/>,root);

 

이와 같이, 만약 동일한 style과 기능을 가지는 버튼 여러 개를 생성해야 하는 경우에 컴포넌트를 이용하면 쉽게 재사용할 수 있다는 장점이 있다.