JS 문법 복습 및 React 학습

새로운 Promise를 생성 시 동기적 동작 / Promise 결과에 접근 시 비동기적으로 동작

const fetchData = async () => {

  let response = await (await fetch("")).json();

};

// Promise 객체 생성

const promise = new Promise((resolve, reject) => {

  if (true) {

    resolve("성공데이터");

  } else {

    reject("실패데이터");

  }

});

// Promise에 resolve데이터 접근

promise.then((resolve) => {

  console.log(resolve);

});

// Promise에 reject데이터 접근

promise.catch((reject) => {

  console.log(reject);

});

// Promise 내부의 값을 외부에서 사용하려면 then은 비동기이고 함수 호출은 동기이므로 값이 들어가기 전에 실행됨

 

module.exports = {

  root: true,

  env: { browser: true, es2020: true },

  extends: [

    "eslint:recommended",

    "plugin:react/recommended",

    "plugin:react/jsx-runtime",

    "plugin:react-hooks/recommended",

  ],

  ignorePatterns: ["dist", ".eslintrc.cjs"],

  parserOptions: { ecmaVersion: "latest", sourceType: "module" },

  settings: { react: { version: "18.2" } },

  plugins: ["react-refresh"],

  rules: {

    "react/jsx-no-target-blank": "off",

    "react-refresh/only-export-components": [

      "warn",

      { allowConstantExport: true },

    ],

    //초심자에겐 오히려 헷갈릴 수 있는 설정이라 꺼둠

    "no-unused-vars": "off", // 사용되지 않는 변수를 오류로 알려주는 설정

    "react/prop-types": "off", // 리액트를 안전하게 사용해주는 설정

  },

};

 

개인과제 풀이

 

import { useState } from "react";

import "./App.css";

function App() {

  const initialState = [

    { id: 1, name: "John", age: 20 },

    { id: 2, name: "Doe", age: 21 },

  ];

  const [users, setUsers] = useState(initialState);

  const [id, name, age] = users;

  // TODO: 이름과 나이를 각각 상태로 정의하세요. 초기값은 빈문자열("")입니다.

  const [newName, setNewName] = useState("");

  const [newAge, setNewAge] = useState("");

  const addUser = (e) => {

    e.preventDefault();

    // TODO: 이름과 나이가 모두 입력되지 않았을 때는 alert 처리하고 함수를 종료하세요. 논리합연산자 (||) 를 이용하세요.

    if (newName === "" || newAge === "") {

      alert("이름과 나이를 입력하세요.");

      setNewName("");

      setNewAge("");

      return;

    }

    // TODO: 사용자 리스트 상태를 업데이트 하세요. spread operator 를 사용하고, 추가되는 id는 현재 시간을 밀리초 단위로 반환하는 Date.now() 를 사용하세요.

    setUsers([...users, { id: Date.now(), name: newName, age: newAge }]);

    setNewName("");

    setNewAge("");

  };

  const removeUser = (id) => {

    // TODO: filter 메소드를 사용해서 사용자 삭제 로직을 구현해 보세요.

    alert("삭제되었습니다.");

    setUsers(users.filter((user) => user.id !== id));

  };

  return (

    <>

      <h1>사용자 리스트</h1>

      <form onSubmit={addUser}>

        {/* TODO: input 태그에 value, onChange 속성을 추가해서 이름과 나이의 상태와 상태변경 로직을 연결하세요 */}

        <input

          type="text"

          placeholder="이름"

          value={newName}

          onChange={(event) => setNewName(event.target.value)}

        />

        <input

          type="number"

          placeholder="나이"

          value={newAge}

          onChange={(event) => setNewAge(event.target.value)}

        />

        <button type="submit">사용자 추가</button>

      </form>

      <ul>

        {/* TODO: map 메소드를 이용해서 user 리스트를 렌더링하세요.  */}

        {/* 이름: John, 나이: 20 [삭제] 버튼이 하나의 행에 나올 수 있도록 해보세요. (hint: flex) */}

        {users.map((user) => (

          <li key={user.id} style={{ display: "flex" }}>

            {user.name}, {user.age}

            <button

              onClick={() => {

                removeUser(user.id);

              }}

            >

              삭제

            </button>

          </li>

        ))}

      </ul>

    </>

  );

}

export default App;

 

특강 내용

import { useState } from "react";

import "./App.css";

function App() {

  const [user, setUser] = useState({ name: "홍길동", age: 25 });

  const [items, setItems] = useState(["사과", "바나나", "오렌지"]);

  const { name, age } = user;

  const [newItem, setNewItem] = useState("");

  const addNewItem = (event) => {

    event.preventDefault();

    if (items.includes("newItem")) {

      alert("중복입니다");

      setNewItem("");

      return;

    }

    if (newItem === "") {

      alert("빈칸입니다");

      setNewItem("");

      return;

    }

    setItems([...items, newItem]);

    setNewItem("");

  };

  const handleRemoveItem = (item) => {

    alert(item + "삭제되었습니다.");

    setItems(

      items.filter((element) => {

        return element !== item;

      })

    );

  };

  const logItems = () => {

    // forEach는 중간에 멈출 수 없이 모든 배열을 순회해야함

    items.forEach((item) => console.log(item));

  };

  return (

    <div>

      <h1>사용자 정보</h1>

      <p>이름: {name}</p>

      <p>나이: {age}</p>

      <h2>사용자의 아이템 목록</h2>

      <form onSubmit={addNewItem}>

        <label htmlFor="newItem">새 아이템 추가:</label>

        <input

          id="newItem"

          value={newItem}

          onChange={(e) => setNewItem(e.target.value)}

        />

        <button type="submit">추가</button>

      </form>

      <ul>

        {items.map((item) => (

          <li key={item}>

            {item}

            <button

              onClick={() => {

                handleRemoveItem(item);

              }}

            >

              삭제

            </button>

          </li>

        ))}

      </ul>

      <button onClick={logItems}>아이템 목록 콘솔에 출력</button>

    </div>

  );

}

export default App;