리액트, MySQL로 아주 쉽게 게시판 만들기 - 3 [React, MySQL, express, axios]

리액트로 아주 쉽게 게시판 만들기 - 3 [React, MySQL, express, axios]

 

이전 글에서 게시물 등록을 하여 데이터를 db에 보내주기까지 진행하였습니다.

 

이어서 db에 들어있는 데이터를 다시 가져와 프론트에 출력해보도록 하겠습니다.

 

먼저 server.js에 db 데이터를 뿌려주는 코드를 작성합니다.

24번째 줄코드에서 주의하실 점은 

 const sqlQuery = "SELECT * FROM 테이블이름;";

이처럼 FROM 뒤에는 본인이 생성한 테이블의 이름을 넣어주셔야 합니다.

저는 이전에 board라 생성하였습니다.

 

간단합니다.

그리고 http://localhost:8000/api/get 로 접속해볼까요?

아래처럼 db의 데이터들을 json형식으로 잘 get 해주고 있습니다.

데이터들

 

이제 이 json을 프론트에서 출력하는 코드를 작성해봅시다.

마찬가지로 Axios를 통해 api통신을 합니다. json이 있는 api/get을 긁어모아

ViewContent값으로 변경해줄 것입니다.

저는 화면 첫 렌더링 때  데이터들을 불러오기 위해 useEffect를 사용하였습니다.

 

접속 시 한번은 데이터를 불러온다!

 

그리고 ViewContent의 map() 내용을 수정해줍니다.

이전에 key={index}를 p태그에 넣어줬었는데, 부모 요소 div로 이동해줍니다.

그렇지 않으면 오류가 납니다.

 

 

이제 등록을 하고 새로고침을 해도 게시물이 남아있습니다.

상태 값으로만 유지되던 게시물 데이터를 이제 db에 담아서 주고받기 때문입니다.

새로고침해도 게시물은 살아있다

 

하나 부자연스러운 건 등록을 눌러도 바로 렌더링 되지 않습니다.

등록을 누르면 api로 boardContent의 상태 값을 보내줄 뿐이지 리액트가

렌더링이 될 조건에 포함되지 않기 때문입니다.

 

좀 더 자연스러운 플로우를 위해 등록 버튼을 누를 때마다

데이터를 받아오게끔 함수를 만듭니다.

별 거 없습니다. 아까 useEffect안에 들어있던 코드를 함수로 따로 만들어주고,

submit 함수에서 호출시켜줍니다!

 

그럼 이제 등록버튼을 누르면

post로 데이터를 전송하고 나서, get으로 다시 받아오는 거까지

차례대로 실행되기 때문에 등록 시마다 렌더링이 됩니다.

 

이렇게 해야 리 렌더링이 되는 이유는

get으로 받아오는 순간 viewContent의 값이 변경되는데

리액트 렌더링의 조건중 하나가 state값이 변경될 때라서 그렇습니다.

 

다음 글에서는 수정과 삭제 기능을 추가해보겠습니다.