새로운 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;