4강 고객 컴포넌트(Component) 만들기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]
이번 시간에는 고객 컴포넌트(Customer Component)를 만들어 보는 시간을 가져보도록 하겠습니다. 말 그대로 한 명의 고객에 대한 정보를 보여주기(View) 위한 기능입니다. 기본적으로 React는 HTML 웹 문서를 효과적으로 보여주기 위한 라이브러입니다. 그래서 컴포넌트란 말 그대로 웹 문서에서 어떠한 내용을 보여주기 위한 기본적인 단위라고 이해하시면 됩니다.
※ Customer 컴포넌트 ※
Customer 컴포넌트를 만들어 주도록 하겠습니다. 지금부터 만들 컴포넌트(Component)들은 하나의 공간에 모아 놓으려고 해요. 그래서 src 폴더에서 [New Folder]를 눌러 새로운 폴더를 만들어 주도록 하겠습니다. 이름은 components에요.
이후에 다음과 같이 components 폴더에서 [New File]을 눌러서 Customer.js 컴포넌트를 생성해주도록 합시다.
이후에 소스코드를 작성해주시면 됩니다.
▶ import: 특정한 라이브러리를 불러오기 할 때 사용
▶ export: 특정한 라이브러리를 내보내기 할 때 사용
말 그대로 React Component 라이브러리를 사용하기 위해서 import 구문이 먼저 나와야 합니다. 그리고 나중에 다른 컴포넌트에서 지금 우리가 만든 컴포넌트를 사용하기 위해서는 export를 해주셔야 하는 거예요.
※ App.js ※
이제 App.js에서 방금 우리가 만든 Customer 컴포넌트를 사용하도록 해볼게요.
이제 웹 브라우저를 확인해 보시면 다음과 같이 한 명의 고객에 대한 정보가 출력되는 것을 확인할 수 있어요.
※ Props를 이용해 구조화하기 ※
이제 Props를 이용해서 App.js에서 데이터(Data)를 가진 상태에서 고객에 대한 정보를 출력하도록 구조화하도록 하겠습니다.
▶ App.js
▶ Customer.js
실행 결과는 동일합니다. 기존에 객체 지향 프로그래밍을 해보신 분들이라면 현재의 소스코드가 그러한 객체 지향 프로그래밍의 구조를 정확히 잘 따르고 있다는 사실을 확인할 수 있을 거예요.
'React와 Node.js로 만드는 고객 관리 시스템 개발 강좌' 카테고리의 다른 글
React의 Component와 Props
리액트(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}/>
<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')
);
'리액트(React)' 카테고리의 다른 글
React의 LifeCycle과 API 호출 (3) | 2019.01.04 |
---|---|
React의 State (0) | 2018.12.25 |
React에서 JSX란? (0) | 2018.12.25 |
코드펜(Codepen)을 이용한 React 개발환경 구축하기 (0) | 2018.12.25 |
React JS의 개요와 Hello World (0) | 2018.12.25 |