[CRUD] #2 배열 렌더링하기

#2 게시판의 내용을 담아둘 배열을 만들고 렌더링 해본다.

결과물

 

 

1. 렌더링이란?

 

1) 기본적인 뜻

Render는 html로 입력받아 해석해서 표준 출력 장치(모니터)로 출력한다.
이 작업을 Rendering이라 한다.

 

2) React에서 rendering

data를 html로 변환해서 renderer에게 전달하는 작업을 뜻한다.

 

 

2. 구현

 

구현은 두가지 함수로 작성한다.

1) PostList : 내용을 담아둘 배열 구현

2) Post : 배열의 내용을 key 값에 따라 조회해가며 렌더링하는 작업 구현

 

배열을 만들어 데이터를 담아두고 key 값으로 id를 지정해 새로운 배열로 반환한다.

map 메서드는 배열 내 요소 하나하나를 콜백 함수로 가공하여 새로운 배열에 저장한다.

즉, 위의 return를 해석하자면 posts 배열의 요소 하나하나를 post 라는 새로운 배열에 저장하고

함수 Post를 div 내에서 출력해주는 것이다.

이떄 함수 Post 파라미터 post는 현재 저장된 새로운 배열이다.

 

화면에 보여주는 역할을 한다. (화면 구성)

 

마지막으로 App에서 불러와주면 완료