'jsx'에 해당되는 글 2건

따라하기 실습, 리액트편

04 리액트 컨포넌트 파일 알아보기 

먼저 사전적 의미에 대해 알아보자

프로그램이나 구조물에서 식별 가능한 '일부분'이다. 대체로 특정 기능이나 이와 관련된 기능들의 조합을 제공한다. 
프로그래밍 설계에서 시스템은 모듈로 구성된 컴포넌트로 나뉜다. 특히 객체지향 프로그래밍과 분산객체기술에서의 컴포넌트는 재사용이 가능한 프로그램 빌딩 블록을 말한다. 예를들어 GUI 중 버튼 하나, 소형 이자 계산기, 특정한 DBMS 인터페이스와 같은 단위를 말한다. 
컴포넌트는 컨테이너라 불리는 환경 내에서 동작하는데 이때 컨테이너란 웹페이지, 브라우저 또는 워드프로세서 등을 들 수 있다. 컴포넌트는 상호 동작을 위해 자신을 공시할 수 있는 속성과, 이벤트 처리, 영속성 등을 가지고 있다. 

앞서 실습한 리액트 번들 코드에서 보면 동그라미 친 부분이 컴포넌트에 해당하고 

이 부분은 HTML과 비슷한 JSX로 작성되어 있다. JSX는 자바스크립트를 확장한 문법으로 HTML 과 비슷한 XML 형태의 코드로 작성을 하면 이를 React.createElement 를 사용하는 자바스크립트 형태로 변환시켜준다.

코드는 return( 여기에 ); 작성하면 된다.

이때 몇가지 규칙이 있는데,

1. 마크업 부분 

1) XML에서 처럼 <a>로 시작했으면 </a>와 같이 태그(엘리먼트)를 꼭 닫아줘야 한다.

2) 두 개 이상의 태그(엘리먼트)는 무조건 하나의 태그(엘리먼트)로 감싸져있어야 한다. 

혹시 만약에 <div></div>로 단순히 덮어쓰기 애매한 경우, 

(* style 및 table작성 시 꼬일 수 있다고 한다)

<Fragment></fragment> 나  <></>와 같이 짧은 구문으로 감쌀 수도 있다. 

위 링크에 가보면 관련 예시를 상세하게 확인해 볼 수 있다. 

2. 자바스크립트 부분

1) 변수 선언 

render(){여기 안에 }   , return() 위에 변수를 선언한 후 사용하면 된다.

선언 방식은 자바스크립트 var와 scope 단위만 다르고 (var는 함수단위, jsx의 변수는 블록단위)

거의 동일한 기능을 하는 const(상수인 경우), let(변수인 경우)를 사용한다. 

2) 조건식 

삼항연산자, AND 연산자는 사용할 수 있지만 if문은 사용할 수 없다.  

if문 대신 switch문이나 람다식(화살표 함수)을 사용할 수 있다.

3. 스타일 

1) html에서 header에 css 선언하듯 

className은 const로 선언하고 return(여기 안에 )에서

<div style = {선언한 변수이름}  > 형태로 호출할 수 있다.

2) html에서 css파일을 연동시키듯

import './참조스타일.css' 방식으로 참조할 수 있다.

오늘의 예제는 아래 블로그에 있는 내용을 기반으로 따실(따라 실습)을 해보았다. 

https://velopert.com/3626

따라하기 실습, 리액트편 

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 ~