React 컴포넌트 & JSX & Props & 이벤트

React 컴포넌트 / JSX / Props / 이벤트

---

1. 컴포넌트

정의

• 리액트에서 독립적이고 재사용 가능한 함수

특징

• HTML + JS + CSS를 하나의 컴포넌트로 구성

---

2. 컴포넌트 만들기

1. function 사용
2. 컴포넌트명: 자유롭게 지정 가능, default 컴포넌트 파일명과 일치
   • 첫 글자는 반드시 대문자
     • <input> : 소문자 → HTML
     • <Input> : 대문자 → 컴포넌트
3. (props) : property 속성 전달
4. {} : 중괄호 안에서 JS와 HTML 작성
5. return : HTML과 JS가 혼합된 JSX 문법 사용 가능
6. jsx 파일 내 export default 함수 1개만 정의 가능

사용 예시

- `export default function Component(props) { return (<> </>); }`  
- `export default Component = (props) => { return (<> </>); }`

---

3. 컴포넌트 불러오기

1. 다른 js(jsx) 파일일 때
   • export default 컴포넌트 : import 컴포넌트명 from '파일경로'
   • export 컴포넌트 : import { 컴포넌트명, 컴포넌트명 } from '파일경로'
2. 같은 js(jsx) 파일일 때
   • <컴포넌트명 />

---

4. JSX

정의

• 컴포넌트 안에서 HTML과 비슷한 문법을 사용할 수 있는 확장 문법

주의

• 브라우저가 바로 해석 불가 → React 렌더링 필요
• 예: create.render(<컴포넌트 />)

특징

1. HTML과 다름 → 가상 DOM 사용
   • 모든 태그 반드시 닫기 필요
     • <input> [X]
     • <input /> [O]
   • 전체를 감싸는 상위 요소 필요
     • <div> </div> 또는 <> </>
   • 2줄 이상 요소 → ( ) 소괄호로 묶는 관례
2. JS 표현식 사용 가능
   • <div>{JS코드}</div>
   • 정의/선언/생성 불가, 표현식만 가능
3. JSX 주석
   • HTML 주석 불가 → { /* 주석 */ }

---

5. Props

정의

• 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 매개변수

역할

• 컴포넌트 재사용, 데이터 전달

특징

1. 읽기 전용 → props 데이터 수정 불가
2. 단방향 → 자식이 부모에게 전달 불가

사용법

• 부모 → 자식 속성 전달

function 부모컴포넌트(props) {
  return (<><자식컴포넌트 속성명1={값} 속성명2={값} /></>);
}

• 자식에서 props 사용

1. 객체 접근: props.속성명1

2. 구문 분해: function 자식컴포넌트({속성명1, 속성명2}) { return (<> </>); }

6. HTML(가상 DOM) 이벤트

---

1. HTML DOM

• 이벤트: onclick
• 특징: 순수 HTML, 직접 함수 호출
• 사용법

<button onclick="함수명()">클릭</button>

2. React DOM

• 이벤트: onClick
• 특징: 가상 HTML, 함수 참조 전달
• 사용법

1. 함수 참조 전달

<button onClick={함수명}>클릭</button>

2. 매개변수 전달

<button onClick={(e) => { 함수명(e, 매개변수); }}>클릭</button>

3. 이벤트 객체 확인

<button onClick={(e) => { console.log(e); }}>클릭</button>