⚛️ React & 🧩 MyBatis 사용법 정리

---

⚛️ React

🧱 함수와 컴포넌트

항목	설명
함수 호출	함수 안에서 다른 함수를 호출할 수 있으므로, 컴포넌트 안에서도 다른 컴포넌트 호출 가능
컴포넌트 호출 문법	<컴포넌트 속성=값 /> 형식으로 사용
return 시 주의점	JSX는 반드시 하나의 요소만 반환하므로, 여러 요소는 <>...</> 또는 ()로 감싸야 함
props 구조 분해 할당	const { key1, key2 } = props; 형태로 사용하여 코드 간결화
CSS 파일 불러오기	import 'CSS파일경로' 사용

💡 Tip: return 내부 코드가 길어지면 소괄호() 로 감싸는 것이 가독성에 유리합니다.

---

🧩 Component (컴포넌트)

React의 독립적이고 재사용 가능한 화면 단위 모듈로, HTML + JS + CSS를 하나의 단위로 구성합니다.

특징	설명
역할	출력할 화면을 최소 단위로 쪼갠 모듈화된 구성요소
목적	코드의 최적화 및 유지보수성 향상
구조	HTML + JS + CSS를 하나의 함수형 모듈로 구성
파일 확장자	.jsx 사용 (주로 함수를 컴포넌트명으로 설정)

📘 컴포넌트 생성 및 사용 방법

단계	설명	예시
1	지정 폴더에 .jsx 파일 생성	Example.jsx
2	함수형 컴포넌트 선언	function Example(props){}
3	JSX 리턴 작성	return(<div>내용</div>);
4	default export	export default Example;
5	다른 파일에서 import	import Example from './Example';
6	컴포넌트 호출	<Example/>

---

⚙️ JSX

React에서 컴포넌트 내부에서 HTML과 유사한 문법을 작성할 수 있게 해주는 확장 문법입니다.

특징	설명
React 렌더링 필요	JSX는 브라우저가 직접 해석 불가 → React를 통해 Virtual DOM으로 변환 필수
HTML과 유사하지만 다름	JSX는 가상 DOM 기반으로 작동하므로 HTML과 완전히 동일하지 않음
모든 태그는 닫혀야 함	<input/> 같이 self-closing 필수
return 시 하나의 요소만 허용	여러 줄일 경우 () 또는 fragment(<></>)로 감쌈
JS 표현식	{} 내부에서만 가능하며 선언문/제어문은 불가능
주석 작성법	{ /* 주석내용 */ } 형태로 작성

🧾 JSX 예시

function Example(){
  const name = "React";
  return (
    <>
      <h1>Hello, {name}</h1>
      <input />
      { /* JSX 주석 예시 */ }
    </>
  );
}

---

💾 MyBatis 사용법

Spring에서 MyBatis를 사용하는 기본적인 절차입니다.

순서	설명	예시
1️⃣ 인터페이스 생성	처리할 SQL 함수 선언	@Mapper 어노테이션 추가
2️⃣ SQL 어노테이션 사용	SQL DML 명령어에 맞게 주석 처리	@Select, @Insert, @Update, @Delete
3️⃣ 매개변수 전달	#{매개변수} 형식으로 전달	@Select("SELECT * FROM table WHERE id=#{id}")
4️⃣ 반환타입 자동 매핑	SQL 결과를 타입에 따라 자동 매핑	int, Map, Dto, List 등
5️⃣ Dto 필드명 일치 필수	SQL의 속성명 = Dto의 멤버변수명

🧠 주요 어노테이션

어노테이션	설명
@Insert("SQL")	데이터 삽입
@Select("SQL")	데이터 조회
@Update("SQL")	데이터 수정
@Delete("SQL")	데이터 삭제