Component(컴포넌트)

리액트 관련 글을 읽다보면 Component라는 단어를 굉장히 많이 사용한다. 

Component(이하 '컴포넌트')는 재사용 가능한 UI 단위이다. 앞 글에서 말한 라이브러리와 같은 역할을 한다. 

 

쇼핑몰을 예로 들면, 모든 상품 상세페이지의 레이아웃이 같다. 

리액트를 배우기 전이라면, 일일히 HTML을 복사해서 붙여넣고 <a>태그로 이동시켜야 했다. 하지만 리액트에서는 상세페이지의 틀(컴포넌트)을 만들어주면 무한히 생성이 가능하다. 

이 외에도 메인페이지에서 항상 보이는 카테고리 바도 컴포넌트로 만들어서 계속 메인페이지에 띄워지게 할 수 있다. 

이렇게 독립적이고 재사용 가능한 것을 컴포넌트라고 한다. 

 

Component(컴포넌트) 만들기

컴포넌트는 class나 function으로 만들 수 있으며, 컴포넌트 이름은 무조건 대문자로 시작한다. (컴포넌트 파일명도 대문자로 시작)

 

(1) class로 만든 경우

class Welcome extends React.Component { 
    render() { 
        return <h1>Hello, {this.props.name}</h1>; 
    } 
}

리액트에서는 컴포넌트를 사용하기 위해 class 안에 render() 메소드 및 return 정의가 필수다. 

*Rendering(렌더링)이란, HTML, 리액트 요소 등의 코드(결과물)를 눈으로 볼 수 있도록 배포하는 것이다. 

 

 

(2) function으로 만든 경우

// 1. Welcome 컴포넌트 정의 
function Welcome(props) { 
    return <h1>Hello, {props.name}</h1>; 
} 
 
// 2. App 컴포넌트 정의 
function App() { 
    return ( 
        <div> 
            <Welcome name="Sara" /> 
            <Welcome name="Cahal" /> 
            <Welcome name="Edite" /> 
        </div> 
    ); 
} 
 
 
// 3. 화면에 React 요소 그려주기 
ReactDOM.render( 
    <App />, 
    document.getElementById('root') 
);

function으로 만든 경우, 함수 안에 return으로 보여줄 값을 작성하고, 제일 밑에 ReactDom.render( );를 작성함으로 어디에 렌더할 것인지 써줘야 한다. 

 

See the Pen jsx by Yeri (@yeri-kim) on CodePen.