• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

코드관련 질문입니다.

20.04.21 11:44 작성 조회수 82

0

안녕하세요 강사님. 

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

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개 입니다.

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

좋은 하루 보내세요!!

 

course-thumbnail

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

답변 1

답변을 작성해보세요.

0

John Ahn님의 프로필

John Ahn

지식공유자

2020.04.22

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

이렇게 가능합니다 ^^  

이 글과 비슷한 Q&A