CodeHoon

안녕하세요 상훈입니다.

리액트에서 Axios 요청을 사용하는 방법(chart ... etc)을 알아보도록 하겠습니다.

$ npm install axios react-chartjs-2 --save

터미널에 복사 붙여넣기 해주시면 됩니다.

Axios는 js의 Ajax와 유사합니다.

브라우저와 Node.js에서 Promise API를 통신 방식으로서,

 프론트와 백을 연결하여 HTTP 비동기 통신 방식입니다.

받아오는 방식은 JSON 입니다.

이 중에 GET 방식을 진행해볼건데, 

axios.get(url)

로 사용이 가능합니다. 

예제) 코로나 현황 검색

우리나라의 covid19 현황을 검색해보겠습니다.

저는 Google Extensions : Talend API Tester를 사용했구요, api 통신 테스터 아무거나 사용하셔도 무방합니다.

이렇게 JSON 형태로 값이 받아와졌습니다. 

이제 web에 적용을 하도록 하겠습니다.

Contents.js    :  React.js file

import React, {useState, useEffect} from 'react'
import axios from 'axios'


const Contents = () => {

    useEffect(() => {
        const fetchEvents = async () => {
            const res = await axios.get("https://api.covid19api.com/total/dayone/country/kr")
            console.log(res)
        }
        fetchEvents()
    })

    return (
        <section>
            <h2>국내 코로나 현황</h2>
            <div className="contents">
            

            </div>
        </section>
    )
}

export default Contents

1. useState와 useEffect를 import 해주셔서 앱이 로딩이 될 때 사용을 하도록 하고,

2. axios를 import하여 axios를 사용할 수 있게 해줍니다.

3. 그리고 async await을 사용하여 바로 스크립트가 실행되는 것이 아닌, 먼저 모든 페이지가 로딩 된 후에 데이터를 찾는 것으로 설정하였습니다.

이렇게 object 형태로 데이터를 받아왔습니다.

리액트 코드를 작성하면서 snippets가 작용할 수 있게.

= h1 만 작성하여도 자동으로 <h1></h1>이 작성되게 하는 익스텐더

안녕하세요 상훈입니다.

자바스크립트로 문자열을 나누는 split 함수를 사용하도록 하겠습니다.

<script>
  cosnt yearInput = prompt('태어난 해는?', '')
  const year = Number(yearInput)
  const tags = '원숭이,닭,개,돼지,쥐,소,호랑이,토끼,용,뱀,말,양'.split(',')
  alert(`${year}년에 태어났다면, ${tags[year%12]} 띠 입니다.`)
</script>

Split 함수 예제를 알아보았습니다.

안녕하세요 상훈입니다.

리액트 훅으로 useEffect를 사용하여 웹페이지 접속 3초 후에 Title 부분이 바뀌는 예제를 작성하도록 하겠습니다.

App.js

import React, {useState, useEffect } from "react";

const useTitle = initialTitle => {
  const [title, setTitle] = useState(initialTitle)
  const updateTitle = () => {
    const htmlTitle = document.querySelector("title")
    htmlTitle.innerText = title
  }
  useEffect(updateTitle, [title])
  return setTitle
}


function App() {
  const titleUpdater = useTitle("Loading...")  // 시작할 때
  setTimeout(()=> titleUpdater("Home"), 3000)  // 3초 후 

  return (
    <div className="App">
      <div>Hi</div>    
    </div>
  );
}

export default App;

Loading... -> 3초후 -> Home 

으로 바뀌는 페이지 제목을 확인하실 수 있습니다.

강의 참고 : 니콜라스님

안녕하세요 상훈입니다.

웹 개발 시 배경을 지정하여야하는데, 마땅한 배경을 지정할게 없거나, 랜덤으로 새로고침할 때마다 등장하는 배경을 찾고 싶으시다면

background-image: url( 
 https://source.unsplash.com/random/1920x1080 
)

을 사용해주시길 바랍니다. 

1920x1080은 본인의 배경 크기를 지정할 수 있습니다. 

좋네요. ㅎ

예시)

이상입니다.

안녕하세요 상훈입니다.

리액트 훅에서 useState를 활용한 증가버튼, 감소버튼을 구현하도록 하겠습니다.

1. index.js 

import React, { useState } from "react";

const App = () => {

  const [item, setItem] = useState(0)
  const incrementItem = () => setItem(item + 1)
  const decrementItem = () => setItem(item - 1)

  return (
    <div className="App">
      <h1>Hello {item}</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={incrementItem}>Increment</button>
      <button onClick={decrementItem}>Decrement</button>

    </div>
  )

}

export default App;

useState() 를 이용하는건, 생각보다 단순하지만,

일일이 값을 생성하고 지정해주어야하는 번거로움이 존재한다. 

안녕하세요 상훈입니다.

코드 샌드박스 같은 곳이 아니라 내 로컬 디스크에 있는 vscode에서 리액트 훅을 공부해보고 싶었습니다.

1. 터미널에서 프로젝트를 명령어로 생성해줍니다.

$ npx create-react-app hooks-react

"hooks-react"라는 폴더명으로 프로젝트가 생성됩니다.

2. 기본 작성되어진 html을 지우기 위해서 src 폴더 내에 있는 App.js와 index.js 이외의 모든 파일을 지우도록 하겠습니다.

3. App.js

import React from "react";
const App = () => <div>Hello React?</div>;
export default App;

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

기존의 내용을 삭제해주시고, 변경해줍니다.

4. 터미널에서 시작을 해줍시다.

$ npm start

5. 결과 확인.

아까 작성하였던 <div>Hello React?</div> 에 의해 

"Hello React?" 라는 문구가 포트3000번의 localhost 에서 출력이 됩니다.

1단계로 리액트-훅 프로젝트 구동에 대해 알아봤습니다.

참고

React.js hook를 사용하려고 하던 와중 처음부터 이러한 에러를 대면했다...

Uncaught SyntaxError: Cannot use import statement outside a module

문제점

1. 리액트 훅을 기본적으로 적용하는 법을 몰랐다.

해결방법

1. script 를 html에 적용시키는 과정에서 script의 type을 지정해주어야 한다.

<script type="text/babel" src=" "> </script>

type="text/babel" 혹은

<script type="text/jsx" src="./01.useState.js"></script>

type="text/jsx"로 해결이 가능하다.

스크립트 타입을 변경해주시길 바랍니다.