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

Question

<> ... ... <> 이렇게 감싸는 거랑 다른 점이 무엇인가요? profile도 이러한 형식으로 햇는데 signup.js만 AppLayout으로 전체를 감싼 의도가 무엇인지 알고싶습니다. 강의는 너무 유익하게 보고 있습니다.

제로초(조현영) · Answer

취향의 문제는 아니고요. <>는 자식 태그가 2개 이상일 때만 감싸는 겁니다. 자식 태그가 한개라면 <>는 아무 의미가 없으므로 안 쓰시는 게 낫습니다. <>는 보이는 그대로 빈껍데기입니다. 자식 태그가 2개 이상일 때 묶어주는 역할 이외에는 아무런 역할이 없습니다.

제로초(조현영) · Answer

아아, 이해했습니다. 리액트는 무조건 부모가 하나여야 돼서 Head와 AppLayout 두 개가 자식인 경우는 가상의 <>로 묶어주어야 합니다. 사실 Head를 AppLayout 태그 안에 넣어도 돼서 그렇게 한다면 <> 사용 없이 <다른거> 이렇게 할 수 있습니다. 바깥으로 꺼낸다면 <> 이고요.

송지훈 · Answer

답변 감사합니다. 제로초님 말씀은 안에 가 들어 있어도 상관없어서 으로 감싸셨고, 하나의 부모 태그는 <> , 둘중 하나 취향에 따라 쓰면 되는걸로 이해해도 될 까요?

송지훈 · Answer

별로 상관없는 건가요?? 하나는 <> 하나는 으로 감싸져 있어서 무슨 의미가 있는지 궁금해서 질문 드렸습니다. < AppLayout > < Head > < title > Signup | NodeBird < Form onFinish = { onSubmit } > < div > < label htmlFor = "user-email" > 이메일 < br /> < Input name = "user-email" value = { email } required onChange = { onChangeEmail } type = "email" /> < div > < label htmlFor = "user-nickname" > 닉네임 < br /> < Input name = "user-nickname" value = { nickname } required onChange = { onChangeNickname } /> < div > < label htmlFor = "user-password" > 비밀번호 < br /> < Input name = "user-password" value = { password } type = "password" required onChange = { onChangePassword } /> < div > < label htmlFor = "user-passwordCheck" > 비밀번호체크 < br /> < Input name = "user-passwordCheck" value = { passwordCheck } type = "password" required onChange = { onChangePasswordCheck } /> { passwordError && ( < ErrorMessage > 비밀번호가 일치하지 않습니다. ) } < div > < Checkbox name = "user-term" checked = { term } onChange = { onChangeTerm } > 회원가입 약관에 동의합니다. { termError && < ErrorMessage > 약관에 동의하셔야 합니다. } < div style = { { marginTop : 10 } } > < Button type = "primary" htmlType = "submit" loading = { signUpLoading } > 가입하기

제로초(조현영) · Answer

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