따라하기 실습, 리액트편
03 리액트 번들 톺아보기
그럼, 간단히 에디터 툴 사용법 부터..
먼저 VScode 프로그램을 실행한다.
아이콘을 실행하면 에디터 이렇게 생신 첫화면을 볼 수 있다.
거의 비슷하다.
여기에 프로젝트 폴더를 만들거나 이미 있는 폴더를 추가하면 된다.
아래 화살표 순서를 따라가면 된다.
폴더에 있는 녹색은 컴퓨터 또는 사용자 이름이다.
위 캡쳐 이미지는 지난 시간에 생성했던 리액트 번들 프로젝트 'hello-react'를 등록하는 과정이다.
참고로 어제는 리액트에서 제공하는 번들 프로젝트를 실행시키고
그 결과를 브라우져에서 샘플 페이지로 최종 확인하는 과정을 담았다. (링크)
폴더 선택을 클릭하면
리액트 번들 프로젝트 hello-react 폴더 구조를 확인할 수 있다.
'/public' 폴더에는 우리가 코딩할때 가장 먼저 배우는 index.html 파일이 보통 이 폴더엔 static(정적인)한 코드들이 있다.
'/src' 폴더에는 동적인 코드과 참조할 다양한 스크립트(js) 들을 담아둔다.
이번엔 이번에 생성한 프로젝트 내에서 사용될 패키지를이 담겨 있는 곳을 찾아가서
상세 코드들이 어떻게 구성되었는지 알아보자.
App.js
이렇게 컴포넌트를 운영하는 코드를 담는 파일은 App.js이다.
App.js 을 열어보면 아래와 같이 생겼다.
일단 크게
1번 구간은 외부의 파일 또는 패키지를 가져오는 영역이다.
k부분의 코드는 리액트패키지를 가져와서 React라는 변수에 담겠다는 코드이고
왼쪽 src폴더에서 가저온 css는 a코드로 가져오고,
b코드를 통해 css를 가져와서 logo라는 변수에 담고 있다.
그런데 여기서, k코드의 react는 어디서 온거야? 하는 경우가 있는데.. 마우스를 올려보면
2번 구간은 app.js의 메인 코드 영역이다.
흰색 라운드 박스영역은 html 코드랑 비슷하게 생긴 JSX 코드다.
이 안에서 logo라는 변수와 app.css에 선언한 ClassName들이 사용되고 있다.
함께 참고할만한 점은 이 코드는 함수형태 'faunction 함수이름()' 로 만들어 졌다는 것이다.
코딩하는 사람의 취향에 따라 아래와 같이 함수가 아닌 class 형태로 구성하기도 한다.
3번 구간은 지금까지 작성한 코드를 내보내는, 반환하는 구간이다.
index.js
이번엔 index.js 코드다.
맞다.
느낌적인 느낌으로, index.html과 유사한 역할을 해준다고 이해하면 된다.
먼저 1번 구간(외부에서 패키지를 참조하고 있는 구간을 보면
코드 내용을 보면 짐작할 수 있듯이 import를 통해 다수의 패키지들을 재사용하고 있음을 알 수 있다.
모르는 패키지는 마우스를 올리면 vscode 에디터가 친절하게 해당 패키지가 참조하고 있는 위치를 알려준다.
그렇게 살펴보다보면 모르겠는 부분이 나온다.
여기서 App은 App.js를 말한다. 확장자가 생략되었다고 이해하면 된다.
정말인지 아닌지는 바로 아래에 있는
그리고 파란색, ReactDOM으로 시작하는 본문? 코드를 보면
빨간색을 따라가면 ReactDOM 변수를 이용해 render() 함수를 실행시키고 있다.
이 함수는 이름 그대로 브라우저 상에 ReactDOM.render( '안에 있는' ) 리액트 컴포넌트를
랜더(보여주기)하기 위한 함수이다. render 함수는 아래와 같이( a, b ) 구조로 되어 있다.
<App />, document.getElementById('root')
여기서 파라미터a 는 랜더의 결과물이고
파라미터 b는 랜더된 결과물을 그리는(노출시키는) 장소(DOM)를 지정한다.
코드를 풀어쓰면 라는 <App />* 결과물을
브라우저에 노출되는 문서(코드)* 중, ID가 'root'인 엘리먼트에 있는 내용을
(*여기서 말하는 문서는 index.html안에서 찾을 수 있다. )
(*<App />는 처음 보는 코드일 것이다. 리액트는 XML과 같이 태그를 커스텀할 수 있는 JSX를 사용하고있기 때문이다)
위 캡쳐 이미지에서 마우스로 쓴 숫자를 기준으로
1번 구간에서는 사용자, 코더 또는 개발자가 정의하는 jsx코드이고
2번 구간은 사용자가 정의한 코드를 랜더링 하고 위치를 지정하는 javascript코드이고
3번 구간은 우리가 알고 있는 html 코드이다.
그렇게 해서 브라우저에 있는 화면에 최종으로 아래와 같은 이미지를 볼 수 있는 것이다.
참고로
움직이는 react 로고는
앞에서 설명한, App.js에서 import한 svg 파일이다.
모션은 src폴더에 있는 App.css 안에 담겨있다.
그럼, 오늘을 20000 ~
코인깎는노인