React - 리액트의 핵심 개념 컴포넌트Component) 이해하기

리액트는 모든것들을 컴포넌트라는 단위로 구성한다

-컴포넌트는 무조건 하나의 엘리먼트만 리턴한다

이게 뭔말인데?

아니 시발 왜 엘리먼트라 말하는데?

ai의 설명

"컴포넌트는 무조건 하나의 엘리먼트만 리턴한다"는 말은 리액트 컴포넌트가 반환하는 JSX 코드의 최상위 레벨에서는 반드시 하나의 요소(Element)로 감싸져 있어야 한다는 의미입니다. 

이게 뭔 말이냐면:

• 잘못된 예 (여러 개의 최상위 엘리먼트):
  jsx

  function MyComponent() {
    // return 문 안에 최상위 엘리먼트가 <div>와 <p> 두 개
    return (
      <div>안녕하세요</div>
      <p>반갑습니다</p> 
    );
  }
  

  위 코드는 자바스크립트 문법상 유효한 객체를 하나만 반환해야 한다는 규칙에 어긋나기 때문에 오류가 발생합니다.
• 올바른 예 (하나의 최상위 엘리먼트):
  jsx

  function MyComponent() {
    // return 문 안에 모든 내용을 감싸는 최상위 <div> 하나
    return (
      <div>
        <div>안녕하세요</div>
        <p>반갑습니다</p>
      </div>
    );
  }
  

   

"왜 엘리먼트라 말하는데?"

리액트에서 **엘리먼트(Element)**는 UI를 구성하는 가장 작은 단위이며, 화면에 표시될 내용을 기술하는 단순한 자바스크립트 객체입니다. 

• **컴포넌트(Component)**는 이러한 엘리먼트들을 조합하여 재사용 가능한 형태로 만든 함수 또는 클래스입니다.
• 즉, 컴포넌트는 "어떻게 보여질지"를 정의하고, 그 결과로 "화면에 그려질 것"인 엘리먼트를 반환하는 것입니다. 

결론적으로, 컴포넌트가 **하나의 '엘리먼트'**를 반환해야 하는 이유는 자바스크립트 함수가 return 시 **하나의 값(객체)**만 반환할 수 있다는 기본적인 언어적 제약 때문이며, 리액트는 이 하나의 객체를 바탕으로 가상 DOM 트리를 효율적으로 구성하고 관리합니다. 

참고로, 여러 엘리먼트를 반환하고 싶을 때는 <></> (Fragment)를 사용하여 실제 DOM에는 추가되지 않는 가상의 최상위 엘리먼트로 감쌀 수 있습니다. 

App.jsx처럼 html태그를 리턴하면 컴포넌트다

-컴포넌트는 무조건 대문자로 시작하는 파스칼 표기법이다

리액트는 단위를 html로 작성하는게 아니라

여러 컴포넌트를 조립해서 하나의 html문서를 만드는 이미지를 

떠올라라

Header, Test처럼 다른 컴포넌트의 리턴문 내부에서 정의후 사용하는 컴포넌트를 

자식 컴포라하고

다른 컴포넌트를 포함하는 컴포넌트는 부모 컴포넌트라 한다

컴포넌트는 함수형과 클래스형 두가지가 있다

주로 함수로 많이 만든다

React = component모임 

이라고 이해해도 무방하다

컴포넌트는 단위다!!!

아미 1cm 1m처럼 하나의 단위다

1엄복동

html에서는 div태그가 있듯이

리액트에서는 component가 있다

html의 div태그

vs

리액트의 component

리액트(React)에서 컴포넌트(Component)는 사용자 인터페이스(UI)를 구성하는 독립적이고 재사용 가능한 단위입니다. 사용자가 말씀하신 것처럼 HTML의 div 태그와 같이 화면을 구성하는 요소 중 하나이지만, 단순한 태그 이상의 의미를 갖습니다. 

주요 특징은 다음과 같습니다.

• 단위화: 웹 페이지의 특정 부분을 캡슐화하여 독립적으로 관리할 수 있게 해줍니다. (예: 헤더, 푸터, 사이드바, 버튼 등)
• 재사용성: 한 번 만든 컴포넌트를 여러 곳에서 반복적으로 사용하여 코드의 효율성을 높일 수 있습니다.
• 계층 구조: 컴포넌트들이 트리 구조로 조합되어 복잡한 UI를 구성합니다.
• 데이터 관리: 컴포넌트는 자신만의 상태(state)나 속성(props)을 가지고 데이터를 관리하고 표현할 수 있습니다. 

HTML이 웹 문서의 구조를 정의한다면, 리액트의 컴포넌트는 동적인 웹 애플리케이션의 구조와 동작을 정의하는 기본 빌딩 블록이라고 할 수 있습니다.

리액트에서  모듈 과 컴포넌트는?

리액트에서

모듈 컴포넌트는?

자바의 라이브러리 클래스와 각각 대응된다

둘을 비교해보자

https://velog.io/@spolice/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC

https://medium.com/amhocode/react-%EC%9E%85%EB%AC%B8%EC%9E%90%EB%9D%BC%EB%A9%B4-%EA%BC%AD-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-%EA%B8%B0%EC%B4%88-%EA%B0%9C%EB%85%90-5%EA%B0%80%EC%A7%80-component-props-state-life-cycle-lifting-state-up-95a416241ffe

https://jeonghwan-kim.github.io/series/2021/04/08/lecture-react-intro.html