🤹♂️ 이벤트 핸들러 함수
onClick에 함수 전달, 함수 실행 결과 전달
유난히 머리에 안 들어오는 기본 개념이 몇 있다.
지능이 모자라면 반복해야지.
<input type="text" onClick={(e) => {handleClick(e)}} placeholder="아이디"></input><input type="text" onClick={handleClick(e)} placeholder="아이디"></input><input type="text" onClick={handleClick} placeholder="아이디"></input>1, 2는 같고 3은 다른 건가? 3을 사용할 때는 매개변수를 전달할 수 없고?
➡️ 1과 2는 다르고, 1과 3이 같은 방식이다.
1. onClick={(e) => {handleClick(e)}
- onClick이 실행될 때, handleClick 함수에 (e)라는 이벤트 객체를 전달함.
화살표 함수 () => {handleClick(e)}가 실행되면서 handleClick(e)이 호출됨. - 결과 : 클릭하면 handleClick이 호출됨.
2. onClick={handleClick(e)}
- 문제점 : handleClick(e)를 바로 실행하는 코드.
- onClick에 함수 자체가 전달되는 것이 아니라, handleClick(e)의 실행 결과가 들어감.
- e는 정의되지 않은 상태이므로, 오류가 발생할 가능성이 큼.
- 결과 : 오류가 발생하거나, 페이지 로드 시점에 handleClick이 실행됨.
3. onClick={handleClick}
- handleClick 함수 자체를 onClick에 전달함.
- React가 내부적으로 클릭 이벤트가 발생하면 자동으로 이벤트 객체 e를 handleClick(e)로 전달함.
- 결과 : 클릭하면 handleClick(e)이 실행됨.
매개변수 전달
3번 방식에서는 onClick={handleClick}으로 함수 자체를 넘기기 때문에,
매개변수를 직접 전달할 수 없고, 만약 특정 값을 함께 넘기고 싶다면,
1번처럼 화살표 함수를 활용해야 한다.
🖥️ jsx
<input type="text" onClick={(e) => handleClick(e, '추가 매개변수')} placeholder="아이디"></input>위 방식을 통해 handleClick 함수가 e뿐만 아니라 '추가 매개변수'도 받을 수 있다.
화살표 함수는 함수 실행이 아닌가?
➡️ 화살표 함수 자체는 실행이 아니라 함수를 정의하는 것이다.
함수 실행 vs 함수 전달
함수 실행 (handleClick(e))
onClick={handleClick(e)}handleClick(e)는 함수 실행이다.
즉, 이 코드가 실행될 때 handleClick이 즉시 호출되고, 그 반환값이 onClick에 들어가게 된다.
하지만 onClick은 함수가 필요한 것이지, 함수 실행 결과를 필요로 하지 않는다.
그래서 이 방식은 제대로 작동하지 않거나 에러를 일으킬 수 있다.
함수 전달 (onClick={handleClick})
onClick={handleClick}handleClick이라는 함수 자체를 onClick에 전달하는 방식.
이 경우, 브라우저가 onClick 이벤트가 발생할 때 자동으로 handleClick(e)을 실행하면서 e(이벤트 객체)를 넘겨준다.
화살표 함수 (() => {})
화살표 함수는 실행이 아니라 함수를 "정의"하는 것
onClick={(e) => handleClick(e)}이것은 handleClick(e)를 즉시 실행하는 게 아님!
(e) => handleClick(e) 자체가 하나의 새로운 함수이고,
이 함수를 onClick에 전달하는 것.
따라서 클릭하면 React가 이 화살표 함수를 실행 → 그 안에서
handleClick(e)이 실행됨.
➡️ 결론
onClick={handleClick(e)} → 잘못된 코드! 실행 결과를 넘겨버림 ❌
onClick={handleClick} → 올바른 코드! 함수 자체를 전달함 ⭕
onClick={(e) => handleClick(e)} → 매개변수를 넘기고 싶을 때 사용 ⭕
화살표 함수 없이 매개변수 전달하기
화살표 함수 대신 bind를 사용 가능.
onClick={handleClick.bind(null, '추가 매개변수')}이 방식은 handleClick을 미리 특정 매개변수와 묶어놓고, 클릭 시 실행되게 함.
null은 this를 지정하는 자리인데, 일반적인 경우 null을 넣으면 됨.
(대부분의 경우 화살표 함수를 쓰는 게 더 직관적이다)
♻️ API
API란? (Application Programming Interface)
API는 Application Programming Interface의 약자로,
쉽게 말하면 프로그램 간의 소통을 돕는 인터페이스라고 할 수 있다.
왜 "Application Programming Interface"라고 할까?
- Application : 소프트웨어, 즉 응용 프로그램
- Programming : 프로그래머가 개발할 때 사용
- Interface : 서로 다른 시스템이나 소프트웨어가 소통할 수 있도록 연결하는 역할
➡️ 즉, API는 "하나의 프로그램이 다른 프로그램과 상호작용할 수 있도록 도와주는 인터페이스"라는 의미에서 이렇게 불린다.
프론트엔드 개발자가 API를 호출하면?
프론트엔드(예: React, Vue, HTML+JavaScript)에서 API를 호출하면 백엔드 서버에 요청을 보내고, 그에 대한 응답을 받는 과정이 일어난다.
1. API 요청 과정
사용자가 버튼을 클릭하거나 특정 이벤트가 발생
프론트엔드에서 fetch() 또는 axios 같은 함수를 사용해 백엔드에 요청을 보냄
🖥️ fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));요청이 HTTP 프로토콜을 통해 백엔드 서버로 전달됨
서버는 해당 요청을 처리하고, 필요한 데이터를 데이터베이스(DB)에서 가져옴
서버가 데이터를 JSON 형식으로 응답(Response)하여 프론트엔드에 반환
2. API 응답 과정
프론트엔드가 서버로부터 응답을 받음
응답 데이터를 파싱하고 화면에 업데이트
🖥️ fetch('https://api.example.com/data')
.then(response => response.json()) // JSON 형식으로 변환
.then(data => {
document.getElementById('content').innerText = data.message; // UI 업데이트
});사용자는 화면에서 최신 정보를 확인 가능
API의 역할
API는 프론트엔드와 백엔드가 서로 통신할 수 있도록 돕는 가교 역할.
프론트엔드는 사용자 인터페이스(UI)를 담당하고
백엔드는 데이터 처리 및 로직을 담당
API는 이 둘이 정보를 주고받도록 중간에서 연결
API의 종류
- REST API : HTTP 기반의 가장 일반적인 API 방식 (GET, POST, PUT, DELETE 메서드 사용)
- GraphQL API : 클라이언트가 원하는 데이터만 요청할 수 있는 방식
- WebSocket API : 실시간 데이터 전송이 필요한 경우(예: 채팅, 게임)
API 호출 시스템 비유
📦 배달 주문 시스템과 유사하다.
사용자(프론트엔드) : 배달 음식을 주문
API : 주문을 주방(백엔드)으로 전달하는 역할
주방(백엔드) : 주문을 받고 음식을 조리한 후 배달
배달원(API) : 음식을 사용자에게 전달
➡️ 사용자는 API를 통해 원하는 데이터를 요청하고, 서버는 API를 통해 데이터를 응답하는 구조
