컴포넌트(Component)

화면을 구성하는 가장 작은 단위. UI 조각(함수). 입력(props)을 받아 출력(JSX)함 function Hello() { return <h1 태그>안녕하세요!; }

JSX

자바스크립트 안에서 HTML처럼 작성하는 문법.(중괄호 {}로 JS 값 끼워 넣기) 리액트에서 쓰는 JavaScript + XML 문법 const element = <h1 태그>Hello, React!;

상태(State) & 속성(Props)

State: 컴포넌트 내부에서 변하는 값 (예: 입력창 값, 체크 여부) 컴포넌트 안에서 관리하는 값. 값이 바뀌면 화면이 자동으로 다시 렌더링됨. useState Hook을 사용.

Props: 부모 → 자식으로 전달하는 값 (수정 불가) 부모 컴포넌트 → 자식 컴포넌트로 데이터 전달할 때 사용 (읽기 전용!).

렌더링(Rendering)

ReactDOM.createRoot(...).render()

화면에 컴포넌트를 붙여주는 역할. JSX를 실제 DOM으로 그림 (React가 자동으로)

이벤트 처리

HTML의 onclick, onchange 같은 이벤트를 CamelCase로 사용.

함수(핸들러)를 연결.

<button onClick={() => alert("버튼 클릭!")}>클릭

useEffect

컴포넌트가 렌더링된 후에 실행할 코드 작성.

API 호출, 타이머 설정 등에 사용.

React ↔ Spring Boot 연동(CORS)

1) 서버(Spring Boot) 설정 - @Configuration으로 한 번만 설정하면 모든 컨트롤러에 적용 정확한 오리진을 지정

2. 프론트(React)에서 요청 보내기 - (fetch/axios) 프론트는 이 값을 읽어서 모든 변경 요청에 X-XSRF-TOKEN 헤더로 보냄
3. 컨트롤러 (세션 로그인 흐름)
4. JWT(토큰) 서버: 로그인 시 Authorization: Bearer 을 프론트로 반환 프론트: 토큰을 localStorage/memory에 보관 후 모든 요청 헤더에 포함 서버 CORS: exposedHeaders("Authorization")로 브라우저에서 읽을 수 있게

iteration

map() - JSX 요소 반복 렌더링 key - 각 요소 식별을 위한 고유값 (반드시 필요) filter(), sort() - 반복 전에 조건이나 정렬 가능

async

“비동기 함수”를 선언할 때 사용하는 키워드 - 항상 Promise를 반환 - 값을 받으려면 then() 또는 await으로 처리 - 서버 통신 시 async/await + useEffect 조합

await은 반드시 async 함수 안에서만 사용가능

• async/await이 더 직관적임

API 데이터를 가져올 때 (useEffect 내부) async를 사용

비동기 처리 중 오류가 발생할 수 있으므로 try/catch로 감싸주는게 좋음

React - DB연동

npm i axios 설치

*Fetch와 Axios 사용법 비교

GET, POST와 같은 메소드를 사용할 때, Axios에서는 간단히 점 표기법으로 axios.get(), axios.post() 같은 함수를 사용하면 됨. 그리고 JSON 형식의 바디를 객체로 가져올 때 Fetch에서는 await 키워드를 사용해야 하지만, Axios에서는 그럴 필요가 없음.