[Web KIT640] Day 14. React 컴포넌트 및 State

vinca·2023년 2월 13일

React

🍉 Web Frontend

목록 보기

17/22

정리

Danfo.js

csv 데이터를 쉽게 다룰 수 있도록 해주는 툴
python의 numpy나 pandas를 생각하면 된다.
javascript언어를 통해 작성한다.
node/react/browser에 모두 사용할 수 있다.

간단한 예제를 보자.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/danfojs@1.1.2/lib/bundle.min.js"></script>
</head>

<body>

    <script>

      //danfo is exposed on dfd namespace 
      s = new dfd.Series([1,2,3,4,5]) 
	  s.print()	
    </script>

</body>

</html>

danfo.js 공식 홈페이지

chart.js

chart.js 공식 홈페이지

데이터를 차트 형식으로 시각적으로 표현 가능하다.

예제

<!DOCTYPE html>
<html lang="en">
<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">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <title>Document</title>


</head>
<body>
    <div>
        <canvas id="myChart"></canvas>
      </div>

      <script>
        const ctx = document.getElementById('myChart');
      
        new Chart(ctx, {
          type: 'bar',
          data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
              label: '# of Votes',
              data: [15, 19, 15, 14, 13, 12],
              borderWidth: 1,
              backgroundColor: ["red", "green", "blue", "pink", "white", "purple"]
            }]

            
          },
          options: {
            scales: {
              y: {
                beginAtZero: true
              }
            }
          }
        });
      </script>
</body>
</html>

React!

React는 SPA 기반 WEB UI(User Interface) 구성을 위한 Javascript 라이브러리.
재사용 가능한 UI 컴포넌트 생성. (사용법이 쉬움)
HTML UI 컴포넌트 = HTML + CSS + Javascript를 하나로.
기존 HTML 화면을 어떻게 React 컴포넌트로 분리 하느냐가 관건.

기본적으로 node.js가 설치된 상황에서 동작한다.

// 디렉토리 my-react-app을 생성 후 그 안에 설치
npx create-react-app my-react-app
// 현재 디렉토리에 그대로 설치
npx create-react-app .

설치를 완료하면 다음과 같이 실행시켜주도록 하자.

npm start

빌드

빌드를 통해서 압축된 형태로 보낼 수 있다.
압축되었기에, 부하가 더 낮게 실행시킬 수 있다.

npm run build

빌드된 파일을 실행하려면 다음 명령어를 사용한다.

npx serve -s build

컴포넌트

정말 중요한 점은 대문자로 해야한다는 것이다.
소문자로 정의해뒀다가, 고생 꽤나 했다..

react 컴포넌트를 생성시 클래스 형태와 function형태 두가지로 생성 가능하다.

함수형태로 정의하는 것이 더 간단하기에 주로 사용된다.

객체를 찍어내는 생성자라고 생각하면 편하다.

React props 사용

컴포넌트를 생성(호출) 시, props를 통해 값을 전달하고 이를 사용할 수 있다.

// Car 객체를 생성
<Car brand="현대" name="sonata"></Car>

객체를 생성할 때 설정한 속성은 props로 전달되게 된다.

아래 예제를 보자.

위와 아래 둘다 동일하며 ES6를 이용해서 더 짧게 정의했다.

기본 형태

function Car(props) {
  return <h1>I am a function {props.brand}</h1>
}

ES6 형태

const Car = (props)=> <h1>I am a const in {props.brand}</h1>

호출(생성)하는 부분

function App()
{
      <div>
        <Car brand="현대"></Car>      
      </div>
}
export default App;

결과

구조분해 할당

굳이 props 객체로 받아 접근하지 않고, 생성 시 전달된 값을 그대로 사용할 수 있다.
즉, 구조를 분해해서 받아오는 것이다.

// 기존 props 형태로 받아옴
const Car = (props)=> <h1>I am a const in {props.brand}</h1>

// 구조 분해 할당
function Car_distribute({brand}){
  return <h1>I am a 구조분해 할당 {brand}</h1>
}

      <div>
        <Car brand="현대" name="sonata"></Car>
        <Car_distribute brand="현대"></Car_distribute>       
      </div>