반응형
react강의 노트 | Byte Degree [3주차]
배열 렌더링하기 Read
import React from "react";
function User({ user }) { //파일안에 새로운 component 만들기
return (
<div>
<b>{user.username}</b> <span>{user.email}</span>
</div>
);
}
function UserList() {
const users = [
{
id: 1,
username: "heeyeon",
email: "junghy@gmail.com",
},
{
id: 2,
username: "ggtt",
email: "ggtt@gmail.com",
},
{
id: 3,
username: "ssdd",
email: "ssdd@gmail.com",
},
];
/*return (
<div>
<User user={users[0]} />
<User user={users[1]} />
<User user={users[2]} />
</div>
);*/
return (
<div>
{users.map((user) => (
<User user={user} key={user.id} />
))}
</div>
);
}
export default UserList;
- key로 사용할 id 값이 없다면 map의 콜백함수의 index사용하기 (웬만하면 안쓰는게 좋음)
useRef로 component 안의 변수 만들기
- 주로 useRef를 사용하는 경우
setTimeout, setInterval의 주어지는 id를 기억해야할 때, 외부라이브러리를 사용하여 생성된 인스턴스, scroll위치 등
-> useRef로 관리하는 값은, 바뀌어도 component가 리렌더링 되지 않는다는 점이 포인트!
- 특정 DOM을 선택하고 싶을 때 쓸 수 도 있지만, 어떠한 변수를 계속 기억하고 싶을 때도 사용한다
배열에 항목 추가하기 Create
import React, { useRef, useState } from "react";
import CreateUser from "./CreateUser";
import UserList from "./UserList";
function App() {
const [inputs, setInputs] = useState({
username: "",
email: "",
});
const { username, email } = inputs; //비구조와 할당으로 추출
const onChange = (e) => {
const { name, value } = e.target; //비구조와 할당으로 추출
setInputs({
...inputs, //spread 문법으로 inputs을 가져오고
[name]: value, //name을 value로 바꾸겠다. -> name이 username, emil을 인식
});
};
const [users, setUsers] = useState([
//변수로 만들어서 배열에 동적으로 추가가능하게 만듦
{
id: 1,
username: "heeyeon",
email: "junghy@gmail.com",
},
{
id: 2,
username: "ggtt",
email: "ggtt@gmail.com",
},
{
id: 3,
username: "ssdd",
email: "ssdd@gmail.com",
},
]);
const nextId = useRef(4);
const onCreate = () => {
const user = {
//onCreate 발생시 새로운 user 객체 만들기
id: nextId.current,
username, //어차피 inputs에서 가져오는 것이 때문에 ...inputs을 사용해도 무관
email,
};
setUsers(users.concat(user)); //기존의 배열을 복사해서 새로운 배열을 만들고 새로운 user 추가되기
setInputs({
//onCreate시 input값 공백으로
username: "",
email: "",
});
nextId.current += 1; //onCreate시 user의 id +1씩
};
return (
<>
<CreateUser
username={username}
email={email}
onChange={onChange}
onCreate={onCreate}
/>
<UserList users={users} />
</>
);
}
export default App;
- 배열을 본격적으로 추가할 경우 PUSH, SORT, SPLICE 사용하면 안된다.
(기존 배열 건들지 말기)
1. spread 연산자 사용하기
기존배열 복사해서 새로운 배열을 만들고 새 배열 붙이기
setUsers([...users, user]);
2. concat 함수 사용하기
여러개의 배열을 하나의 배열로 합치기
setUsers(users.concat(user));
배열에 항목 제거하기 Delete
//user.js
function User({ user, onRemove }) {
//user.id or user.username 등 계속 user을 사용하는 것이 싫다면 추출하기
const { username, email, id } = user;
return (
<div>
<b>{username}</b> <span>{email}</span>
<button onClick={() => onRemove(id)}>remove</button>
</div>
);
}
- onClick 함수의 콜백 함수에 인자를 넘길 시, 바로 호출하지말고 선언해주는 방식 사용하기
const onRemove = (id) => {
setUsers(users.filter((user) => user.id !== id));
};
- filter를 사용해서 불변성 지키기
배열에 항목 수정하기
1. style 적용
function User({ user, onRemove }) {
const { username, email, id, active } = user;
return (
<div>
<b style={{ color: active ? "green" : "black", cursor: "pointer" }}>
{username}
</b>{" "}
<span>{email}</span>
<button onClick={() => onRemove(id)}>remove</button>
</div>
);
}
2. 클릭 시 user의 actiive가 true로 바뀌는 함수
//toggle
const onToggle = (id) => {
setUsers(
users.map(
(user) => (user.id === id ? { ...user, active: !user.active } : user)
//클릭 한 기존 객체 user를 가져와서 user.active의 상태를 반대로 변화 (true, false)
//클릭 하지 않은 user은 그대로
)
);
};
+) 띄어쓰기
'React' 카테고리의 다른 글
[React 강의 노트(4)] 커스텀 Hook 만들기, context API, Immer (0) | 2020.12.15 |
---|---|
[React 강의 노트(3)] Hook - useEffect, useMemo, userCallback, useReducer (0) | 2020.12.13 |
[React 강의 노트(1)] React (0) | 2020.12.09 |
React에서 'onClick' Event 실행해보기 (0) | 2020.12.09 |
Movie-app (0) | 2020.11.26 |