1) 학습내용

react란?

규모가 큰 자바스크립트 라이브러리로 Ui를 쉽게 구성하도록 도와줌
리액트 라이브러리를 사용하면 프론트엔드 웹애플리케이션을 체계적으로 개발, 스마트폰에서도 빠른속도로 작동 가능하는 앱을 개발할수있음.

참조 : https://ko.reactjs.org/

리액트 라이브러리 사용준비

HTML 파일에서 리액트라이브러리를 사용할수있게 해주는 것
"https://unpkg.com/react@17/umd/react.development.js" ->리액트를 사용하기위해
"https://unpkg.com/react-dom@17/umd/react.development.js" ->리액트를 사용하기위해
"https://unpkg.com/bable-standalone@6/umd/react.development.js"
-> 리액트 코드를 쉽게작성할수있게 해주는 라이브러리

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 리액트 사용 준비 -->
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/bable-standalone@6/umd/react.development.js"></script>
</head>
<body>
  <div id="root"></div>
  <!--리액트를 사용하는 코드입력  -->
<script type="text/babel"></script>

</body>
</html>

리액트 라이브러리는 자바스크립트가 아니라 리액트를 위해 개발된 자바스크립트 확장문법을 사용하는데
이를 사용하려면 바벨 이라는 라이브러리를 추가로 읽어들이고 바벨을 적용할 부분을 지정해야한다.

루트 컴포넌트 출력

리액트에서는 화면에 출력되는 요소를 컴포넌트라고 한다. 그중 가장 최상위에 배치하는 컴포넌트를 루프컴포넌트 (root comonent)라고 한다.

컴포넌트 생성,출력

생성
<컴포넌트 이름></컴포넌트 f이름>
출력
ReactDOM.render(컴포넌트,컨테이너)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 리액트 사용 준비 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/bable-standalone@6/umd/react.development.js"></script>
</head>
<body>

    <div id="root"> </div>
    <!--리액트를 사용하는 코드입력  -->
<script type="text/babel">
    const component =  <h1>리액트 기본</h1>
    const container = document.getElementById('root')

// 출력 하기
ReactDOM.render(component,container)
</script>
    
</body>
</html>

자바스크립트 내부 코드에 HTML 코드를 사용한 모습이 보이는데 이러한문법을 JSX(자바스크립트 확장문법)이라고 합니다.

JSX 기본문법

JSX 문법은 태그를 만드는 기능 이외에도 태그내부에 표현식을 삽입해서 출경하는 기능도 있다.
다만속성으로 표현식을 출력할때는 따옴표를 사용하면 안됨!!

표현식 출력하기
<태그>{표현식}</태그>
<태그 속성={표현식 /}>
따옴표는 사용X!

EX)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 리액트 사용 준비 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>

  
  
<script type="text/babel">
   const name = '바다'
   const imgUrl = 'http://placedog.net/400/200'

   //컴포넌트와 컨테이너 생성
   const component = <div>
    <h1>{name} 님 반갑습니다~</h1>
    <img src={imgUrl} />
    </div>
    const container = document.getElementById('root')

    //출력

    ReactDOM.render(component,container)
</script>
    
</body>
</html>

2)어려웠던점

컴포넌트의 생성이 생각보다 안됨
JSX문법이 화면에 나타나지 않은점

3)해결방법

화면에 나타나는법은 아직 해결을 못하였다...  구글링을 통해 해결방법을 찾아보는중...

4)소감

새로운라이브러리 리액트를 기초적인부분을 공부해 보았는데 요즘 인기많은 라이브러리라 열심히해보고싶은데 자바스크립트 문법이랑 조금 다른점이 있어서 고생좀했다... 나도 리액트를 집중적으로 해보고싶다는 생각이 든다.