Web 5부 - 현업 개발자가 알려주는 웹프로젝트 만들기. (React 자세히 알아보기.)
페이지 정보
본문
안녕하세요. 엔지엠소프트웨어입니다. 1~4부까지 개발 도구를 설치하고, 타입스크립트와 리엑트 그리고 앤트 디자인까지 설치해서 간단하게 로그인 페이지를 만들어봤습니다. 이제 여기에서 타입스크립트와 리엑트에 대해 좀 더 자세하게 학습하고 넘어가야 합니다. 그전에 HTML, CSS, JavaScript와 같은 언어들은 기본적으로 알고 있어야 합니다. HTML, CSS, JavaScript는 [ W3Schools Online Web Tutorial ] 사이트에서 자세하게 학습할 수 있습니다. 이외에도 현재 현업에서 가장 많이 사용되는 대부분의 언어들이 강좌와 퀴즈 형태로 제공됩니다. 기초부터 하나씩 학습하기에 이만한 사이트가 없습니다^^; 엔지엠소프트웨어 사이트와 여기는 꼭! 즐겨찾기 해두세요~
본격적으로 React에 대해 알아볼까요~? 이 글은 프로그래밍에 대한 기본적인 지식은 가지고 있고, 리엑트를 처음 배우는 분들을 대상으로 작성 되었습니다. Visual Studio Code를 실행하세요. 이미 만들어진 작업 공간(Work space)이 열릴겁니다. 만약, 처음이시면 [ 여기 ]를 참고하여 개발 도구 설치 및 개발 환경을 구성해야 합니다. 아래 리액트 프로젝트의 폴더를 보면 node_modules 폴더와 public, src 폴더가 보일겁니다. Angular, React, Vue와 같은 언어들도 설치하면 기본적인 폴더 구조가 만들어집니다. 웹앱을 만들 때 개발자들이 선호하는 구조가 어느정도 템플릿화 되어 있기 때문인데요. 사진의 스타일에 맞게 수정해도 상관은 없습니다.
public 폴더안에 index.html 파일이 보일겁니다. 코드는 아래와 같죠?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
</head>
<body>
<div id="container" style="padding: 24px" />
<script>var mountNode = document.getElementById('container');</script>
</body>
</html>
앤트 디자인(Ant Design)이 적용되어 있어서 코드가 다를겁니다. 이전 예제를 따라하신 분들은 아래와 같이 새로운 리액트 프로젝트를 추가하고, 이 글을 보시는게 편할겁니다. third-app을 설치하고 cd 명령을 사용해서 third-app 폴더로 이동합니다. npm start 명령으로 실행되는지 체크하세요.
npx create-react-app third-app
cd third-app
npm start
자~ 깨끗한 리액트 프로젝트를 만들었습니다. public/index.html를 열어보면 아래와 같은 코드를 볼 수 있습니다. 참고로 터미널이나 커맨드에서 중복되지 않는 앞 몇글자를 입력하고 탭키를 누르면 자동으로 폴더 이름이 만들어집니다. 쉽고 빠르게~ 폴더를 탐색할 수 있어요^^
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
이제 저와 동일한 코드일겁니다. 여기서 중요한건 31라인에 있는 root 아이디를 가지는 div 태그입니다. 앤트 디자인은 container죠.
<div id="root"></div>
리액트는 이 root 아이디를 가지는 div 엘리먼트를 최상위 엘리먼트로 사용한다고 약속되어 있는 상태입니다. 물론, 앤트 디자인이나 사용자가 원하는 아이디로 변경하고, 사용해도 됩니다. 일반적으로 root를 그대로 사용하거나 앤트 디자인을 적용하는 경우 container를 사용합니다. 회사마다 정책에 따라 달라질 수 있는 부분입니다. SPA(Single Page Application)를 사용하는 이유는 특정 영역만 갱신하는 목적으로 사용됩니다. 여담이지만, 초창기에 이와 동일한 방식의 사이트들이 많았습니다. 그때는 iframe 또는 Ajax를 이용해서 비슷하게 구현할 수 있었습니다.
root라는 div 태그 안에는 src 폴더 안에 인터페이스, 컴포넌트, 클래스, 뷰, 모델등등이 들어가게 됩니다. 기호에 맞게 리소스는 별도의 외부 폴더를 만들거나 src 안에 만들어도 됩니다. src 폴더를 보면 index.js 파일이 보입니다. public에도 index.html이 있었는데 여기에 동일한 이름을 가진 자바스크립트가 있습니다. 리액트가 실행되면 호스트가 되는 index.html의 root에 엔트리 파일인 index.js가 주입(Injection)됩니다. 아래 코드를 보면 동일한 root 아이디가 보입니다.
※ 리소스는 이미지, 문서등등 코드와 관련 없는 파일들을 말합니다. 이미지는 디자인 구성 요소일수도 있고, 아이콘일수도 있습니다. 문서는 라이센스, 도움말등등을 말합니다.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
주의깊게 봐야할 부분은 document.getElementById('root') 입니다. index.html의 root 아이디를 가진 div 안에 <App /> 리액트 컴포넌트를 넣어줍니다.
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
그렇다면~ <App />은 어디에 있을까요? 상단에 import를 보면 알 수 있습니다.
import App from './App';
src/App.js 파일입니다. 이 내용은 아래와 같이 되어 있는데요. 결국은 이 내용이 화면에 표시되게 되는겁니다. 뭔가 좀 복잡하고 그렇죠?
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
이제 npm start로 실행한 후 F12를 눌러서 개발자 도구로 확인 해볼까요? index.html의 ①root 태그 안에 index.js에서 주입한 ②App가 보입니다. App안에 ③App-header 태그도 보여지고 있네요. CSS 클래스 이름을 지정할 때 HTML은 class를 사용하지만, 리액트는 className을 이용해서 설정해야 합니다. 이건 룰이라서 그냥 외워야 합니다^^;
코드를 아래와같이 수정한 후 Ctrl+S로 저장해보세요.
import './App.css';
function App() {
return (
<div className="App">
Hello NGMsoftware!
</div>
);
}
export default App;
node에서 환경을 만들어준 앵귤라나 리액트는 파일을 저장하면 자동으로 컴파일하고, 브라우저를 갱신 해줍니다. 이 기능이 상당히 편리합니다. 디버깅이나 개발자 도구도 없던 예전에는 값을 하나씩 찍어보면서 확인해야 했습니다. 보통은 alert을 많이 이용했었죠. 지금은 개발 도구가 워낙 좋아져서 세상 편리한 기능들이 정말 많은듯 합니다. 아무튼~ 저장하면 자동으로 브라우저가 갱신되면서 아래와 같이 표시될겁니다.
이렇게해서 간단하게 리액트에서 HTML을 어떻게 생성하는지와 구조에 대해 알아봤습니다. 자료를 조사하다보니 요즘에는 Vue를 많이 사용하고, 네이버나 카카오에서 프로젝트도 많다고 하는군요. React는 HTML, CSS, JavaScript(JSX)를 모두 Recat안에 통합하고자 하는 개념이 강합니다. 그렇다보니 방법에 따라서 HTML을 분리하거나 React에 넣어서 사용해도 문제가 없습니다. 그리고, 동적으로 JavaScript가 처리해도 동작은 잘 됩니다. 이 부분은 앵귤러도 동일하구요. Vue는 HTML, CSS, JavaScript 영역이 분리되어 있어서 기존 개발자(Angular, React를 사용해보지 않은...)나 처음 입문하는 분들에게 유리합니다. React는 라이브러리이고, Vue는 프레임워크입니다. 아무래도 라이브러리가 프레임워크보다 자유도가 높다보니 여러가지 방식으로 코드를 작성할 수 있게됩니다. 코드 스타일 가이드가 잘 정리되지 않은 상태에서 협업을 하게 된다면 리액트가 아무래도 가독성면에서 안좋을 수 있습니다. Vue는 안써봐서 잘 모르겠지만~ 사용자는 증가하는 추세인가봐요^^; 결국은 다 배워야 할거 같습니다-_-;
좀 더 아름다고 다이나믹하게 디자인을 입혀주고 싶으면 CSS를 알아야 합니다. index.js에는 index.css가 import되어 있습니다.
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
index.css 안에 있는 내용들은 전부 지우고, 아래와 같이 폰트 크기를 설정 해보세요. 그리고 저장하면 글자 크기가 커진걸 알 수 있습니다.
body { font-size: 2rem; }
백그라운드 컬러(배경색)를 밝은 파란색으로 변경 해보세요.
폰트 색상을 파란색으로 변경하고, 굵기를 두껍게 만들어봤습니다.
body { font-size: 2rem;
font-weight: bold;
color:blue;
background-color: lightblue;}
[ W3Schools Online Web Tutorial ] 여기에서 여러가지 CSS들을 적용해보면서 효과를 확인 해보세요. 클래스 이름에 따라 적용 스타일을 적용하고, 태그를 기준으로 적용할 수도 있습니다. 이외에도 동적으로 생성하거나 변경이 가능합니다. 생각보다 많은 기능들을 제공하고 있습니다. 저도 UX팀에서 만들어준 베이스를 토대로 이것 저것 수정해서 사용하곤 합니다. 하지만, 개발자가 CSS를 수정해서 바로 적용하지는 않습니다. 디자인의 일관성 때문에 UX팀에 테스트한 결과를 첨부해서 수정 요청을 해야 하거든요^^; 협업이니까요!
여기까지 만든 앱을 배포하는 방법에 대해 알아볼께요. 먼저 실행중인 서버를 중지해야 합니다. Visual Studio Code의 터미널에서 Ctrl+C를 누른 후 Y를 입력하세요. 그러면 서버가 중지됩니다. 그리고, 아래 명령을 입력하고 엔터를 치면 우측 탐색기에 build 폴더가 만들어집니다. 이 안에 보면 index.html 말고는 아무것도 존재하지 않습니다. 그리고 코드가 한줄로 쭉~ 이어져 있죠?
npm run build
VSC의 메뉴의 보기에서 자동 줄바꿈을 해볼까요? 아래 그림과 같이 모든 줄바꿈과 띄어쓰기가 사라진걸 알 수 있습니다. src 폴더에 있는 App도 함께 자바스크립트 형태로 컴파일되서 포함되었죠^^; 배포시에는 성능 향상을 위한 조치들이 취해지고, 불필요한 주석이나 코드들을 제거해서 용량도 줄일 수 있습니다. 한번 다운로드 되면 캐시되서 큰 문제는 없겠지만 사이트가 무거워질수록 이런 부분도 신경써줘야 합니다. 요즘은 컴퓨터와 브라우저의 성능이 좋아지고 5G 시대에 있기 때문에 큰 의미는 없을듯하지만... 아무튼 그렇습니다. 실제 프로젝트를 진행해보면 프론트엔드가 느린 경우는 잘 없습니다. 복잡한 비즈니스 로직을 처리하는 App 서버와 데이타베이스 문제일겁니다.
npm에서 제공해주는 server를 설치 해줍니다. 빌드하면 터미널에 친절하게 설명을 해줍니다. serve는 정적 사이트, SPA 또는 정적 파일(장치 또는 로컬 네트워크에 상관없이...)을 제공하려는 경우 쉽게 사용할 수 있도록 서버를 제공합니다. 사이트를 프로덕션으로 푸시할 시간이 되면 Vercel을 사용하는 것이 좋습니다. 일반적으로 serve디렉토리의 내용을 나열하기 위한 깔끔한 인터페이스도 제공합니다.
npm install -g serve
serve -s build를 실행하면 아래와 같이 서버가 실행되고, 접속 주소를 알려줍니다. 콘트롤키를 누르고 클릭하면 웹페이지가 열립니다. 여기서 -s 옵션은 뒤에 폴더를 루트로 시작하겠다는 의미입니다. 기본적으로 시작 페이지는 index.html로 되어 있기 때문에 페이지가 정상적으로 열립니다. 예전 마이크로소프트의 asp나 .net의 경우에는 default를 사용했었습니다. 지금은... 어떨지 모르겠군요-_-; 더이상 신규 프로젝트로 asp.net을 사용하지 않는거 같거든요. 해외는 모르겠지만 국내에서는 본적이 없는거 같습니다.
아래는 배포 버전의 네트워크를 확인 해본 내용입니다. 페이지 리소스 용량이 145kb입니다. 로딩까지 32ms가 소요 되었네요.
이번에는 개발 환경입니다. 리소스 용량이 1.7mb고, 페이지 로딩에 105ms가 소요되었습니다.
웹 환경은 오래전부터 소스코드를 보호할 수 있는 방법이 없었습니다. 자바스크립트가 로컬 컴퓨터에 리소스로 다운로드 받아지기 때문입니다. 최소한의 보안으로 난독화를 진행하거나, 특정 서버 코드를 심어서 동적으로 로딩하도록 하곤 했는데요. 이 방식들도 사실 크게 의미는 없습니다. 용량을 줄여주는 용도로 쓰면 좋은 정도였어요. 컴파일 언어들도 디컴파일러를 이용해서 분석이 가능하기 때문에 내가 만든 코드를 보호해야겠다라고 마음먹고 너무 스트레스 받지 않으시길 바랍니다^^; 제가 알기론 몇가지 솔루션들이 있던데 사실 저도 사용해보진 않아서 잘 모릅니다~
이제 리액트의 가장 핵심이 되는 컴포넌트와 props(Properties)에 대해 알아볼건데요. 여기서 중요한 개념인 어트리뷰트(Attribute, 특성)와 프로퍼티(Property, 속성)에 대해 먼저 확인하고 넘어가야 합니다. 이런 햇갈리는 용어로 인해 뒤에 내용을 이해하는데 장애가 될 수 있기 때문이고, 특성을 속성이라고 부르는 사람도 많기 때문입니다. 엄연한 차이가 있음에도 구분을 못하는 개발자도 많습니다. 이는 아마도 유튜브 강좌나 블로그 강의등등에서 퍼지는듯 합니다. 참고로 저는 강좌나 강의와 같은 용어를 사용하지 않습니다-_-; 누구 앞에 나서서 강의를 할만큼 지식이 많지 않기 때문입니다. 그래서 항상 이글 또는 이전글과 같은 표현을 애용합니다. 그저 정보를 전달하는 글이기 때문입니다. 1가지를 가르치려면 그 외에 10가지를 알고 있어야 한다고 했습니다. 그래야 학생이 질문하더라도 대답해줄 수 있다고요. 요즘은 아무나 강좌를 하고 강의를 하죠? 전문성이 결여된 상태로요. 저는 이런건 문제라고 생각합니다^^;
이야기가 잠깐~ 옆으로 빠졌는데요. 다시 본론으로 돌아와서 컴포넌트와 props(프롭스)에 대해 하나씩 테스트하면서 알아볼께요. 우선 App.js를 펑션(function, 함수)이 아닌 클래스로 작성해야 합니다. 그리고, 컴포넌트를 상속 받아야 하죠. 아래와 같이 펑션을 클래스로 변경하고 다시 실행 해보세요.
import React from 'react';
import './App.css';
class App extends React.Component {
render() {
return(
<div className="App">
Hello NGMsoftware!
</div>
);
}
}
export default App;
결과는 동일합니다. 여기서 몇가지 중요한 개념들이 존재합니다. OOP 언어들이 사용하는 클래스와 상속인데요. 전통적인 자바스크립트의 함수를 컴포넌트를 상속 받은 클래스로 표현하는 겁니다. 주의할점은 펑션과 클래스의 이름은 항상 대문자로 시작해야 한다는 점입니다. userInfo가 아니라 UserInfo와 같이 적어야 하고, app도 App여야 합니다. 여기까지 이해가 가시죠? 컴포넌트의 정의를 보면 인터페이스가 정의되어 있고 컴포넌트 라이프 사이클을 상속 받고 있습니다. CS 프로그래밍을 하다가 오신 분들은 다소 생소한 개념일텐데요. 웹은 비연결 지향 플랫폼입니다. 클라이언트가 요청(Request)을 보내고, 서버가 응답(Response)하면 연결이 끊어지게 됩니다. 그래서, Stateless라고도 부르는데요. 현재 상태를 유지하기 위해 state도 리액트에서 중요한 기능중에 하나입니다. 이건 나중에 알아보기로 하죠^^;
컴포넌트의 기능을 알아보기 위해 코드를 아래와 같이 변경 했습니다. Hello는 h1 태그로 감싸고, NGMsoftware!는 css만 적용 받도록 했습니다.
import React from 'react';
import './App.css';
class App extends React.Component {
render() {
return(
<div className="App">
<h1>Hello</h1>
NGMsoftware!
</div>
);
}
}
export default App;
변경된 내용을 확인 하셨죠? 자~ 이제 컴포넌트의 막강한 기능인 조립에 대해 잠시 생각해봐야 합니다. 오래전 프로그래밍 언어가 탄생했을 때는 위에서부터 아래로 순차적으로 코드를 읽어서 처리하는 방식이었습니다. 지금도 인터프리터 언어들이 이런 방식을 사용하고 있으며 대표적으로 자바스크립트, 파이썬이 있습니다. 시간이 지남에 따라 산업이 다양해지고 비즈니스 로직은 점점 더 복잡해져 갔습니다. 그렇다보니 함수형 언어들에서 빠르게 객체 지향 언어로 전환되는 계기를 맞게 되었으며, C++과 Java가 대히트를 하게 됩니다. 여기에 마이크로소프트의 C#도 객체 지향 언어에 합류하게 되었죠. Java와 C#은 빠르게 시스템을 구축할 수 있도록 해주는 대표적인 언어입니다. 생산성이 엄청나게 좋아졌으니까요.
이렇게 프로그래밍 언어도 발전해나가고 있던 와중에 형식에 자유로운 스크립트 언어들과 컴파일 언어들이 점점 믹스되기 시작합니다. C#에는 런타임에 형식이 결정되는 var 키워드가 추가되었고, 자바스크립트는 타입스크립트로 넘어가게 됩니다. 타입스크립트는 우리도 같이 알아보고 있는중이죠^^; 이 글들이 리액트와 타입스크립트니까요~ 아무튼, 자바스크립트는 함수나 변수 이름만으로 동작 또는 의도를 유추하기가 어려워짐에 따라 형식(type, 타입)을 강제할 필요가 계속해서 요구되어 왔습니다. 또한, 컴파일 타임에 에러를 검출하면 에러를 미리 확인하고 해결하기가 수월해집니다. 자바스크립트를 컴파일 언어들처럼 정적 형식을 사용함으로써 얻어지는 이점이 정말 많습니다. 대신 러닝 커브가 높아진 단점도 존재하지만요^^;
이상하게 학습이 진행될수록 부연 설명할것들이 너무 많아지는듯 하네요. 디테일하게 하나 하나 짚고 넘어가면 글이 마무리가 안될듯합니다. 그래서, 간략하게 설명하고 넘어가는점 이해 부탁드리고~ 어차피 웹에 대한 개발 가이드를 진행하다보면 좀 더 자세하게 설명하게 될 날이 오지 않을까 생각합니다. 그전에 궁금한 내용들은 구글에서 검색해보시면 수많은 정보들을 볼 수 있을겁니다. 웹의 역사도 상당히 재미있으니 한번씩 찾아보시면 좋을거 같아요^^;
OOP를 간단하게나마 이해하려면 [ 여기 ] 글을 한번 읽어보시기 바랍니다. OOP에서는 여러가지 개발 방법론들이 존재합니다. CBD가 이번 설명에 가장 적합한듯한데요. CBD는 Component Based Development의 약자입니다. 사실 리액트의 디자인 패턴은 Presentation Components가 기본입니다. 화면에 보여지는 컴포넌트로 DOM과 CSS로 이루어지고, props와 callback을 처리합니다. MVC와 MVP 디자인 패턴이라고 보셔도 됩니다. 모델은 어차피 데이타를 주고 받으려면 만드는게 편하니까요. 결국은 컴포넌트를 사용하면 재사용성이 높아지고, 비즈니스 로직별로 컴포넌트를 분리를 더 잘할 수 있습니다. ASP(Aspect-Oriented Programming, 관점 지향 프로그래밍)와 비슷하게요~
※ 처음 듣는 용어들이 너무 많이 나와서 글을 이해하는데 어려움이 있을듯합니다. 이런 용어들은 검색하면 친절하게 설명된 블로그들이 많으니 참고하세요^^
아래 코드와 같이 Welcome 컴포넌트를 만들고, App 코드를 옮겼습니다. 그리고, App에서는 Welcome 컴포넌트를 추가 했습니다. 결과는 동일할겁니다.
import React from 'react';
import './App.css';
class Welcome extends React.Component {
render() {
return(
<div className="App">
<h1>Hello</h1>
NGMsoftware!
</div>
);
}
}
class App extends React.Component {
render() {
return(
<Welcome></Welcome>
);
}
}
export default App;
우리가 만든 Welcome 컴포넌트를 다른 개발자와 공유하더라도 동일한 결과물을 출력해줄겁니다. 다른 페이지에 이 컴포넌트를 추가하기만 하면요. 재사용성이 높아진거죠~ 하지만, 환영 인사가 항상 동일한게 문제입니다. 누군가는 로그인한 사용자의 이름을 사용하고 싶을수도 있거든요. 그래서~ 리팩토링 작업을 진행 해보도록 하겠습니다. 아래와 같이 코드를 변경해주세요. Welcome 컴포넌트에 this.props.title 속성과 this.props.content 속성이 추가 되었습니다. 그리고, App 컴포넌트에는 Welcome 컴포넌트를 추가하고 특성을 추가 했습니다.
import React from 'react';
import './App.css';
class Welcome extends React.Component {
render() {
return(
<div className="App">
<h1>{this.props.title}</h1>
{this.props.content}
</div>
);
}
}
class App extends React.Component {
render() {
return(
<Welcome title="Hello" content="NGMsoftware!"></Welcome>
);
}
}
export default App;
여기서 App에 태그처럼 추가된 Welcome의 title과 content는 DOM 엘리먼트인 Welcome의 특성입니다. 특성은 정적인 요소로 엘리먼트를 나타냅니다. Welcome은 동적으로 변화하는 값을 속성으로 나타냅니다. 정리하면 Welcome의 title은 특성이며 이 특성이 가지는 값은 Hello입니다. HTML DOM(Document Object Model) 안에서 특성 값에 접근하는 방법 또는 값 자체를 프로퍼티라고 부릅니다. 자세한 내용는 jQuery의 attr, prop를 [ 참고 ]하면 이해하는데 도움이 될겁니다. 아래와 같이 컴포넌트를 하나 더 추가하고 실행 해보세요.
import React from 'react';
import './App.css';
class Welcome extends React.Component {
render() {
return(
<article>
<h1>{this.props.title}</h1>
{this.props.content}
</article>
);
}
}
class App extends React.Component {
render() {
return(
<div className="App">
<Welcome title="Hello" content="NGMsoftware!"></Welcome>
<Welcome title="Hello" content="NGM Editor~"></Welcome>
</div>
);
}
}
export default App;
아직 가야할길이 먼데... 체력은 이미 고갈되었네요-_-; 재충전의 시간을 가진 후 state에 대해서 알아볼께요^^; 요즘 날씨가 많이 더워졌습니다. 올림픽이 치뤄지고 있는데~ 아무도 관심이 없는거 같기도 하군요. 빨리 코로나가 끝났으면 하는 마음이 간절한데요. 이게 쉽게 끝날거 같지 않아서 걱정이 많습니다. 제조업쪽에 종사하다보니 재택근무와는 거리가 멀지만, 그래도 고충이 큰건 사실이죠. 대면으로 진행하는 협업이 안되다보니 업무 차질도 발생하고 있고요. 그래도~ 첫 금매달 소식에 기분은 좋네요^^;
개발자에게 후원하기
추천, 구독, 홍보 꼭~ 부탁드립니다.
여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~
감사합니다~
- 이전글Ant Build - A Java Exception has occurred. 21.07.26
- 다음글502 Bad Gateway 에러 발생하는 경우 조치 방법. 21.07.24
댓글목록
등록된 댓글이 없습니다.