Basic_Studies/React & Next.js

[React] 컴포넌트 맛보기

adore_voy 2020. 9. 11. 00:12

리액트의 가장 중요한 개념 중 하나인 컴포넌트. 

컴포넌트의 영어 뜻은 "요소, 부품" 이다.

말 그대로, 컴포넌트는 하나의 부품이다.

이 부품들이 있으면, 어디에든 끼워 조립하기 쉽고, 부품만 고치면 되니까 유지보수도 편리하다.

 

실습준비

필요한 파일

필요한 파일들은 create-react-app의 기본 파일들을 기준으로 한다.

- index.html : 이 파일의 root라는 아이디를 통해 모든 컴포넌트들이 로드된다.

- index.js : app 컴포넌트를 index.html 의 root로 렌더링시키는 역할을 한다.

- app.js : app 컴포넌트다. 이 안에 많은 컴포넌트들을 만들 예정.

 

컴포넌트의 종류는 function으로 시작하는 함수형 컴포넌트와, class로 만들어지는 클래스 컴포넌트로 나뉜다.

형태는 아래와 같다.

// 함수형 컴포넌트

import React from 'react';
function App(){
  return(
    <div className="App">

    </div>
  );
}
export default App;
//클래스형 컴포넌트

import React, { Component } from 'react';
class App extends Component {
  render(){
    return (
      <div className="App">

      </div>
    );
  }
}
export default App;

사실 리액트 훅(hook) 이라는 것이 없었을 땐, 함수형 컴포넌트에 한계가 많아 클래스형을 이용했는데 리액트 훅이 생긴 이후 그런 단점은 극복됐다고 한다.

한계는 state와 리액트 생명주기 함수(lifecycle) 이용을 못함에 있었다.

 

우리는 클래스형을 이용할 것이다.

컴포넌트들의 연결 방식

index.js와 App.js가 어떻게 연결된걸까?

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
  document.getElementById('root')
);
//App.js
import React, { Component } from "react";

class App extends Component {
    render() {
        return (
            <div className="App">
                <h1>Hello World</h1>
                <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Commodi delectus sed dolores iusto nobis ad a nisi asperiores
                magni, rem id voluptas laborum magnam impedit omnis sapiente
                quos mollitia ea. </p>
            </div>
        );
    }
}

export default App;

 

 

리액트에서 컴포넌트들은 <컴포넌트 이름 />으로 호출한다. 또한 해당 컴포넌트를 이용하려면  import 시켜야 한다.

컴포넌트가 만들어진 쪽에서 다른 파일에 이용할 수 있도록 하려면 export default 컴포넌트명; 으로 export 시켜야 한다.

또 jsx에서 클래스는 html처럼 class=""를 사용하지 않고 className=""을 사용한다.

 

위의 코드로는 아주아주 틀에 박힌 큼지막한 Hello World와 paragraph가 나올 것이다.

그러나 우리는 다른 컴포넌트들을 만들어 유지보수가 쉽게 해 볼 것이다.

 

만약 하나의 틀이 있고, 그 틀의 내용만 변경할 수 있으면 관리가 쉽지 않을까?

 

똑같은 내용으로 컴포넌트를 하나 더 만들어 보자.

나만의 컴포넌트 만들기

//App.js
import React, { Component } from "react";

class Content extends Component {
    render() {
        return (
            <div>
                <h1>{this.props.title}</h1>
                <p>{this.props.para}</p>
            </div>
        );
    }
}

class App extends Component {
    render() {
        return (
            <div className="App">
                <Content title="Hello World" para="Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Commodi delectus sed dolores iusto nobis ad a nisi asperiores
                magni, rem id voluptas laborum magnam impedit omnis sapiente
                quos mollitia ea."></Content>
            </div>
        );
    }
}

export default App;

 

실행해보면 컴포넌트로 나누기 전과 같다.

하지만 위는 Content라는 컴포넌트 조각이 하나 생긴 것이다.

잘 감이 안 올 수 있다.

Content 컴포넌트 만을 위한 Content.js 파일을 만들어 분리해보자.

//Content.js
import React, { Component } from "react";

class Content extends Component {
    render() {
        return (
            <div>
                <h1>{this.props.title}</h1>
                <p>{this.props.para}</p>
            </div>
        );
    }
}

export default Content;
// App.js
import React, { Component } from "react";
import Content from "./Content";

class App extends Component {
    render() {
        return (
            <div className="App">
                <Content title="Hello World" para="Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Commodi delectus sed dolores iusto nobis ad a nisi asperiores
                magni, rem id voluptas laborum magnam impedit omnis sapiente
                quos mollitia ea."></Content>
            </div>
        );
    }
}

export default App;

주목해야 할 점은 

Content.js 컴포넌트를 다른 곳에서 사용하고 싶다면 export default Content;를 붙여야 하는 부분.

App.js에서 Content 컴포넌트를 사용하고 싶다면 import Content from "./Content"; 로 받아와야 하는 부분이다.

 

예시가 하나의 컴포넌트만 이용해서 무슨 효율일까 싶을 수 있지만,

html의 콘텐츠 부분, 네비게이션 부분, 푸터 부분 등등을 컴포넌트로 조각내 관리하면 효율적일 것 이다.

참고:

생활코딩 React www.youtube.com/watch?v=pPCC2JWbPgk&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=13

반응형