3. React - Hello World (Element rendering)
이제부터 본격적으로 React를 시작해보려고 합니다.
당분간은 React의 기본 개념을 익히기 위한 진행을 하려고 합니다.
아래는 기본 개념으로 만든 화면입니다. element, props, state, function 등을 일부러 사용했어요.
주의하실 점은 이것은 실제 프로젝트처럼 해보기 위한 것이 아니라 React의 기본 개념을 최대한 사용하면서 반복 숙달하기 위한 한 것이기 때문에 실제 프로젝트에서도 이렇게 하면 문제가 생길 거예요. CSS 또한 그냥 틀만 잡기 위한 식으로 별 조건 없이 만들어 낸 것입니다. 또한, 이것은 create-react-app을 사용해서 만든 것은 아니에요. create-react-app을 이용하는 것은 아래 개념을 통한 실습이 끝나고 나서 진행하려고 하니 참고해주시면 될 것 같아요.
위에 첨부 사진은 기본 개념의 목표를 나타낸 것이고 프로그래밍하면서 모든 것의 처음으로 등장하는 Hello world를 출력해보겠습니다.
저는 말씀드렸듯이 webstorm을 사용할 것입니다.
저는 파일 경로를 D드라이의 react폴더의 practice라는 폴더에 이것을 진행합니다.
1. webstorm화면에서 index.html과 app.js를 생성해주세요.
2. index.html에 react를 사용하기 위한 라이브러리를 추가해주세요.
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Scoreboard</title> <link rel="stylesheet" href="./app.css" /> </head>
<body> <div id="root"></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="./app.js"></script> </body> </html> |
index.html을 위의 내용으로 변경해주세요
* crossorigin에 대해서 궁금하신 분들은 https://diarycafe0729.tistory.com/45 에 가시면 간단한 설명 있으니 참고해주세요.
* 라이브러리 설정에 대한 건 지난 강의에서 말씀드렸으니 참고해주시기 바랍니다.
* https://unpkg.com/react@16/umd/react.development.js
: 이 라이브러리는 리액트 코어 라이브러리로 react라는 변수를 생성해줍니다.
* https://unpkg.com/react-dom@16/umd/react-dom.development.js
: 리액트 돔을 사용할 수 있도록 해주는 라이브러리입니다.
* <script src="./app.js"></script>는 위의 두 라이브러리에 의존하기 때문에 라이브러리보다 아래에 존재해야 합니다.
추 루 모듈을 사용하게 되면 의존성을 신경 쓰지 않아도 됩니다.
* <script> 태그를 body에 적은 이유는 html 코드들이 먼저 로딩된 후 스크립트가 되는 것이 속도면에서 더 빠르다는 의견이 있기 때문입니다.
3. app.js에 hello world 입력
| const hello = React.createElement('h1', {id: 'hello', title: 'hello world'}, 'hello world'); ReactDOM.render( hello, document.getElementById('root') ); |
* javascript 변수
var : 글로벌 변수, scope를 가지지 않음, 편하게 사용할 수 있지만 문제도 있음 -> let과 const가 생김
let과 const의 차이는 const는 값을 할당하면 더 이상 할당할 수 없음
* ReactDOM.render(h1, document.getElementById('root')); 의 의미는 id가 root인 곳에 hi이라는 element를 rendering 하라는 의미로 최종 반영된 가상 dom이 실제 dom이 되어, index.html의 <div id="root"></div>에반영됩니다.
* createElement에는 3가지의 파라미터를 갖습니다. 말 그대로 element를 생성하는 것입니다.
첫 번째 : type - String 타입으로 선언해준다
두 번째 : props - props는 속성을 입력해줄 수 있습니다. id, class, 등 이곳에 정의를 해줄 수 있으며, 위 의 첨부 사진에서 보이는 바와 같이 props?라고? 가 붙어있죠? 값이 없어도 된다는 의미로 해석해도 되지만, null을 입력해주어야 합니다.
세 번째 : children - type과 props를 제외하고는 모두 이곳에 입력해줍니다.
4. hello world 확인하기
index.html을 실행해주세요.
index.html에 마우스 오른쪽을 누르고 run을 누르시거나 ctrl+shift_f10을 눌러주세요.
hello world가 출력된 게 보이시나요?
f12를 눌러서 작성 코드를 확인해보시면 app.js에서 작성한 type, props, children이 정상적으로 출력되고 있는 것을 확인할 수 있습니다.
이것으로 가장 먼저 알아야 할 element를 생성해서 rendering 하는 방법을 알아봤습니다.