[React] Component

Component

컴포넌트란 블록이고 결국 함수이다. 또한 화면을 구성하는 또 하나의 단위.
👉 ' 컴포넌트를 만들어 보세요 ' => html을 return 하는 함수를 만들면 됨.

• 컴포넌트(함수) 코드를 볼 때는 영역을 나누어서 본다.
  컴포넌트 밖에서는 내가 필요한 파일을 import 하거나, 또는 export default 라는 기능을 통해 내가 만든 컴포넌트를 밖으로 내보내는 코드가 있다.

❗️ 반드시 주의해야 할 점

• 컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자로 만든다. 🔥
• 폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓는다.

❓ 클래스형 컴포넌트는 무엇이고, 함수형 컴포넌트와 무엇이 다른가?

• 요즘은 '클래스'보단 '함수형 컴포넌트+HOOK'을 사용

클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로직을 갖고 있는 반면,

함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려준다. Hook들을 필요한 곳에 사용하며 Logic의 재사용이 가능하다는 장점이 있어 함수형 컴포넌트+Hook을 주로 사용

참고 및 출처

태어난김에 개발자
C_yJ.velog

부모와 자식관계에 놓인 컴포넌트

// src/App.js
import React from "react";

function Child() {
  return <div>나는 자식입니다.</div>;
}

function App() {
  return <Child />;
}

export default App;

👉 화면에 '나는 자식입니다' 라는 문장이 보이게 됨. 내보내진 (export default) 컴포넌트는 Child 컴포넌트를 자식으로 삼기때문.
👉 마치 HTML 태그를 쓰듯이 사용하여 화면에 보여지게 할 수 있다 = Rendering
👉 함수로 만들어진 컴포넌트를 마치 html 태그 사용하듯이 코드를 작성하는 방식 = JSX