코드관련 질문입니다.

Question

안녕하세요 강사님. 강의 시작에 세팅된 보일러 플레이트를 공부 중에 이해가 좀 어려운 코드를 질문 드리고 싶어 질문을 하게 되었습니다. 1. \client\src\components\views\RegisterPage\RegisterPage.js const formItemLayout = { labelCol : { xs : { span : 24 }, sm : { span : 8 }, }, wrapperCol : { xs : { span : 24 }, sm : { span : 16 }, }, }; xs, sm 이 가지는 숫자의 의미 에 대해서 정확히 알고 싶습니다. 그리고 formItemLayout을 아래 코드에서 < div className = "app" > < h2 > Sign up < Form style = { { minWidth : '375px' } } { ... formItemLayout } onSubmit = { handleSubmit } > < Form.Item required label = "Name" > < Input 이렇게 사용하시던데 이 것의 의미는 어떤 맥락인지 궁금합니다. < Form.Item required label = "Name" > < Input id = "name" placeholder = "Enter your name" type = "text" value = { values . name } onChange = { handleChange } onBlur = { handleBlur } className = { errors . name && touched . name ? 'text-input error' : 'text-input' } /> { errors . name && touched . name && ( < div className = "input-feedback" > { errors . name } ) } ClassName에서와 그 밑에에서 errors.name과 touched.name을 활용한 코드의 용도가 잘 이해가 가질 않네요 ㅠ { props => { const { values , touched , errors , dirty , isSubmitting , handleChange , handleBlur , handleSubmit , handleReset , } = props ; 파일 내에서 이렇게 변수를 선언하는 모습을 보았는데 이건 제가 기존에 보지 못한 선언 방식이라 당황스럽네요 ㅠ 이런 종류의 문법은 JSX만의 문법인 것 인가요? 그리고 위 코드가 무슨 의미인지 알 수 있을까요? 질문은 Bold 처리된 총 4개 입니다. 읽어주셔서 항상 너무 감사드립니다. 좋은 하루 보내세요!!

John Ahn · Answer

1. xs  는  extra small이고   sm 은  small 입니다 !  브라우저 사이즈가 extra small 과   small 일떄는  나타내는것 입니다.  2.  ...    이거는   operator syntax라고      formItemLayout 이 부분을  저곳에 다 넣어주는 역활입니다  저 부분은 스타일을 반응형으로 처리해주는 곳이라고 보면 됩니다.   3.   &&      는     and 를 뜻합니다   그러니깐   errors . name  &&  touched . name ddd  에러네임이 있고  touch된 네임이 있다면  text-input error ㅏ를 하고  아니면      'text-input' 를 한다는 뜻입니다   4. 이건 ES6문법에서 나온  destructuring  입니다 ^^   이부분은  조금씩 적응이 되면 되요 ~    그냥   const hello = this.state.hello  이걸    줄여서   const { hello } = this.state 이렇게 가능합니다 ^^