리액트와 서버 연동 시

[오승준]

post.post하니깐 됩니다. 감사합니다!! 근데 post.post가 잘 이해가 되지 않습니다.
또 첫번째 데이터의 제목 데이터를 꺼낼 때는 또 어떤 식으로 써야 하는 건가요..?? post[1].post.제목은 잘 되지 않습니다.

그리고 글올리기 버튼을 한 번 눌렀을 때 db에 post됨과 동시에 그 데이터를 get하고 싶은데
axios.post()와 axios.get()을 하나의 button 안에 넣지 않고 글발행을 하는 방법이 또 있나요..???

[codingapple]

변수가 array자료면 [] 붙이고 object면 점찍어서 데이터 꺼내면 됩니다 
post요청완료시 get요청하라고 코드짜도 되겠군요

[오승준]

object입니다. 그러면 post.post.제목 이런 식으로 쓰면 되는 건가요??

[codingapple]

넴

[오승준]

object 데이터에서 특정 id 값의 제목 데이터를 꺼내려면 어떻게 하나요???
post.post[id값].제목인가요??

+
object형태에선 데이터를 꺼낼 땐 id값으로 꺼내고
array형태에선 데이터를 꺼낼 때 id값보다는 저장된 데이터의 순서를 꺼내는건가요??

[codingapple]

출력해봤을때 object면 무조건 점찍으면 됩니다 
array는 [0] 붙입니다

[오승준]

<부모 컴포넌트>
function App(a,i) {
let [title, settitle] = useState(['BLOG에 오신걸 환영합니다.'])

<자식 컴포넌트1>

function Domestic(props) {
let copy = [...props.title];
useEffect(()=>{ 
copy.unshift('국내여행 페이지 입니다.');
props.settitle(copy);
 },[])
return
{
copy.map(function(a,i){
return(
<div className='Pdomestic'>
<h5>{copy[i]}</h5>
<p>10월 1일 발행</p>
}

<자식 컴포넌트2>
function Modal(props)
return
<div className='modal'>
<p>제목 : <input name="topic" onChange={(e)=>{setTopic(e.target.value)}}></input></p>
<p>내용 : </p><textarea name="context" onChange={(e)=>{setInput(e.target.value)}}></textarea><hr/>
<button onClick={()=>{
axios.post('http://221.xxx.xxx.xx:5500/add', {
topic : Topic,
context : Input
 });
axios.get('http://221. xx.xxx.xx:5500/add',
 }).then((post)=>{
let copy = [...props.title];
copy.unshift(post.posts[2].제목);
props.settitle(copy);
 
 })
props.navigate(-1)
 }}>글 올리기</button>




<nodejs>
app.get('/add', function(req,res){
db.collection('POST').find().toArray(function(에러, 결과){
if(에러) return console.log(에러);
console.log(결과);
res.send({posts : 결과});
 })
})

시스템구조 설명
1.  자식 컴포넌트 2에서 제목과 내용을 입력하여 글 올리기를 누르면 
   서버로 post요청 후 다시 get 요청하여 id가 2인 데이터의 제목을 부모 컴포넌트에 있는 변수 title에 
   추가시켜줌 
2. 자식 컴포넌트 1에서 map 함수에 있는 copy[i]에서 추가된 데이터의 제목을 보여주게 함

문제 
1. id가 2인 데이터의 제목이 출력이 안됨. 10월 1일은 잘 출력됨.( 다른 건 출력 잘됨. post는 문제없음) ->  파라미터 형태의 문제??
2.  서버로 post get요청을 하였는데도 새로고침 후에는 다시 리셋됨. -> html파일을 다시 읽어서 그러는 건데 그럼 컴포넌트 순서 문제??


도무지 해결이 힘듭니다..... 코딩마스터님 부디 도와주십시오ㅠ

[codingapple]

post.posts에 데이터가 3개 들어있나 확인합시다 
새로고침되면 원래 state도 리셋됩니다

[오승준]

데이터베이스에서 id가 2인값의 제목을 출력하는게 post.posts[2].제목 맞나요??
배열의 2번째 데이터를 가져오는 게 아닌가요??

새로고침 시 리셋되면 그럼 db에 저장해서 get요청하는 의미가 없어지는 거 아닌가요??
새로고침해도 발행한 글을 보고 싶다면 어떻게 해야하나요??

[codingapple]

post.posts라는 변수가 어떻게 나오는지 리액트에서 출력부터해보고 뽑읍시다 
state같은걸 로컬스토리지 이런데 저장해놔야합니다

[글쓴이]

글