리액트 글쓰기,글목록보기 실습

태민·2022년 11월 14일

React

pages라는 폴더를 만들고

그 폴더안에

ListPage.js
WritePage.js

2개 파일을 만들어준다

리스트를 보는곳은 ListPage이고
글을 작성하는 페이지는 WritePage임으로

라우터를 사용해줘야한다

App.js에 가서 라우터 설정을 해주자

라우터를 사용하려면 index.js에서

브라우저라우터로 App.js를 감싸줘야하고

그걸 사용하기 위해서는 리액트 라우터 돔이 설치되어 있어야한다

모든게 준비되었다면 라우터를 만들자

import React from 'react';
import {Route, Routes} from "react-router-dom";
import ListPage from "./pages/ListPage";

//글쓰기,글삭제,글목록보기



function App(props) {
    return (
        <div>
        <Routes>
            <Route path={"/"} exact={true} element={<ListPage/>}/>
             <Route path={"/write"} exact={true} element={<WritePage/>}/>
        </Routes>
        </div>
    );
}

export default App;

이렇게 코드가 있을때 만약 <ListPage/> 에 빨간줄이 되고
import가 되지않을 경우 새로만든 ListPage파일안에 아무것도 적혀있지 않은지 확인해야한다

rsc나 rsf나 무엇이든 작성을 해줘야 import가 가능하다 꽁파일이면 아무것도 없기때문에

인식이 되지 않는다

src안에 components폴더를 만들고

그안에 Navigation.js라는 파일을 만들어주고

import React from 'react';
import {Link} from "react-router-dom";

const Navigation = () => {
return (

        <ul>
            <li>
                <Link to={"/"}>글목록</Link>
            </li>
            <li>
                <Link to={"/write"}>글쓰기</Link>
            </li>
        </ul>
);

};

export default Navigation;

이렇게 코드를 작성해준다 글목록으로 가는 li와
글쓰기로 가는 li 총2개를 만들어준다

그리고 App.js로가서 Navigation이라는 파일을 import한다

ListPage와 WritePage 두 파일에 기본세팅으로

rsc해주고 <h1>태그로 값을 적당히 넣어주자 알아볼 수 있도록!

이렇게 초기페이지는 리스트페이지이고
글쓰기를 누르면
글쓰기 페이지로 넘어가게 세팅이 되었다

이제 글목록을 먼저 만들어보자

우선 데이터를 만들어야하는데 DB로부터 다운받아서 뿌려야하는데
일단 임의로 데이터를 만들어서 사용해보자

const [posts,setPosts]= useState([
        {
            id:1,title:"내용1"
        },
        {
            id:2,title:"내용2"
        },
        {
            id:3,title:"내용3"
        },
        {
            id:4,title:"내용4"
        },
        {
            id:5,title:"내용5"
        },
    ]);

이런식으로 post라는 배열을 만들고

초기값으로 내용1부터 내용5까지 5개의 데이터를 만들어보자

자 그럼 만들어진 가짜데이터를 map을 이용해서 뿌려보는데

우선 styled를 이용해서 기본적인 css를 만들어주자

 const StyledItemBoxDiv= styled.div`
   
       border: 1px solid black;
       padding: 10px;
       margin: 10px;
       height: 100px;
       
   `;

이렇게 하나의 css를 만들어 준비해두고

{posts.map((post)=>
<StyledItemBoxDiv>
 번호:{post.id} {post.title}
 </StyledItemBoxDiv>


)}

이렇게 넣어서 값을 뿌려주면된다

이제 리스트로가면 목록이 촤르륵나오고

글쓰기를 누르면 글쓰기 페이지로 넘어가진다

이렇게 잘 출력되는 것을 볼 수 있다

이제 글목록 옆에 버튼을 하나 만들어서 클릭하면 삭제되도록 해볼생각이다

 <div>
            <h1>리스트 페이지</h1>
            <hr/>
            {posts.map((post)=>
                <StyledItemBoxDiv>
                    <div>
                    번호:{post.id} {post.title}
                    </div>
                    <button>삭제</button>
                </StyledItemBoxDiv>
            )}
        </div>