[26.02.03] React 재직자 교육 1 - 이벤트시스템, UI반복처리(중요)

비동기 처리 Promise

 

💡 Promise 객체
Promise 객체는 자바스크립트에서 비동기 처리에서 사용되는 객체입니다. 주로 서버에서 받아온 데이터를 화면에 표시하기 위해서 사용하며 데이터를 받아오기도 전에 데이터를 화면에 표시하려고 하면 오류가 발생하거나 빈 화면이 뜨게 되는데, 이러한 문제를 해결하기 위한 방법 중 하나입니다.
프로미스에는 세 가지 상태가 있습니다. 여기서 상태란 처리 과정을 의미합니다.

• Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해 준 상태
• Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태

웹 개발을 하면서 데이터를 다루다보면 만날 수 있는 개념이기 때문에 꼭 이해하도록 합시다.

 

https://velog.io/@yeeunk90/ReactJS-%EB%8F%99%EA%B8%B0%EC%99%80-%EB%B9%84%EB%8F%99%EA%B8%B0

[React/JS] 동기와 비동기

 

• 비동기 실행 : 서버 컴퓨터의 작업이 끝날 때까지 기다리지 않는 통신으로 서버에 요청(등록, 수정, 삭제 등)이 저장될 때까지 기다리지 않고 다른 작업을 진행
  동시에 여러 일 할 때 사용 (서로가 서로를 기다릴 필요 없음)
  ex) 게시물 목록 가져오기, 상품 목록 가져오기

• 동기 실행 : 서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 통신

\

 

promise로 지연 비동기 처리를 해주고 

<Suspense></Suspense>로 감싸준다.

fallback은 로딩되는 동안 보여주는 UI이다.

 

사용자의 체감속도가 빨라진다. 미리 몇개를 보고 나머지를 완성

버튼에 함수 이벤트 처리하려면 무조건 클라이언트 컴포넌트여야한다.

서버 클라이언트에서는 이벤트 처리 할수없다.

 

 

"use client"

 

html에서는 onclick={}해도 되지만 리액트에서는 카멜스타일로 onClick해야된다.

컴포넌트에 클릭 이벤트를 줄 수 있을까?

안된다. 어딜 클릭하는건지..?

 

컴포넌트는 이벤트 속성을 적용 할 수 없음 => prop으로 전달 될 뿐

 

자바스크립트에서 Map의 역할이 뭘까?

Map은 A를 B로 바꾼다는 의미이다...

XXXX.Map((A) => {

retrun B;

})

 

제일중요!!!!!

board를 맵으로 바꾸겠다는 의미이다.

 

{boards.map(board=>(
<tr className="text-center" key={board.bno}>
<th>{board.bno}</th>
<td>{board.btitle}</td>
<td>{board.bwriter}</td>
<td>{board.bdate.toLocaleDateString()}</td>
<td>{board.bhitcount}</td>
</tr>
))}

 

tr태그마다 고유한 키값이 있어야됨 안그럼 중복 남.

키값으로 보통 pk값 줌...

 

{ } 표현식안에는 하나의 값

함수 호출도 들어갈있다

board.map ->함수

 

반복으로 테이블 만들기