인프런 커뮤니티 질문&답변
작성한 질문수
AppLayout으로 감싸는 이유가 무엇인가용?
작성
·
276
답변 5
2
제로초(조현영)
지식공유자
취향의 문제는 아니고요. <></>는 자식 태그가 2개 이상일 때만 감싸는 겁니다.
자식 태그가 한개라면 <></>는 아무 의미가 없으므로 안 쓰시는 게 낫습니다.
<></>는 보이는 그대로 빈껍데기입니다. 자식 태그가 2개 이상일 때 묶어주는 역할 이외에는 아무런 역할이 없습니다.
1
제로초(조현영)
지식공유자
아아, 이해했습니다.
리액트는 무조건 부모가 하나여야 돼서 Head와 AppLayout 두 개가 자식인 경우는 가상의 <></>로 묶어주어야 합니다.
사실 Head를 AppLayout 태그 안에 넣어도 돼서 그렇게 한다면
<></> 사용 없이
<AppLayout>
<Head>
</Head>
<다른거></다른거>
</AppLayout>
이렇게 할 수 있습니다.
바깥으로 꺼낸다면
<>
<Head></Head>
<AppLayout></AppLayout>
</>
이고요.
0
송지훈
질문자
답변 감사합니다.
제로초님 말씀은 <AppLayOut> 안에 <Head>가 들어 있어도 상관없어서 <AppLayout>으로 감싸셨고,
하나의 부모 태그는 <></> , <AppLayout></AppLayout> 둘중 하나 취향에 따라 쓰면 되는걸로 이해해도 될 까요?
0
송지훈
질문자
별로 상관없는 건가요??
하나는 <></>
하나는 <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>
0