[TIL] 리액트 필수 개념 정리: 콜백 함수, 캡슐화, AJAX

오늘 학원에서 리액트 수업을 듣다 보면 콜백 함수, 캡슐화, AJAX 같은 용어들이 쉴 새 없이 튀어나온다. 대충 무슨 뜻인지는 알 것 같으면서도, 막상 "그게 뭐야?"라고 물어보면 설명하기 턱 막히는 개념들이다.

오늘은 이 헷갈리는 핵심 개념 3가지를 비유와 함께 확실히 정리해보고, 지금 배우고 있는 **리액트(React)**와는 어떤 관계가 있는지 기록해 둔다.

---

1. 콜백 함수 (Callback Function)

한 줄 요약: "나중에 실행해달라고 맡겨놓는 함수"

함수를 바로 실행하는 게 아니라, 다른 함수한테 인자(Argument)로 넘겨주는 함수를 말한다. 보통 "이 작업이 끝나면 실행해 줘"라거나 "클릭되면 실행해 줘" 같은 상황에서 쓰인다.

• 쉬운 비유: 음식점 진동벨
  • 음식을 주문하고 진동벨을 받는다.
  • 주방에서 요리가 완성되면 진동벨을 울린다(콜백 실행).
  • 손님은 진동벨이 울리기 전까지 폰을 보거나 멍 때릴 수 있다(비동기적 대기).
• 언제 쓰나?
  • 파일 읽기나 데이터 다운로드처럼 시간이 걸리는 작업이 끝난 뒤.
  • 버튼 클릭 같은 이벤트가 발생했을 때.

---

2. 캡슐화 (Encapsulation)

한 줄 요약: "중요한 건 숨기고, 필요한 버튼만 꺼내놓는 것"

객체 지향 프로그래밍(OOP)의 핵심이다. 데이터(변수)와 기능(메서드)을 하나로 묶고, 외부에서 중요 데이터를 함부로 건드리지 못하게 보호하는 것이다. Java에서 private 키워드를 쓰는 이유다.

• 쉬운 비유: TV 리모컨
  • 우리는 리모컨 버튼만 누르면 채널을 바꿀 수 있다.
  • 리모컨 내부 회로가 어떻게 생겼는지 알 필요도 없고, 직접 만져서 고장 낼 위험도 없다. (내부 구현 은닉)
• 언제 쓰나?
  • 회원 정보, 계좌 잔액 등 보호해야 할 데이터를 다루는 클래스를 만들 때.
  • 데이터가 이상하게 변하는 것(예: 나이가 -5살)을 막기 위해.

---

3. AJAX (Asynchronous JavaScript And XML)

한 줄 요약: "새로고침 없이 서버와 몰래 통신하기"

웹 페이지 전체를 다시 로딩(새로고침)하지 않고, 필요한 데이터만 서버에서 쏙 받아와서 화면을 갱신하는 기술이다. 요즘은 XML 대신 JSON 형식을 주로 쓴다.

• 쉬운 비유: 스포츠 경기 중계 자막
  • 축구 경기를 볼 때 화면은 그대로인데, 하단 점수판만 쓱 바뀐다.
  • 점수가 바뀔 때마다 TV가 껐다 켜지지 않는 것과 같다.
• 언제 쓰나?
  • 인스타그램 좋아요 누를 때, 검색어 자동완성, 무한 스크롤 등.

---

💡 [심화] 요즘 배우는 React(리액트)와는 무슨 상관일까?

리액트를 배우면서 "이 개념들이 여기서도 쓰이나?" 궁금했는데, 결론은 "아주 많이 쓰인다" 였다.

1. 리액트와 AJAX는 찰떡궁합 리액트는 화면 깜빡임 없이 부드럽게 동작하는 SPA(Single Page Application)를 만든다. 이때 화면 껍데기는 그대로 두고 내용물(데이터)만 가져오는 배달부 역할을 AJAX가 한다. (fetch, axios 등을 사용)

2. 리액트는 콜백 함수 천국

• 이벤트: onClick={() => ...} 처럼 클릭했을 때 실행할 함수를 넘길 때.
• 데이터 전달: 자식 컴포넌트가 부모에게 데이터를 보낼 때, 부모가 준 콜백 함수를 사용한다.
• 목록 출력: map() 함수를 써서 배열을 화면에 뿌릴 때도 내부에 콜백 함수가 들어간다.

📝 오늘의 결론

개념만 알았을 땐 어려웠는데, 비유로 이해하고 리액트 코드와 연결해 보니 왜 중요한지 알 것 같다.

• AJAX로 데이터를 가져오고,
• 가져온 데이터가 오면 콜백 함수로 화면을 업데이트하고,
• 백엔드에서는 캡슐화로 그 데이터를 안전하게 지킨다.

앞으로 프로젝트를 할 때 이 흐름을 생각하면서 코드를 짜봐야겠다.