결과
내용
- useReducer 학습
- name과 email을 추가
- name과 email을 수정
- name과 email을 삭제
- name을 클릭하면 색깔 변경
코드
useState 사용
//app.js
function App() {
const [inputs, setInputs] = useState({
username: '',
email: '',
id: '',
});
const { username, email, id } = inputs;
const onChange = e => {
const { name, value } = e.target;
setInputs({
...inputs,
[name]: value,
});
};
const [users, setUsers] = useState([
{
id: 1,
username: 'sumin',
email: 'public.velopert@gmail.com',
active: false,
},
{
id: 2,
username: 'tester',
email: 'tester@example.com',
active: false,
},
{
id: 3,
username: 'liz',
email: 'liz@example.com',
active: false,
},
]);
const nextId = useRef(4);
const onCreate = () => {
const user = {
id: nextId.current,
username,
email,
};
setUsers(users.concat(user));
setInputs({
username: '',
email: '',
});
nextId.current += 1;
};
const onRemove = id => {
setUsers(users.filter(user => user.id !== id));
};
const onToggle = id => {
//id값을 비교해서 다르다면 그대로 두고, 같다면 active 값을 반전시키기
//클릭하면 초록과 검정으로 변경됨
setUsers(
users.map(user =>
user.id === id ? { ...user, active: !user.active } : user
)
);
};
const onModify = users => {
setInputs({
username: users.username,
email: users.email,
id: users.id,
});
};
const onUpdate = () => {
//users에 map을 돌려 같은id가 맞으면 변경하고 아니면 그대로 두기
setUsers(
users.map(user =>
user.id === id ? { ...user, username: username, email: email } : user
)
);
setInputs({
username: '',
email: '',
id: '',
});
};
return (
<div>
<CreateUser
username={username}
email={email}
onChange={onChange}
onCreate={onCreate}
onUpdate={onUpdate}
/>
<UserList
users={users}
onRemove={onRemove}
onToggle={onToggle}
onModify={onModify}
/>
</div>
);
}useReducer 사용
const UserList = ({ users, onRemove, onToggle, onModify }) => {
return (
<div>
{users.map(users => {
return (
<div key={users.id}>
<b
style={{
cursor: 'pointer',
color: users.active ? 'green' : 'black',
}}
onClick={() => onToggle(users.id)}
>
{users.username}
</b>
<span> ({users.email}) </span>
<button onClick={() => onRemove(users.id)}>delete</button>
<button
style={{ backgroundColor: '#C0C0C0' }}
onClick={() => onModify(users)}
>
change
</button>
</div>
);
})}
</div>
);
};
//createUser.js
const CreateUser = ({ username, email, onChange, onCreate, onUpdate }) => {
return (
<div>
<input
placeholder="name"
onChange={onChange}
name="username"
value={username}
/>
<input
placeholder="email"
onChange={onChange}
name="email"
value={email}
/>
<button onClick={onCreate}>push</button>
<button style={{ backgroundColor: '#A0A0A0' }} onClick={onUpdate}>
update
</button>
</div>
);
};//useReducer 사용
function countActive(users) {
console.log('활성 사용자 수를 세는중');
return users.filter(user => user.active).length;
}
//초기화 설정해줄 state
const initialState = {
inputs: {
username: '',
email: '',
id: '',
},
users: [
{
id: 1,
username: 'sumin',
email: 'public.sumin@gmail.com',
active: false,
},
{
id: 2,
username: 'tester',
email: 'tester@example.com',
active: false,
},
{
id: 3,
username: 'liz',
email: 'liz@example.com',
active: false,
},
],
};
//reducer 함수
const reducer = (state, action) => {
switch (action.type) {
case 'CHANGE_INPUT':
return {
...state,
inputs: {
...state.inputs,
[action.name]: action.value,
},
};
case 'CREATE_USER':
return {
inputs: initialState.inputs,
users: state.users.concat(action.user),
};
case 'TOGGLE_USER':
return {
//setUsers가 아닌 users: 으로 접근
...state,
users: state.users.map(user =>
user.id === action.id ? { ...user, active: !user.active } : user
),
};
case 'REMOVE_USER':
return {
...state,
users: state.users.filter(user => user.id !== action.id),
};
case 'MODIFY_USER':
return {
...state,
inputs: {
username: action.users.username,
email: action.users.email,
id: action.users.id,
},
};
case 'UPDATE_USER':
return {
...state,
users: state.users.map(user =>
user.id === state.inputs.id
? {
...user,
username: state.inputs.username,
email: state.inputs.email,
}
: user
),
inputs: initialState.inputs,
};
default:
return state;
}
};
function App() {
const [state, dispatch] = useReducer(reducer, initialState);
const nextId = useRef(4);
//state 에서 필요한 값들을 비구조화 할당 문법을 사용하여 추출하여 각 컴포넌트에게 전달
const { users } = state;
const { username, email, id } = state.inputs;
const onChange = useCallback(e => {
const { name, value } = e.target;
dispatch({
type: 'CHANGE_INPUT',
name,
value,
});
}, []);
const onCreate = useCallback(() => {
dispatch({
type: 'CREATE_USER',
user: {
id: nextId.current,
username,
email,
},
});
nextId.current += 1;
}, [username, email]);
const onToggle = useCallback(id => {
dispatch({
type: 'TOGGLE_USER',
id,
});
}, []);
const onModify = useCallback(users => {
dispatch({
type: 'MODIFY_USER',
users,
});
}, []);
const onRemove = useCallback(id => {
dispatch({
type: 'REMOVE_USER',
id,
});
}, []);
const onUpdate = useCallback(() => {
dispatch({
type: 'UPDATE_USER',
username,
email,
id,
});
}, []);
const count = useMemo(() => countActive(users), [users]);
return (
<>
<CreateUser
username={username}
email={email}
onChange={onChange}
onCreate={onCreate}
onUpdate={onUpdate}
/>
<UserList
users={users}
onToggle={onToggle}
onRemove={onRemove}
onModify={onModify}
/>
<div>활성사용자 수 : {count}</div>
</>
);
}
:D
음,