인프런 커뮤니티 질문&답변

앗 제가 컴포넌트에 부모 태그가 있어야 한다는 것을 잘못이해하고 있었던 것 같습니다 ㅠ

• 제가 처음에 이해했던 것은

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할 코드를 넣어줘야 한다는 점입니다.

제가 두 번째로 이해한 부분이 맞는 것인가요??

안녕하세요 이정환입니다.

우선 위에 보내주신 코드의 경우 App 컴포넌트의 return문 내부에서는
Container 컴포넌트가 최 상위 부모 태그가 되어서 정상적으로 작동하는 걸로 보입니다.
물론 Container 컴포넌트와 Counter 컴포넌트의 내부 구현을 보지 못했기 때문에 어떻게 동작하는지는 알 수 없지만요

질문중에 Container 컴포넌트가 부모 태그가 없다고 말씀해주셨는데요 잘 이해가 되지 않습니다. 혹시 다시 한번 설명을 부탁드려도 괜찮을까요?

또 그 아래의 코드가 동작하지 않는 이유는 보내주신 코드만 봐서는 오류의 원인을 정확히 파악하기 어렵습니다 😢 전체 프로젝트 코드를 코드샌드박스에 담아 보내주시면 원인을 파악할 수 있을것 같습니다.