개발새발

웹게임을 만들며 배우는 React 클론 코딩 정리본 본문

WEB-STUDY

웹게임을 만들며 배우는 React 클론 코딩 정리본

비숑주인 2024. 7. 16. 09:11

1. create-react-app 설치

npm install -g create-react-app

 

2. react project 생성 -> 원하는 이름으로 생성하면 된다.

create-react-app test_app

 

3. 생성한 폴더로 이동 후 app을 실행시키면 페이지가 생성된 것을 확인할 수 있다.

cd test_app
npm start

 

4. App.js 파일에 들어가 수정하고 save를 하면 자동으로 컴파일이 시작되어, 페이지가 자동으로 reload 되는 것도 확인할 수 있다.

 

 

component는 데이터와 화면을 묶어 둔 것

데이터는 state, 화면은 render 부분의 return 부분

 

묶여 있기 때문에 데이터가 바뀌면 화면은 자동으로 바뀐다! (화면의 바뀌는 부분을 state로 만들자)

 

 

5. 화살표 함수의 문법

기본 문법

 
(param1, param2, ...) => { statements }

매개변수가 하나일 때

param => { statements }

매개 변수가 없을 때

() => { statements }

표현식 반환

(param1, param2) => expression
//이 경우 expression이 자동으로 반환

예시

// 두 숫자를 더하는 함수
const add = (a, b) => a + b;

console.log(add(2, 3)); // 5

// 인사말을 출력하는 함수
const greet = name => `Hello, ${name}`;

console.log(greet('Alice')); // Hello, Alice

// 매개변수가 없는 함수
const sayHi = () => console.log('Hi!');

sayHi(); // Hi!

클래스 컴포넌트에서 이벤트 핸들러로 사용하면 this 바인딩 문제를 피할 수 있다. this 바인딩에서 "바인딩(binding)"이란 함수가 호출될 때 this 키워드가 참조할 객체를 결정하는 과정을 의미한다. 자바스크립트에서 this는 함수가 어떻게 호출되는지에 따라 달라지며, 이는 종종 혼란을 야기할 수 있다. 바인딩은 이 혼란을 해소하고 this가 정확히 어떤 객체를 참조하는지 명확하게 하기 위한 과정이다.

 

 

6. Babel 라이브러리

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">

Babel 스탠드얼론은 Babel을 브라우저에서 직접 사용할 수 있도록 만든 독립형 버전이다. 이를 통해 Node.js 환경이나 빌드 도구 없이도 Babel을 사용할 수 있다. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Babel Standalone Example</title>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    // 최신 JavaScript 코드를 여기 작성
    const App = () => {
      const element = (
        <div>
          <h1>Hello, Babel!</h1>
          <p>This is a sample React component.</p>
        </div>
      );
      return element;
    };

    // ReactDOM.render를 사용하여 React 컴포넌트를 렌더링
    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
  
  <!-- React와 ReactDOM을 로드 -->
  <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>
</body>
</html>

Babel 라이브러리는 JSX(JavaScript XML) 구문을 변환하여 브라우저가 이해할 수 있는 일반 JavaScript 코드로 바꿔준다. JSX는 React에서 컴포넌트를 정의할 때 많이 사용되는 구문으로, HTML과 유사한 문법을 JavaScript 코드 안에 작성할 수 있게 해준다.

 

pop, push, shift, unshift : 배열을 직접적으로 수정
concat, slice : 새로운 배열을 만들어냄

let arr = [1, 2];
let newLength = arr.push(3); // newLength는 3, arr는 [1, 2, 3]
let arr = [1, 2, 3, 4];
let newArr = arr.slice(1, 3); // newArr는 [2, 3], arr는 그대로 [1, 2, 3, 4]

react는 새로운 배열을 만들어내는 방식으로 코드를 짜야 한다!

(객체를 바꾸지 말고 복사해라)

react에서는 객체를 함부로 바꾸면 안되는데(불변성), 그 연장선이다

배열도 객체이고 함수도 객체이다

 

JSX(JavaScript XML)  코드 

//() => { ... } 화살표 함수로, 클릭 이벤트가 발생했을 때 실행될 코드 블록을 정의한다
//이 코드는 사용자가 버튼을 클릭할 때 liked 상태를 true로 변경하는 기능을 한다

<button onClick={() => { //onClick 속성은 클릭 이벤트 핸들러를 설정, 화살표 함수로 정의되어 있음
    // this.state.liked=true;
    //this.state.liked=true;는 상태를 직접적으로 변경하려고 하지만, React에서는 상태를 직접 변경하는 것을 권장하지 않음 
    this.setState({liked:true}); // 상태를 변경할 때 사용하는 setState 메서드를 호출
    //setState 메서드에 {liked: true} 객체를 전달하여 liked 상태를 true로 설정한다
}}>
    like
