게시판 상세보기 - 풀스택개발 EastFlag

동적 라우팅 추가

pages 폴더 아래 board-view 폴더에 BoardView.tsx 컴포넌트를 추가한다.

import React from 'react';

const BoardView = () => {
  return (
    <div>
      
    </div>
  );
};

export default BoardView ;

import React from 'react';

const BoardView = () => {

return (

<div>

</div>

);

};

export default BoardView ;

App.tsx에 라우팅을 추가한다. 그런데, 게시판 상세보기의 경우는 유알엘이 고정되어있지 않다. 예를 들어 1번 게시판 상세보기일 경우는 /board-view/1 이고 2번이면 /board-view/2 이런식으로 아이디에 따라서 유알엘이 변경이 되어야 한다. 이런것을 동적라우팅 이라고 하고 다음과 같이 정의한다. /board-view/:id

function App() {
  return (
    <container classname="p-5">
      <browserrouter>
        <switch>
          <route exact="" path="/" component="{BoardList}"></route>
          <route path="/board-add" component="{BoardRegister}"></route>
          <route path="/board-view/:id" component="{BoardView}"></route>
        </switch>
      </browserrouter>
    </container>
  );
}

function App() {

return (

</switch>

</browserrouter>

</container>

);

}

동적 라우팅 파라메터 추출

브라우저에서 /board-view/1 이라고 수동 입력하고 엔터를 눌러보면 BoardView 컴포넌트로 이동할 것이다. 이제 BoardView 컴포넌트에서 1이라는 아이디를 추출해야 한다.

부모로 부터 넘어오는 props에 세가지 객체가 담겨 있다고 앞에서 본적이 있다. 그중에 match라는 객체의 params 에 id 값이 들어가 있다. useEffect 훅을 사용해서 콘솔창에 출력해본다.

import React from 'react';

const BoardView = ({match}: any) => {
  useEffect(() => {
    console.log(match);
  }, []);

  return (
    <div>
      
    </div>
  );
};

export default BoardView ;

import React from 'react';

const BoardView = ({match}: any) => {

useEffect(() => {

console.log(match);

}, []);

return (

<div>

</div>

);

};

export default BoardView ;

상세보기 REST api 호출

match에서 추출한 id로 서버에 api를 호출하고 board라는 useState 훅에 바인딩한다.

import React from 'react';

const BoardView = ({match}: any) => {
  const [board, setBoard] = useState<Board>({
    title: '',
    content: ''
  });

  useEffect(() => {
    console.log(match);
    getBoard(match.params.id);
  }, []);

  const getBoard = async (id: string) => {
    const res = await axios.get(`/api/board/${id}`);
    console.log(res.data);
    setBoard(res.data);
  }

  return (
    <div>
      
    </div>
  );
};

export default BoardView ;

import React from 'react';

const BoardView = ({match}: any) => {

const [board, setBoard] = useState<Board>({

title: '',

content: ''

});

useEffect(() => {

console.log(match);

getBoard(match.params.id);

}, []);

const getBoard = async (id: string) => {

const res = await axios.get(`/api/board/${id}`);

console.log(res.data);

setBoard(res.data);

}

return (

<div>

</div>

);

};

export default BoardView ;

데이터 바인딩

bootstrap 컴포넌트중 Card 객체를 사용해서 바인딩한다.

...

  return (
    <>
      <Card>
        <Card.Title>{board?.title}</Card.Title>
        <Card.Text>
          {board?.content}
        </Card.Text>
      </Card>
    </>
  );

...

...

return (

<Card>

<Card.Title>{board?.title}</Card.Title>

<Card.Text>

{board?.content}

</Card.Text>

</Card>

</>

);

...

BoardList 클릭시 이동 처리

게시판 목록보기에서 해당 글을 클릭시 상세보기로 이동하여야 한다. history props의 push 함수를 사용하여 처리한다.

...

  return (
    <>
      <Row className="mb-3 justify-content-end">
        <Col xs="auto" sm="auto">
          <Button variant="primary" onClick={() => props.history.push('/board-register')}>등 록</Button>
        </Col>
      </Row>
      {
        boardList.map((board: Board)=>
          <Row className="py-2 board" key={board.id} onClick={() => props.history.push(`/board-view/${board.id}`)}>
            <Col>{board.title}</Col>
            <Col xs="auto" sm="auto">{board.created}</Col>
          </Row>)
      }
    </>
  );

...

...

return (

<Button variant="primary" onClick={() => props.history.push('/board-register')}>등 록</Button>

</Col>

</Row>

{

boardList.map((board: Board)=>

<Row className="py-2 board" key={board.id} onClick={() => props.history.push(`/board-view/${board.id}`)}>

<Col>{board.title}</Col>

<Col xs="auto" sm="auto">{board.created}</Col>

</Row>)

}

</>

);

...

게시판 목록에 hover 를 추가한다. scss는 트리형태로 작성이 가능하다. 그리고 & 연산자는 부모 참조 연산자라고 해서 자식이 아니라 부모에서 참조하게 해준다.

.board {
  cursor: pointer;
  border-bottom: 1px solid #dddddd;
  &:hover {
    background: #eeeeee;
  }
}

.board {

cursor: pointer;

border-bottom: 1px solid #dddddd;

&:hover {

background: #eeeeee;

}