리액트 공부하기 - 함수 vs 컴포넌트

갑자기 기초가 막 헷갈리기 시작해 ~

오히려 좋아. 공부하는 기쁨 (긍 정)

너 진심이야 ? 어리둥절.

 

---

 

 

프로젝트를 만들다보니. . 코드를 치는 일이 많아졌고

함수랑 컴포넌트가 갑자기 헷갈리기 시작했네요. 

 

둘 다 생김새가 비슷하잖아요 ?

 

function 어쩌구() {
  return()
};

 

like this... 

 

 

 

하지만 차이가 있습니다. 

 

짚고 넘어갑시다.

---

둘 다 JavaScript나 TypeScript에서 function 키워드를 써서 정의할 수 있지만, 역할과 사용 방식이 다름

 

1. 함수 (Function)

• 정의: 특정 동작을 수행하는 코드 덩어리.
• 목적: 계산하거나, 데이터를 처리하거나, 어떤 결과를 반환하는 것이 주 목적
• 사용 예시:

function add(a, b) {
  return a + b;
}

console.log(add(2, 3)); // 출력: 5

• 설명: add는 그냥 숫자 두 개를 더해서 결과를 반환하는 함수야. UI랑은 상관없어.

---

2. 컴포넌트 (Component)

• 정의: 화면(UI)을 그려주는 함수.
• 목적: React 같은 라이브러리에서 사용해서 사용자 인터페이스를 구성해.
• 형식: 보통 첫 글자를 대문자로 쓰고, return 안에서 JSX를 반환해.
• 사용 예시:

function MyButton() {
  return <button>Click me</button>;
}

• 설명: MyButton은 버튼을 화면에 그리는 "컴포넌트"야. JSX 문법(<button>)을 반환하니까 React 컴포넌트로 인식돼.

---

포인트 요약 ✨

 

항목	함수 (Function)	컴포넌트 (Component)
이름 첫 글자	소문자 (보통)	대문자 (필수)
반환값	숫자, 문자열 등 일반 값	JSX (UI 요소)
목적	계산, 로직 처리	UI 표시
사용 위치	일반 로직	React 렌더링 영역에서 사용