3. 실습

◉ JSX(JavaScript XML)

 

 ▪︎ Javascript에 XML을 추가한 확장한 문법

 ▪︎ JSX : 리액트로 프로젝트를 개발할 때 사용 → 공식적인 자바스크립트 문법은 아님 

 ▪︎ 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됨 

 

 ▪︎ ( 참고 ) https://goddaehee.tistory.com/296 

---

◉ 리액트

 

 ▪︎ 컴포넌트 방식으로 화면을 구성함 

 ▪︎ 무조건 하나 이상의 컴포넌트가 있어야 함

     따로 생성하지 않을 경우, App.js가 생성됨 

 

 ▪︎ 컴포넌트란?

    - 화면에 보여지는 요소(부분)을 의미 

    - 다른 곳에서는 위젯 또는 컨트롤이라고 함 

 

 

---

◉ App.js 실습 

 

 1. App 컴포넌트에서 사용할 라이브러리 불러오기. 

  ▪︎ ES6부터 라이브러리를 불러올 때, import 키워드를 사용함 

  ▪︎ import구문 형식      

import 패키지명 from 라이브러리 파일경로              // 파일 경로는 문자열 형식 → 따옴표 처리

 

 ▪︎ 최소 하나의 라이브러리 즉, react 본체에 대한 라이브러리 필요함 

import React from "react"                                     // react 기본 패키지는 react로 시작함 

 

 ▪︎ CSS 라이브러리 추가 

  - 리액트 : 순수 HTML 기술 → 확장 CSS 사용 가능 ( 화면을 꾸미는데 사용 )

  - import할 때, 파일의 경로 지정해주면 됨 

import './App.css'                                                      // 현재 App.js가 있는 경로(./)에서 App.css 파일의 경로 지정

 

 ▪︎ 생성한 컴포넌트 import하기 

import 컴포넌트명 from "컴포넌트 파일경로"
// 예시
import ExComponent from "./ExComponent" 

 

 

 

2. 컴포넌트를 만드는 방식 - 2가지 

  ▪︎ component : 화면을 꾸미는 클래스 → 대문자로 시작 

 

 1) 함수형 컴포넌트 

function 컴포넌트명(매개변수 ... ) { 
     함수 기능 
 }

 

 2) 클래스형 컴포넌트 

class 컴포넌트명 {
	컴포넌트 메서드(){  }
 }

 

 

 

 3. 소스의 마지막 부분에서 컴포넌트 내보내기 

export default App                            // 기본 컴포넌트 내보내기 

 

▪︎ 컴포넌트 내보내기 안했을 경우, 에러 발생 

 * component 파일에서 main 컴포넌트 역할을 하는 파일이 무엇인지 지정해라 

=> 함수 끝나는 부분에 

export default App 추가하면 오류 해결 

 

 

---

◉ 주석 

 

▪︎ 리액트의 주석은 두 가지 범위로 나뉨 

   1. 순수 자바스트립트 범위인 경우 : //, /* … */ 가능 

      예 ) return ( /* 주석 */ )  (O)

    return (<div> /* … */ </div>) (X) 

    ⇒ <div>와 </div> 영역은 자바스크립트 영역이 아닌 JSX 영역 

 

   2. 리액트 확장 JSX 영역인 경우 

       ① 한 줄일 경우 : { // 주석 } 

       ② 여러 줄일 경우 : { /* 주석 */ }. 

 

 

---

◉ 실습 코드 정리 

 

▪︎ App.js

 - function App() 부분 : App.js 컴포넌트 파일에서 기본 함수 역할 수행 

                                       ⇒ 자바의 main 메서드와 유사한 역할 

 - 다른 컴포넌트 호출 가능 ( 단, import 잊지 말기 ) 

import React from "react" // react 기본 패키지는 react로 시작함. 
import './App.css' // 현재 App.js가 있는 경로(./)에서 App.css 파일 경로를 의미 
import Ex02ComponentImport from "./Ex02ComponentImport"
import Ex0201ComponentImport from "./Ex0201ComponentImport"

// App.js 컴포넌트 파일에서 기본 함수 역할( 자바의 main 메서드와 비슷한 역할 ) 
function App(){
  return(
    <div>
      <h1>Start React 20000.</h1>
      <p>CSS 적용 가능합니다.</p>
      {/* 리액트 컴포넌트 == 사용자 정의 태그 
          -> import 해주어야 함 
      */}
      <Ex02ComponentImport></Ex02ComponentImport>
      <Ex0201ComponentImport></Ex0201ComponentImport>
    </div>
  )
}

// * 소스의 마지막 부분 : 컴포넌트 내보내기 
export default App  // 기본 컴포넌트 내보내기

 

 

▪︎ Ex02ComponentImport

 ( 예시로 하나만 / 이런 식으로 Component 생성하면 됨 ) 

// 리액트 기본 라이브러리, 컴포넌트 기능 구현 라이브러리 추가 
// -> 전부 'react' 패키지에 존재 
// { ... } 표현식 : 표현식 안의 이름으로 사용하겠다는 의미 
import React, { Component } from 'react'   

// * React 패키지 안의 Component 클래스를 상속받음 
class Ex02ComponentImport extends Component {
    // * 함수형 컴포넌트에서 화면에 출력하려면, return 명령을 이용 
    // * 클래스형 컴포넌트의 render() 메서드  
    //   - 함수형 컴포넌트의 return 명령문과 동일한 역할 
    //   - 클래스의 메서드는 function 키워드를 붙이지 않음 
    //   - 화면에 그리는 메서드로, 클래스형 컴포넌트 사용 시 반드시 정의해주어야 함 

    render(){
        return(
            <h1>[component로부터 확장된 컴포넌트입니다.]</h1>
        )
    }
}

// * 컴포넌트 내보내기 
//   - 이 파일을 외부에서 import할 때 기본값으로 가져올 클래스를 지정해줌 
export default Ex02ComponentImport

 

 

▪︎ index.html

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(  // render() = root.innderHTML=App 내용 
  <React.StrictMode>
    <App />
  </React.StrictMode>
);