111. 컴포넌트 감싸기(wrapper) 만들기

components 폴더 하위에 Helpers 라는 폴더를 만들고 Wrapper.js 파일을 생성한다 

const Wrapper = props => {
  return props.children;
}

export default Wrapper;

 

그리고 Wrapper.js 파일에 위와 같이 props.children을 통해서 컴포넌트들을 그대로 반환한다.

그리고 UserForm.js에서 Wrapper.js를 import하고 

import Wrapper from '../Helpers/Wrapper';

아래 return 문에서 

return (
    <div>
      {error && <ErrorModal title={error.title} message={error.message} onConfirm={errorHandler} />}
      <Card className="userform__container">
        <form className="userform__inner" onSubmit={addUserInfoHandler}>
          <div className="userform__box">
            <label>Username</label>
            <input type="text" value={userName} onChange={usenameChangeHandler} />
          </div>
          <div className="userform__box">
            <label>Age (Years)</label>
            <input type="number" value={userAge} onChange={useageChangeHandler} />
          </div>
          <Button type="submit">Add User</Button>
        </form>
      </Card >
    </div>
  );

div 대신 Wrapper로 감싸줄 수 있다

  return (
    <Wrapper>
      {error && <ErrorModal title={error.title} message={error.message} onConfirm={errorHandler} />}
      <Card className="userform__container">
        <form className="userform__inner" onSubmit={addUserInfoHandler}>
          <div className="userform__box">
            <label>Username</label>
            <input type="text" value={userName} onChange={usenameChangeHandler} />
          </div>
          <div className="userform__box">
            <label>Age (Years)</label>
            <input type="number" value={userAge} onChange={useageChangeHandler} />
          </div>
          <Button type="submit">Add User</Button>
        </form>
      </Card >
    </Wrapper>
  );

 

그럼 보다시피 불필요한 div가 사라진 것을 알 수 있다
JSX 요구사항을 충족시킬 수 있다

Wrapper.js는 빈 컴포넌트로 props.children 를 반환할 뿐이다.

이렇게 해결하는 간단한 속임수(?)를 살펴보았다.