선생님 리액트 state배열 관련 질문이 있습니다

[지민짱]

차은우 닮은 코딩애플 선생님

https://github.com/Bang-Dream/Pastel-Pallete/blob/main/frontend/src/components/Function/Board.tsx

지금 선생님 강의보고 노드랑 리액트 가지고 게시판? 같은거 만드는중인데

let [post, setPost] = useState(["이거 어케 없애나요 선생님"]);
let [id, setId] = useState([-1]);

이거 두줄을

let [post, setPost] = useState([]);
let [id, setId] = useState([]);

이렇게 바꾸고싶은데 저렇게 하면 이상한 오류가 나네요 저런건 어떻게 해결하나요 

 

그리고 노드, 리액트, 몽고디비 쓰는데 데이터를 노드에서 localhost:3000/api/어쩌구

이렇게 뿌려주고 그걸 리액트에서 axios로 받아서 쓰는데 개선방안이 따로 있을까요?

[codingapple]

post가 [] 상태일 경우

post를 post[0] 이런 식으로 쓰는 곳에서 에러가 나는게 아닐까요 

만약에 post가 비어있으면 보여주지 말라고 if를 쓰든가 하면 될듯요 

 

원래 서버에서 데이터 보내고 ajax로 수신하고 그렇게 코드짭니다 개선여지는 없습니다 

$.ajax 대신 axios 써도 될듯요 ajax용 라이브러리가 두개나 있군요 

 

[지민짱]

선생님 절대 안되는거같애요 리얼 2시간째 코딩 해봤는데 절대안됩니다ㅠ

https://github.com/Bang-Dream/Pastel-Pallete/blob/main/frontend/src/components/Function/Board.tsx

21, 34번 행에 ts오류가 나요 타입관련 오류인거같은데 왜저런건가요 주석으로 남겨놨습니다,,

그리고 말씀주신대로 axios 하나로 통일해볼려는데 delete는 어케하는건가요

요런식으로 오류가 나네요 ㅠ 제발도오ㅓㅏ주세요!!!!!!!!!!!!!!!!

[codingapple]

var titleCopy = [...post];
 var idCopy: number[] = id;

윗줄은 타입지정이 안되어있고 

밑줄은 아마 카피할 때 복사본을 안만드신듯요 

404에러는 서버에 만들어놓은 api 주소랑 다르다는 뜻 같은데 잘못된 주소로 delete요청한 것이 아닐까요 

 

post.map((data, index) => (

post 쓰던곳이 html 안에 있군요 이걸 if문 처리하면 될듯요 

[지민짱]

https://github.com/Bang-Dream/Pastel-Pallete/blob/main/frontend/src/components/Function/Board.tsx

 

33번줄 : setPost(titleCopy); // 'string[]' 형식의 인수는 'SetStateAction<never[]>' 형식의 매개 변수에 할당될 수 없습니다.
34번줄 : setId(idCopy); // 'number[]' 형식의 인수는 'SetStateAction<never[]>' 형식의 매개 변수에 할당될 수 없습니다.
 

 

선생님 복사본을 만들고 콘솔 찍어봤는데 잘 나옵니다,, 구글에도 오류 어케 해결하는지 안나오고 살려주세요

 

그리고 44번줄에 ajax를 axios로 바꾸는 방법이 있을까요 axios.delete는 데이터 넣는 구멍이 없는거같아요

[codingapple]

useState사용할 떄 

useState<타입이름>();

이렇게 사용합시다 

axios 쓸 때 data : {} 이렇게 쓰면 데이터 전달되지않습니까

안되면 서버에 app.use(express.json()) 을 추가해보거나 post요청으로 고치면 되겠죠 뭐 

 

 

[지민짱]

https://github.com/Bang-Dream/Pastel-Pallete/blob/main/frontend/src/components/Function/Board.tsx

선생님 정말 마지막으로 질문입니다 여기 18번줄부터 map 돌려서 데이터를 돌려서 post라는 state에 넣어주는데요 이게 딱 제목데이터가 한 5개 있는데 마지막 5개밖에 못합니다 일단 console.log(titleinput) 해보니까 모든 데이터가 돌아가긴 해요 어떻게 모든 데이터를 뽑아줄까요?

[지민짱]

마지막 5개가 아니고 마지막 1개요!!!!!!!!

 

[지민짱]

그 object.keys(post) 이렇게 하니까 잘 나오던데 key 말고 value를 여러개 뽑고싶습니다..

[codingapple]

res.data를 굳이 반복문 돌릴 필요없이

그냥 setPost(res.data) 해도 될듯요

[글쓴이]

글