[React] 컴포넌트 wrapper

    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>를 사용하면 더 간단하게 가능!