인프런 커뮤니티 질문&답변

꺼넝님의 프로필 이미지

작성한 질문수

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

댓글 쓰기 화면 및 API 구현

antd로 회원가입 폼을 만들때 질문입니다

해결된 질문

23.03.24 01:32 작성

·

246

·

수정됨

0

<Form.Item

 label="아이디"

name="username"

rules={[{ required: true, message: "Please input your username!" }]} //rules을 통해 유효성검사로직이 들어가 잇다

//hasFeedback //username의 끝 부분에 체크표시?

{...fieldErrors.username} 

>

<Input />

위의 코드에서 {...fieldErrors.username} 은 spread한 것을 하나의 오브젝트로 {validateStatus: "error", help: "User with this username already exists."} 이렇게 구성되어 있는걸로 이해가 되는데 form.item에서는 각 항목마다 쉼표도 없이 그냥 띄어쓰기로 속성을 정의하는데 {...fieldErrors.username}이렇게 표현한 것이 어떻게 바로 속성으로 적용되는지 궁금해서 질문드립니다!

답변 1

0

이진석님의 프로필 이미지
이진석
지식공유자

2023. 03. 24. 13:11

안녕하세요.

이는 말씀하신것처럼 객체의 Spread 문법입니다.

props = { b: 2, c: 3 }; 값이 있을 때, 아래와 같이 spread 문법으로 props 적용하시면

<Component a={1} {...props} />

Component 컴포넌트 입장에서는 아래와 같이 속성값이 주어진 것과 같습니다.

<Component a={1} b={2} c={3} />

코드가 복잡해보이지만, 위 코드와 똑같은 문법을 활용했습니다.

차근차근 살펴보시고, 댓글 남겨주세요.

화이팅입니다. :-)


MDN에서의 관련 문법 소개 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax#%EA%B0%9D%EC%B2%B4_%EB%A6%AC%ED%84%B0%EB%9F%B4%EC%97%90%EC%84%9C%EC%9D%98_%EC%A0%84%EA%B0%9C

꺼넝님의 프로필 이미지

작성한 질문수

질문하기