-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
컴포넌트 부모 태그
23.08.10 02:31 작성 조회수 232
0
안녕하세요! 좋은 수업 잘 듣고 있습니다 :)
props로 컴포넌트를 받는 Container 컴포넌트에 대해 질문이 있습니다!
JSX 규칙 중에 모든 컴포넌트는 부모 태그를 가지고 있어야 한다고 말씀해주셨는데 아래 코드처럼 Container는 부모 태그가 없이도 잘 동작하기에 이유가 무엇인지 궁금합니다!
function App() {
const counterprops = {
a : 1,
b : 2,
c : 3,
d : 4,
initialVaule : 5,
};
return ( // HTML을 반환
<Container>
<div className="App">
<Counter {...counterprops}/>
</div>
</Container>
);
}또한
function App() {
const counterprops = {
a : 1,
b : 2,
c : 3,
d : 4,
initialVaule : 5,
};
return ( // HTML을 반환
<div className="App">
<Container>
<Counter {...counterprops}/>
</Container>
</div>
);
}이렇게 코드를 짜면 동작하지 않더라구요!
왜 첫번째 코드는 동작하고, 두번째 코드는 동작하지 않는지 궁금합니다!
감사합니다.
답변을 작성해보세요.
0
유호준
질문자2023.08.10
앗 제가 컴포넌트에 부모 태그가 있어야 한다는 것을 잘못이해하고 있었던 것 같습니다 ㅠ
제가 처음에 이해했던 것은
function App() {
const counterprops = {
a : 1,
b : 2,
c : 3,
d : 4,
initialVaule : 5,
};
return (
<div className="App">// 2-2. 이게(부모태그) 필요
<Container> // 2-1. 이게(부모태그) 필요 / 1-2. Container를 넣을때
<Counter {...counterprops}/> // 1-1. Counter를 넣을때
</Container>
</div>
);
}이런 식으로 "부모 컴포넌트(App)에 자식 컴포넌트(Counter)를 넣을 때" 부모 컴포넌트 return 문 내에서 자식 컴포넌트를 감싸는 부모태그가 있어야 한다고 이해했습니다.
현재 이해한 것은
function App() {
const counterprops = {
a : 1,
b : 2,
c : 3,
d : 4,
initialVaule : 5,
};
return ( // HTML을 반환
<div className="App"> 2. 이런 최상위 부모태그가 필요
// 1. 여기 코드를 리턴하려면
</div>
);
}"컴포넌트를 생성할 때" 즉, App 컴포넌트를 만들 때라고 가정하면, <div className="App"></div> 이렇게 최상위 부모 태그를 만들고 그 안에 return할 코드를 넣어줘야 한다는 점입니다.
제가 두 번째로 이해한 부분이 맞는 것인가요??
이정환 Winterlood
지식공유자2023.08.11
안녕하세요 이정환입니다.
우선 컴포넌트 내부의 최상위 태그는 꼭 HTML 태그일 필요는 없습니다. 리액트 컴포넌트여도 무방합니다.
따라서 다음과 같이도 작성 가능합니다
function App() {
const counterprops = {
a : 1,
b : 2,
c : 3,
d : 4,
initialVaule : 5,
};
return (
<Container> // 최 상위 태그
<Counter {...counterprops}/> // children Props
</Container>
);
}0
이정환 Winterlood
지식공유자2023.08.10
안녕하세요 이정환입니다.
우선 위에 보내주신 코드의 경우 App 컴포넌트의 return문 내부에서는
Container 컴포넌트가 최 상위 부모 태그가 되어서 정상적으로 작동하는 걸로 보입니다.
물론 Container 컴포넌트와 Counter 컴포넌트의 내부 구현을 보지 못했기 때문에 어떻게 동작하는지는 알 수 없지만요
질문중에 Container 컴포넌트가 부모 태그가 없다고 말씀해주셨는데요 잘 이해가 되지 않습니다. 혹시 다시 한번 설명을 부탁드려도 괜찮을까요?
또 그 아래의 코드가 동작하지 않는 이유는 보내주신 코드만 봐서는 오류의 원인을 정확히 파악하기 어렵습니다 😢 전체 프로젝트 코드를 코드샌드박스에 담아 보내주시면 원인을 파악할 수 있을것 같습니다.
답변 2