[React.Js] 리엑트 간단 컴포넌트 만들기

[React.Js/JavaScript] 간단 리엑트 컴포넌트 만들기

React

저번 포스팅에서는 create-react-app 을 통해서 앱을 실행시키는 방법까지 진행했습니다.

npx 또는 yarn 을 통해서 만들었습니다. 이 외에도 Reactjs 용 프레임워크가 존재합니다. 

예를 들자면 python -> django , java -> spring 같은 느낌입니다.

하지만 지금은 그저 그런게 있구나 정도로만 알아두시면 좋겠습니다.

알아야할것

이번글에서는 리엑트를 통해서 컴포넌트를 생성하고 생성한 컴포넌트를 사용해 보도록 하겠습니다.

시작하기 전에 우선적으로 알아야 하는 것은 바로 React의 컴포넌트 개념입니다.  

https://medium.com/little-big-programming/react 블로그 글에 자세하게 설명 되어 있습니다.

리엑트의 라이프사이클과 UI를 만들기 위해서 컴포넌트를 마운팅하고 업데이트하고 지워야 하는 과정에 대해서 알고 오면 좋습니다. 긴 글이 싫다면 안보고 오셔도 됩니다.

기본적으로 React 컴포넌트는 props 와 state 가 있습니다.

props는 앱이 만들어지거나 업데이트가 되면 값이 할당됩니다. 하지만 state 는 상황에 따라서 변경되어야 하는 경우에 쓰입니다. 실습을 통해서 알아보도록 하겠습니다.

여기까지가 저번 포스팅에서 만든 react app 입니다.

2018/08/24 - [IT/React] - [React.Js/JavaScript] 간단 리엑트 소개와 앱 실행하기(create-react-app)

해당 폴더를 사용하는 에디터로 열어줍시다.

필요 없는 파일을 우선적으로 삭제 합니다.

App.css

App.test.js

index.css

logo.svg

serviceWorker.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"></div>

);

}

}

export default App;

정리가 되었습니다.

yarn start 명령어로 실행을 해봅시다

아무것도 안 보이면 정상입니다.

축하드립니다.

정상적으로 정리되었습니다.

간단하게 public 폴더안에 있는 index,html 에서 title을 원하는 제목으로 바꿔줍시다.

안해도 무관합니다.

다했다면 아래와 같이 폴더 구조를 만들어 줍니다.

Route 폴더는 이번 포스팅에는 안쓰기 때문에 안만들어도 상관없습니다.

App.js를 Components 안에 App 폴더 안으로 옮겼습니다.

index.js

import App from "./App";

export default App;

이후에 .env 파일을 생성하여 아래와 같이 

NODE_PATH=src

라고 쓴 뒤 저장하고 빠져나옵니다.

그럼 이제 기본 폴더가 src 폴더가 되었습니다.

index.js 안에 App.js 임포트 부분도 변경하여야 합니다.

import App from 'Components/App';

이런식으로 말입니다.

이제는 컴포넌트 폴더도 만들었으니 슬슬 Hello React를 찍는 컴포넌트를 만들어 보도록 하겠습니다.

아래와 같은 폴더 구조로 Display 컴포넌트를 만들어 줍니다.

여기서 중요한건 바로 Container & Presenter 컴포넌트 패턴입니다.

많은 사람들이 사용하고 있는 것으로 추정(?) 되고 있는 패턴입니다.

바로 render와 관련된 로직은 Presenter 컴포넌트 데이터와 관련된 로직은 Container 컴포넌트로 분리하는 것 입니다. 이로써 어떤 역활을 하는 컴포넌트인지 조금 더 쉽게 알 수 있습니다.

이에 따른 효과는 위에서 소개해드린 블로그에 나와있습니다.

파일을 생성하였으면 아래와 같이 코딩을 해봅시다.

DisplayContainer.js

import React, { Component } from "react";

import Display from "./DisplayPresenter";

class DisplayContainer extends Component {

state = {

name: "kingname"

}

render() {

return <Display {...this.state}/>

}

}

export default DisplayContainer;

Container에는 데이터와 관련된 로직을 집어넣어야 합니다.

지금은 뭐 없습니다.

단지 state 안에 kinganme 이라는 name이라는 값이 있습니다.

여기서 ...는 state안에 있는 속성들을 나열해 줍니다.

예를들어 let numbers = [ 1 ,  2 ,  3  ]

이라면 ... numbers 할 경우 1 2 3 이 결과로 나오게 됩니다. 

DisplayPresenter.js

import React from "react"

const Display = props => {

const { name } = props;

return <div>Hello React {name}</div>

}

export default Display;

말 그대로 render 에 필요한 JSX를 이용한 마크업이 존재 합니다.

render에 필요한 데이터는 이미 있다고 가정합니다.

 지금같은 경우에는 Container가 데이터를 줍니다.

index.js

import DisplayContainer from "./DisplayContainer";

export default DisplayContainer;

Hello React를 찍어주는 컴포넌트를 만들었습니다. 여러분

이제 이 컴포넌트를 사용해보도록 합시다.

App.js

import React, { Component } from 'react';

import Display from "Components/Display";

class App extends Component {

render() {

return (

<div className="App">

<Display />

<Display />

<Display />

<Display />

</div>

);

}

}

export default App;

Display 컴포넌트를 추가해 주시고

위와 같이 추가 합니다.

여러번 재사용이 가능합니다.

실행을 하게 되면 보일 화면!

이것으로 간단 리엑트 컴포넌트 만들기 포스팅을 마치겠습니다.
궁금하신점이 있으시다면 댓글을 남겨주시면 감사하겠습니다.

---

관심이 제 젤리값에 큰 힘이 됩니다.