React 웹, 앱 만들기

노드js 먼저 설치하세요

https://nodejs.org/en

Node.js

리액트 프로젝트를 생성하려면 다음과 같은 단계를 따르면 됩니다. 터미널에서 아래 명령어를 실행하세요:

1. Node.js와 npm을 설치해야 합니다. 이미 설치되어 있다면 넘어가도 됩니다.
2. 터미널을 열고 원하는 디렉토리로 이동합니다.

cd 경로/내/프로젝트/폴더

3. 다음 명령어를 통해 `create-react-app` 패키지를 전역으로 설치합니다. 이 패키지는 리액트 프로젝트를 쉽게 생성할 수 있게 도와줍니다.

npm install -g create-react-app

4. 다음 명령어로 리액트 프로젝트를 생성합니다.

npx create-react-app 프로젝트이름

여기서 `프로젝트이름` 자리에 원하는 프로젝트 이름을 입력하세요. 조금만 길어도 안되니 프로젝트명은 짧게 적어주세요

5. 프로젝트 생성이 완료되면 해당 디렉토리로 이동합니다.

cd 프로젝트이름

6. 생성된 리액트 프로젝트를 실행합니다.

npm start

이렇게 하면 개발 서버가 시작되고 브라우저에서 프로젝트가 자동으로 열릴 것입니다.

VSCode 내에서는 터미널을 열고 이러한 명령어들을 실행하면 됩니다. 위 단계를 차례로 따라하면 리액트 프로젝트를 손쉽게 생성하고 실행할 수 있습니다.

 

---

프로젝트파일 > src >  App.js를 아래와 같이 수정하세요.

import React, { useState } from 'react';

function App() {
  const [time, setTime] = useState(1); // 올바른 useState 사용법

  const handleClick = () => {
    setTime(time + 1);
  };

  return (
    <div>
      <span>현재 시각: {time}시</span>
      <button onClick={handleClick}>Update</button>
    </div>
  );
}

export default App;

리엑트는 크롬으로 여시고 한글이 깨지면 인코딩을 UTF-8로 바꾸세요

 

---

import React, { useState } from 'react';

function App() {
  return (
    <div>
      <input type = "text"/>
      <button>Update</button>
    </div>
  );
}

export default App;

---

import React, { useState } from 'react';

function App() {
  const [name, setName] = useState(['홍길동', '김민수']);
  const [input, setInput] = useState('');

  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  const handleUpdateClick = () => {
    setName([...name, input]); // 새로운 이름을 배열에 추가
    setInput(''); // 입력 필드 초기화
  };
  console.log(input);
  return (
    <div>
      <input type="text" value={input} onChange={handleInputChange} />
      <button onClick={handleUpdateClick}>Update</button>
      {name.map((name, idx) => (
        <p key={idx}>{name}</p>
      ))}
    </div>
  );
}

export default App;