</button>

 

 

7. 함수 컴포넌트

 

함수 컴포넌트(Function Component)는 React에서 UI를 정의하기 위한 컴포넌트 유형 중 하나이다. 함수 컴포넌트는 단순히 JavaScript 함수로, props라는 인자를 받아서 React 엘리먼트를 반환힌다. 함수 컴포넌트는 비교적 간단한 구조를 가지며, 클래스 컴포넌트와 달리 state나 생명주기 메서드를 직접 사용할 수 없지만, React Hooks를 사용하여 이러한 기능들을 활용할 수 있다. 

 

기본 함수 컴포넌트

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

//Greeting 컴포넌트는 props라는 인자를 받아서 이름을 출력한다

 

8. 함수 컴포넌트에서 Hooks 사용하기

 

React Hooks를 사용하면 함수 컴포넌트에서도 상태 관리나 생명주기 메서드와 같은 기능을 사용할 수 있다

//useState Hook을 사용하여 count 상태를 관리
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

 

함수 컴포넌트는 this를 쓸 일이 없고 코드가 짧은 장점이 있다!

 

9. state와 tag

 

리엑트 화면에서 바뀌는 부분은 state이고 바뀌지 않는 부분은 tag 이다.

 

State는 컴포넌트의 현재 상태를 나타내며, 그 값이 변경될 때마다 해당 컴포넌트는 다시 렌더링된다. 이 과정을 통해 화면에서 변화가 필요한 부분만 업데이트 된다. state 에는 수동으로 바뀌는 부분만 setState()로 바꾸어줘야 한다. (리엑트에서 직접적으로 변환X)

ex) 사용자 입력에 따라 변경되는 값, API 요청의 결과, 컴포넌트의 내부 카운터 등

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

태그는 주로 고정된 구조를 정의하며, 컴포넌트의 기본 레이아웃을 설정한다. JSX를 사용하여 HTML과 유사하게 작성할 수 있다. 

ex) 버튼, 입력 필드, 이미지 등 UI 요소 등

function App() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <button>Click me</button>
    </div>
  );
}

 

//구구단 게임 만들기
const React = require('react');

const GuGuDan = () => {
    // state를 각자 할당해야 한다는 점!
    // 1번째 => state, 2번째 => setState
    const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
    const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9));
    const [value, setValue] = React.useState('');
    const [result, setResult] = React.useState('');
    const inputRef = React.useRef(null);

    const onChangeInput = (e) => {
        setValue(e.target.value);
    };

    const onSubmitForm = (e) => {
        e.preventDefault();
        if (first * second === parseInt(value)) {
            setResult(value + ' 딩동댕');
            setFirst(Math.ceil(Math.random() * 9));
            setSecond(Math.ceil(Math.random() * 9));
            setValue('');
            inputRef.current.focus();
        } else {
            setResult('땡');
            setValue('');
            inputRef.current.focus();
        }
    };

    return (
        <React.Fragment>
            <div>{first} X {second}?</div>
            <form onSubmit={onSubmitForm}>
                <input ref={inputRef} onChange={onChangeInput} type="number" value={value} />
                <button>입력</button>
            </form>
            <div id="result">{result}</div>
        </React.Fragment>
    );
}

module.exports = GuGuDan;

 

+JSX와 HTML의 차이점

JSX: 모든 태그는 반드시 닫아야 한다. 자식 요소가 없는 태그는 self-closing 형태로 작성한다. 중괄호 {}를 사용하여 JavaScript 표현식을 삽입할 수 있다. JSX랑 Javascript랑 왠만하면 섞어 쓰지 말자!

<input type="number" />
<button>입력!</button>
<button>{buttonText}</button>
//중괄호 {}를 사용하여 JavaScript 표현식을 삽입

HTML: self-closing 태그와 그렇지 않은 태그 모두 사용 가능하다. 또한 JavaScript 표현식을 직접 삽입할 수 없고 대신, JavaScript를 사용하여 DOM을 조작해야 한다. 

'WEB-STUDY' 카테고리의 다른 글

MongoDB로 로그인 기능 구현하기  (2) 2024.08.26
React props  (0) 2024.08.18
Mongodb 기초  (1) 2024.05.19
바닐라 JS로 크롬 앱 만들기 수강 클론 코딩 정리본  (2) 2024.04.08
JavaScript  (0) 2024.03.28
'WEB-STUDY' Related Articles more