[지식루프 IT공부] 함수와 컴포넌트 차이

 

1단계: 함수는 계산기 같은 개념입니다.

함수는 입력값을 받아서 결과를 계산해주는 도구입니다.

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

add(2, 3); // 결과: 5

 

 

• add 함수는 두 숫자를 받아서 더한 값을 반환합니다.
• 결과는 숫자 5와 같은 값입니다.

---

2단계: 컴포넌트는 화면을 만드는 틀입니다.

컴포넌트는 화면에 보여줄 내용을 만드는 React 전용 함수입니다.

function Hello() {
  return <h1>안녕!</h1>;
}

• Hello 컴포넌트는 "안녕!"이라는 화면을 보여줍니다.
• 결과는 숫자가 아닌, 화면에 나타나는 HTML 태그 조각입니다.

---

3단계: 함수와 컴포넌트의 비교 표입니다.

구분	함수	컴포넌트
생김새	function 이름(…) {}	function 이름(…) {}
반환 결과	숫자, 문자열 등 일반 값	<div> 같은 화면 요소
용도	계산, 데이터 처리	화면에 표시할 내용 생성
사용하는 곳	일반 자바스크립트 코드에서 사용	React로 웹페이지를 만들 때 사용

---

4단계: 예시 비교입니다.

일반 함수 예시

function sayHi(name) {
  return "안녕, " + name;
}

sayHi("민수"); // 결과: "안녕, 민수"

 

컴포넌트 예시

function SayHi(props) {
  return <h1>안녕, {props.name}</h1>;
}

<SayHi name="민수" />
// 화면에: 안녕, 민수

---

한줄 정리

• 함수는 값을 계산하거나 처리하기 위한 코드입니다.
• 컴포넌트는 화면을 만들기 위해 사용하는 React 전용 함수입니다.