코드관련 질문입니다.

안녕하세요 강사님.

강의 시작에 세팅된 보일러 플레이트를 공부 중에 이해가 좀 어려운 코드를 질문 드리고 싶어 질문을 하게 되었습니다.

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</h2>
            <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}</div>
                )}
              </Form.Item>

ClassName에서와 그 밑에에서 errors.name과 touched.name을 활용한 코드의 용도가 잘 이해가 가질 않네요 ㅠ

      {props => {
        const {
          values,
          touched,
          errors,
          dirty,
          isSubmitting,
          handleChange,
          handleBlur,
          handleSubmit,
          handleReset,
        } = props;

파일 내에서 이렇게 변수를 선언하는 모습을 보았는데 이건 제가 기존에 보지 못한 선언 방식이라 당황스럽네요 ㅠ 이런 종류의 문법은 JSX만의 문법인 것 인가요? 그리고 위 코드가 무슨 의미인지 알 수 있을까요?

질문은 Bold 처리된 총 4개 입니다.

읽어주셔서 항상 너무 감사드립니다.

좋은 하루 보내세요!!

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

이렇게 가능합니다 ^^

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