React

Component

마크업을 반환하는 JavaScript 함수

• Component의 네이밍은 항상 Pascal Case로 한다

---

JSX 마크업

• JavaScript의 확장인 JSX을 사용해서 마크업한다.
  👉 HTML의 문법을 엄격하게 지켜야 한다.
• Component는 <div> 또는 <React.Fragment>와 같은 래퍼를 꼭 써서 내보내야 한다.

---

데이터 바인딩

JSX 마크업 내에 변수에 담겨있는 데이터(객체)를 연결 시켜서 렌더링할 때 사용한다.

---

조건부 렌더링

JavaScript의 조건문을 그대로 사용한다.

---

리스트 렌더링

• JavaScript의 반복문을 그대로 사용한다.
• key 속성을 사용해 성능 저하를 방지한다.

---

이벤트 핸들링

Component 내부에 Event Handler를 선언하여 Event를 적용한다.

---

화면 업데이트

Component에 상태(state)를 추가해야 한다.
👉 기본 제공되는 useState 훅을 사용한다.

---

Hook 사용

Component에서 사용할 수 있는 React에 내장된 Hook이 있다.
👉 다른 일반 함수와 구별되도록 use를 붙여서 사용한다.
👉 내장된 함수 외에도 사용자가 커스텀할 수도 있다.

---

데이터 공유

서로 다른 Component가 데이터를 공유하는 것을 말한다.

일반적으로, 각 Component 안에 state를 가지기 때문에 독립적으로 관리된다.
👉 다른 Component와도 데이터를 공유하고 싶을 때는, 상위 Component에 state를 끌어올린다.
👉 하위 Component에서는 해당 state를 props로 전달받는다.