안경잡이개발자

728x90
반응형

  이번 시간에는 고객 컴포넌트(Customer Component)를 만들어 보는 시간을 가져보도록 하겠습니다. 말 그대로 한 명의 고객에 대한 정보를 보여주기(View) 위한 기능입니다. 기본적으로 React는 HTML 웹 문서를 효과적으로 보여주기 위한 라이브러입니다. 그래서 컴포넌트란 말 그대로 웹 문서에서 어떠한 내용을 보여주기 위한 기본적인 단위라고 이해하시면 됩니다.


※ Customer 컴포넌트 ※


  Customer 컴포넌트를 만들어 주도록 하겠습니다. 지금부터 만들 컴포넌트(Component)들은 하나의 공간에 모아 놓으려고 해요. 그래서 src 폴더에서 [New Folder]를 눌러 새로운 폴더를 만들어 주도록 하겠습니다. 이름은 components에요.


 


  이후에 다음과 같이 components 폴더에서 [New File]을 눌러서 Customer.js 컴포넌트를 생성해주도록 합시다.



  이후에 소스코드를 작성해주시면 됩니다.


  ▶ import: 특정한 라이브러리를 불러오기 할 때 사용

  ▶ export: 특정한 라이브러리를 내보내기 할 때 사용


  말 그대로 React Component 라이브러리를 사용하기 위해서 import 구문이 먼저 나와야 합니다. 그리고 나중에 다른 컴포넌트에서 지금 우리가 만든 컴포넌트를 사용하기 위해서는 export를 해주셔야 하는 거예요.



import React from 'react';

class Customer extends React.Component {
render() {
return (
<div>
<h2>홍길동</h2>
<p>961222</p>
<p>남자</p>
<p>대학생</p>
</div>
)
}
}

export default Customer;


※ App.js ※


  이제 App.js에서 방금 우리가 만든 Customer 컴포넌트를 사용하도록 해볼게요.


import React, { Component } from 'react';
import Customer from './components/Customer'
import './App.css';

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

export default App;


  이제 웹 브라우저를 확인해 보시면 다음과 같이 한 명의 고객에 대한 정보가 출력되는 것을 확인할 수 있어요.



※ Props를 이용해 구조화하기 ※


  이제 Props를 이용해서 App.js에서 데이터(Data)를 가진 상태에서 고객에 대한 정보를 출력하도록 구조화하도록 하겠습니다.


▶ App.js


import React, { Component } from 'react';
import Customer from './components/Customer'
import './App.css';

const customer = {
'name': '홍길동',
'birthday': '961222',
'gender': '남자',
'job': '대학생'
}

class App extends Component {
render() {
return (
<Customer
name={customer.name}
birthday={customer.birthday}
gender={customer.gender}
job={customer.job}
/>
);
}
}

export default App;


▶ Customer.js


import React from 'react';

class Customer extends React.Component {
render() {
return (
<div>
<h2>{this.props.name}</h2>
<p>{this.props.birthday}</p>
<p>{this.props.gender}</p>
<p>{this.props.job}</p>
</div>
)
}
}

export default Customer;


  실행 결과는 동일합니다. 기존에 객체 지향 프로그래밍을 해보신 분들이라면 현재의 소스코드가 그러한 객체 지향 프로그래밍의 구조를 정확히 잘 따르고 있다는 사실을 확인할 수 있을 거예요.

728x90
반응형

Comment +0

728x90
반응형

  리액트(React)에서 컴포넌트(Component)는 자바스크립트 함수와 흡사하다고 보시면 됩니다. 또한 이러한 컴포넌트는 프롭스(Props)를 입력으로 받아서 리액트 요소(React Element)를 반환하는 형태로 동작합니다. 이러한 구조를 따르면 사용자가 보는 웹 페이지의 화면을 효과적으로 구성할 수 있습니다. 프롭스(Props)는 속성(Property)의 약자입니다. 흔히 자바(Java), 파이썬(Python) 등의 객체 지향 프로그래밍에서 사용하는 그 '속성'의 의미와 동일하다고 보시면 이해하기 쉽습니다.


  간단한 예제를 통해서 Component와 Props에 대해서 알아보도록 합시다. 또한 일단 함수형 컴포넌트를 이용할 것입니다.


