배열에 항목 추가하기(CREATE)
일단 작업들을 rudiments 로 깃에 추가했다.
main 브랜치에 계속 커밋하면 될듯 하다(학습이니까)
이제 리액트에서 매우 중요한 CRUD 작업을 해야하는데
생활코딩 님의 CRUD 는 if 문을 써서 state로 현재 CRUD 중 어느 작업중인지를 파악 한 뒤,
각 작업단계에 맞게 content가 가지는 DOM 요소를 다르게 만들었다.
velopert 는 좀 다르게 정적으로 모든 요소가 다 나와있어서 DOM 요소가 확확 변하게는 안하는 것 같다.
생활코딩에서 만든 게 component 가 너무 분잡해서 그거 정리작업도 해야한다.
.
.
배열에 항목 추가는 CreateUser라는 컴포넌트에서 담당하고 가장 상단이다.
이런느낌
.
계정명과 이메일에 모두 onChange 주고 username과 email 이 타이핑한것에 따라 동적으로 변하게 설정해두고
const CreateUser=({username, email, onChange, onCreate})=>{
return(
<div>
<input type="text" name="username" placeholder='계정명' onChange={onChange
} value={username} />
<input type="text" name="email" placeholder='이메일' onChange={onChange
} value={email} />
<button onClick={onCreate}>등록</button>
</div>
)
}버튼에 onCreate를 두고 현재 state의 username,email 값으로 UserList 를 업데이트해 재생성 시킨다.
const onCreate=()=>{
const user = {
id: nextId.current,
username,
email,
active:false,
};
setUsers([...users,user]);
setInputs({username: '', email: ''});
nextId.current++;
}
id는 ref로 관리하고, setUsers([...users,user]);가 특이한데,
배열의 불변성을 지키면서 업데이트를 하기 위해서는 push같은 함수보다, 이미 있는 users 배열 뒤에 create 된 user 를 넣는 방식으로 한다.(불변성 지켜야 하는 이유는 재랜더링 시 최적화를 위함)
.
.
immutable.js(https://immutable-js.com/)라는 라이브러리 사용하면 배열같지만 배열이 아닌 배열 형태의 자료형을 사용할 수 있는데, 이 자료형의 수정은 불변성을 지키면서 일어난다고 하니 나중에 써먹어보자.
.
.
그리고 props 받을 때 구조할당 써서 props.으로 key로 접근하지 말고 {a,b}={A,B} 형식으로 바로 할당하는게 보기도 쉽고 좋은것 같다.
예시 :
const CreateUser=({username, email, onChange, onCreate})=>{
return(
<div>
...
</div>
)
}배열의 항목 제거하기(DELETE)
delete는 User 컴포넌트에 onRemove라는 delete 함수를 prop으로 주면서 항목 삭제를 구현한다. button 을 누르면 user.id를 파라미터로 가지는 onRemove가 실행되면서 해당 User component 가 삭제되게 구현한다.(delete component 를 따로 만들진 않는다.)
그래서 옆에 삭제 버튼이 항목마다 다 붙어있다.
const onRemove=id=>{
setUsers(users.filter(user=>user.id !== id));
}onRemove는 매우 간단한데, filter 라는 배열 prototype 내장함수를 사용한다.
filter 안의 콜백함수는 true 를 만족하는 요소만 남겨둔다.
그래서 users.filter(user=>user.id !== id)는 해당 id와 다른 요소들을 남기는 것이니 결국 같은 id를 제거하는 것이다. 이 또한 불변성을 유지하면서 배열을 update 한다.
배열 항목 수정하기(UPDATE)
update는 올린 User를 수정하는 것 인줄 알았지만, 그냥 클릭한 name 요소의 색을 바꾸는 것으로 대체한다.
클릭 했을 때 active 라는 프로퍼티 값을 원래 값의 !(반대) 로 바꾸게 핸들링 한다.
const onToggle=id=>{
setUsers(
users.map(user=>
user.id===id ? {...user,active : !user.active}:user
)
)
}onToggle 함수는 이렇고, 누른 요소의 id 를 받아서 그 id를 가진 user는 active 를 바꿔주고, 아닌 user는 그대로 둔다.
삼항연산자 사용하는데, user.id===id ? {...user,active : !user.active}:user
는 user.id가 id 이면 user를 복사한 오브젝트에서 active 프로퍼티를 수정해주고 아니면 그냥 둔다는 뜻이다. (,가 있고 그 뒤에는 참조할 프로퍼티가 오는 듯 하다)
이거 익숙해져야 할 것 같다. 훨씬 간단해지고 좋은 것 같다.
카운트는
const countActiveUsers=(users)=>{
console.log('활성 사용자 수 세는중')
return users.filter(user=>user.active).length;
}이런 식으로 users 를 받아서 filter 함수를 통해 active인 user 만 모은 array 를 추가로 만들고 그것의 length 를 반환하는 식으로 구성한다.
SO
이런 느낌으로 CRUD 를 할 수 있다.
다음 시간에는 useState 말고 다른 훅으로 어떻게 이 구성을 최적화하는지 배울 것 같다.
파이팅~
