return (
<Wrapper>
{Error &&
<ErrorModal
title={Error.title}
message={Error.message}
onConfirm={errorHandler}
/> }
<Card cardCustom={style.input}>
<form onSubmit={addUserHandler}>
<label htmlFor="username">이름</label>
<input
type="text"
id='username'
onChange={usernameChange}
value={Username}
/>
<label htmlFor="age">나이</label>
<input
type="number"
id='age'
onChange={ageChange}
value={UserAge}
/>
<Button
type="submit"
children="확인"
/>
</form>
</Card>
</Wrapper>
)
function Wrapper(props) {
return props.children;
}
export default Wrapper
리액트에서 불필요한 div를 덜 생성하기 위해서 Wrapper로 컴포넌트를 감싸줌
import React, { useState, Fragment } from 'react';
return (
<Fragment>
<AddUser
onAddUser={addUserHandler}
/>
<UsersList
users={UserList}
/>
</Fragment>
);
<Fragment>를 사용하면 더 간단하게 가능!
'언어 > React.js' 카테고리의 다른 글
[React] api 설치 (0) | 2023.10.24 |
---|---|
[React] react-router-dom 오류 (2) | 2023.10.17 |
[React] 다운받은 파일 리액트 실행하기 (0) | 2023.10.12 |
[React] 자꾸 까먹어서 쓰는 리액트 깃허브 연동 (0) | 2023.10.10 |
[react]useState() 상태업데이트 (0) | 2023.09.26 |