React

React?

React는 View를 개발하는데 초점이 맞춰져있습니다.

오로지 DOM 객체의 갱신 및 이벤트 응답에만 관심을 갖게 됩니다.

리액트는 JSX라는 JavaScript의 확장 문법을 사용하여 UI를 선언합니다.

JSX는 HTML과 JavaScript를 조합하여 컴포넌트의 UI를 표현하므로,

가독성이 뛰어나며 컴포넌트를 작성하기 쉽습니다.

---

DOM?

DOM은 Document Object Model의 약자입니다.

DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리합니다.

JSX (JavaScript XML)

JSX는 JavaScript의 확장 문법으로, 리액트에서 UI를 선언하는 데 사용됩니다.

JavaScript와 HTML을 조합하여 가독성이 높은 코드를 작성할 수 있습니다.

---

리액트 시작하기

VsCode와 node.js는 설치 되어있어야 한다.

c드라이브에 리액트 폴더 만들기

해당 폴더를 VsCode로 열어 터미널을 연다.

npx create-react-app my-app 입력해서 설치하기

설치가 완료되면

my-app 이라는 폴더가 생긴다.

my-app으로 이동 후

npm start를 하면

성공적으로 창이 뜬다.

App.js를 찾아서 삭제처리

Index.js를 찾아서 삭제 처리

리액트 예시

import React, { useState } from 'react';

function TodoApp() {
  // 할 일 목록을 관리하는 상태
  const [todos, setTodos] = useState([]);
  // 새로운 할 일을 입력받는 입력 상태
  const [newTodo, setNewTodo] = useState('');

  // 새로운 할 일을 추가하는 함수
  const addTodo = () => {
    if (newTodo.trim() !== '') {
      setTodos([...todos, newTodo]);
      setNewTodo('');
    }
  };

  // 할 일을 삭제하는 함수
  const deleteTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div>
      <h1>할 일 목록</h1>
      <input
        type="text" //텍스트 입력 받음
        value={newTodo} // 입력필드의 값 = newTodo
        onChange={(e) => setNewTodo(e.target.value)} // 입력필드의 값이 변경될때마다 setNewTodo호출해서 newTodo상태 업데이트
        placeholder="할 일을 입력하세요"
      />
      <button onClick={addTodo}>추가</button> //버튼이 클릭되면 addTodo호출
      <ul>
        {todos.map((todo, index) => ( //todos배열의 각 요소를 순회
          <li key={index}> //index를 키로 사용하여 고유한 식별자를 제공
            {todo}//각 할 일 항목의 내용을 표시
            <button onClick={() => deleteTodo(index)}>삭제</button> //버튼이 클릭되면 delteTodo함수 호출
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

리액트 실행

Index.js에 추가

npm start를 하면

성공적으로 실행이 된다