※ HTML 소스코드 ※


<div id="root"></div>


※ JavaScript 소스코드 ※


function Show(props) {

  return (

    <h3>

      Name is {props.name}

    </h3>

  );

}


const element = <Show name="나동빈"/>;

ReactDOM.render(element, document.getElementById('root'));



  보시면 아까 언급했듯이 컴포넌트 형태로 사용되는 Show가 자바스크립트 함수처럼 props를 입력으로 받아서 리액트 요소를 반환하는 것을 알 수 있습니다. ReactDOM.render() 함수는 첫 번째 매개변수로 특정한 컴포넌트(Component)를 받습니다. 그래서 자신이 원하는 컴포넌트를 넣어주기만 하면 되는 것입니다. 그렇기 때문에 다음과 같은 형태로도 사용할 수 있습니다. 


ReactDOM.render(<Show name="나동빈"/>, document.getElementById('root'));


  또한 특정한 컴포넌트(Component)의 props는 디폴트(Default) 값을 설정할 수 있습니다.


※ JavaScript 소스코드 ※


function Show(props) {

  return (

    <h3>

      Name is {props.name}

    </h3>

  );

}


Show.defaultProps = {

  name: '홍길동'

};


ReactDOM.render(<Show/>, document.getElementById('root'));



  또한 기본적으로 특정한 컴포넌트가 다른 컴포넌트의 결과를 반환하도록 할 수도 있으며, 매우 다양하게 활용할 수 있습니다. 아래 예제를 보시면 실제로 컴포넌트를 두 번 거치면서 많은 내용들이 추가되는 것을 알 수 있습니다. 다시 말해서 이와 같이 리액트를 활용하면 뷰(View)를 표현할 때 보다 효과적으로 코딩할 수 있는 것입니다.


※ JavaScript 소스코드 ※


function Show(props) {

  return (

    <h3>

      Name is {props.name}

    </h3>

  );

}


function App() {

  return (

    <main>

      <Show name="나동빈"/>

      <Show name="홍길동"/>

      <Show name="이순신"/>

    </main>

  );

}


ReactDOM.render(<App/>, document.getElementById('root'));



  여기까지 이해하셨다면 이제 실제로 리액트(React)를 이용해서 뷰(View)를 그럴싸하게 만들어보는 예제를 다루어 봅시다.


※ JavaScript 소스코드 ※


function User(props) {

  return (

    <div>

      <img src={props.user.imageUrl}/>

      &nbsp;<strong>{props.user.name}</strong>

    </div>

  );

}


function Board(props) {

  return (

    <section>

      <User user={props.user}/>

      {props.title}

      <hr/>

      {props.content}

    </section>

  );

}


const board = {

  title: '게시글 제목입니다.',

  content: '게시글 내용입니다. 반갑습니다.',

  user: {

    name: '나동빈',

    imageUrl: 'https://placeimg.com/32/32/any'

  }

}

      

ReactDOM.render(

  <Board

    title={board.title}

    content={board.content}

    user={board.user}

  />,

  document.getElementById('root')

);


728x90
반응형

'리액트(React)' 카테고리의 다른 글

React의 LifeCycle과 API 호출  (2) 2019.01.04
React의 State  (0) 2018.12.25
React의 Component와 Props  (0) 2018.12.25
React에서 JSX란?  (0) 2018.12.25
코드펜(Codepen)을 이용한 React 개발환경 구축하기  (0) 2018.12.25
React JS의 개요와 Hello World  (0) 2018.12.25

Comment +0