Inflearn Community Q&A

thdwlgnsl1225

asked

[Renewal] Creating NodeBird SNS with React

Creating a membership registration page (custom hook)

AppLayout으로 감싸는 이유가 무엇인가용?

Written on

273

<Head>

...

</Head>

이렇게 감싸는 거랑 다른 점이 무엇인가요?

profile도 이러한 형식으로 햇는데

signup.js만

AppLayout으로 전체를 감싼 의도가 무엇인지 알고싶습니다.

강의는 너무 유익하게 보고 있습니다.

reduxreactnodejsexpressNext.js

Answer 5

zerocho

Instructor

취향의 문제는 아니고요. <></>는 자식 태그가 2개 이상일 때만 감싸는 겁니다.

자식 태그가 한개라면 <></>는 아무 의미가 없으므로 안 쓰시는 게 낫습니다.

<></>는 보이는 그대로 빈껍데기입니다. 자식 태그가 2개 이상일 때 묶어주는 역할 이외에는 아무런 역할이 없습니다.

zerocho

Instructor

아아, 이해했습니다.

리액트는 무조건 부모가 하나여야 돼서 Head와 AppLayout 두 개가 자식인 경우는 가상의 <></>로 묶어주어야 합니다.

사실 Head를 AppLayout 태그 안에 넣어도 돼서 그렇게 한다면

<></> 사용 없이

이렇게 할 수 있습니다.

바깥으로 꺼낸다면

<>
<Head></Head>
<AppLayout></AppLayout>
</>

이고요.

thdwlgnsl1225

Questioner

답변 감사합니다.

제로초님 말씀은 <AppLayOut> 안에 <Head>가 들어 있어도 상관없어서 <AppLayout>으로 감싸셨고,

하나의 부모 태그는 <></> , <AppLayout></AppLayout> 둘중 하나 취향에 따라 쓰면 되는걸로 이해해도 될 까요?

thdwlgnsl1225

Questioner

별로 상관없는 건가요??

하나는 <></>

하나는 <AppLayout></AppLayout>으로 감싸져 있어서 무슨 의미가 있는지 궁금해서 질문 드렸습니다.

<AppLayout>
      <Head>
        <title>Signup | NodeBird</title>
      </Head>
      <Form onFinish={onSubmit}>
        <div>
          <label htmlFor="user-email">이메일</label>
          <br />
          <Input
            name="user-email"
            value={email}
            required
            onChange={onChangeEmail}
            type="email"
          />
        </div>
        <div>
          <label htmlFor="user-nickname">닉네임</label>
          <br />
          <Input
            name="user-nickname"
            value={nickname}
            required
            onChange={onChangeNickname}
          />
        </div>
        <div>
          <label htmlFor="user-password">비밀번호</label>
          <br />
          <Input
            name="user-password"
            value={password}
            type="password"
            required
            onChange={onChangePassword}
          />
        </div>
        <div>
          <label htmlFor="user-passwordCheck">비밀번호체크</label>
          <br />
          <Input
            name="user-passwordCheck"
            value={passwordCheck}
            type="password"
            required
            onChange={onChangePasswordCheck}
          />
          {passwordError && (
            <ErrorMessage>비밀번호가 일치하지 않습니다.</ErrorMessage>
          )}
        </div>
        <div>
          <Checkbox name="user-term" checked={term} onChange={onChangeTerm}>
            회원가입 약관에 동의합니다.
          </Checkbox>
          {termError && <ErrorMessage>약관에 동의하셔야 합니다.</ErrorMessage>}
        </div>
        <div style={{ marginTop: 10 }}>
          <Button type="primary" htmlType="submit" loading={signUpLoading}>
            가입하기
          </Button>
        </div>
      </Form>
    </AppLayout>

zerocho

Instructor

profile이랑 signup이랑 index랑 다 AppLayout으로 감싸져 있습니다. signup만 감싸져있다고 하신게 무슨 의미인지를 모르겠습니다.

thdwlgnsl1225

asked

Ask a question