📆 날짜

2023/12/08(금)

📚 챕터

함수

---

👨🏻‍💻 학습 내용

🎯 함수

함수란?
작업을 수행하거나 값을 계산하는 등의 과정을 표현하고, 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은것

예제코드를 보며 살펴보자

<script>
function result(num,num2){
 	return num + num2
}
result(5,25)// 30
</script>

함수는 function으로 시작하여 }로 끝나는 부분까지가 함수다.
function 뒤에 오는 result가 함수명
함수의 입력값으로 받는 num , num2 는 각각 매개변수
return 으로 작성된것이 반환값
함수를 호출하는방법은 함수명(매개변수,매개변수);

리액트에서 컴포넌트를 만드는 함수도 이러한 기초적인 형태를 따르는 것을 알 수 있다.

<script>
function Component(props){
 return <div>{props.hello}</div>
}
</script>

위 예제 코드를 살펴보자면
Component라고 하는 함수를 선언하고 매개변수로는 일반적으로 props라고 부르는
단일 객체를 받으며 return문으로 JSX를 반환한다.
일반적인 함수와의 차이점이 있다면

자바크스립트에서는 
Component(pros)형태로 호출하지만 
리액트에서의 함수형 컴포넌트는
<Component hello={props.hello}.../>
와 같이 JSX 문법으로 단일 props별로 받거나
<Component{...props}/>같은 형태로 모든 props를 전개 연산자로 받는다는 차이가 있다.

➡️ 다음은 함수를 정의하는 4가지 방법에 대해 알아보자.