[React] 5-1. 게시판 상세페이지 조회

1. 게시판 상세페이지 조회

 

▶ App.js

- state로 저장시키기

let [상세보기, 상세보기변경] = useState(null); // 각 게시글 정보 담아줄 예정

 

 

- state의 변경에 따른 레이아웃 지정

=> 게시글 목록 중 하나를 클릭했을 때, 레이아웃 == 2 가 되면 상세페이지가 보이도록 아래와 같이 설정

{         레이아웃 == 0 ?         <BoardList 게시글배열={게시글배열} 게시글배열변경함수={게시글배열변경함수}         상세보기={상세보기} 레이아웃변경={레이아웃변경} /> :         레이아웃 == 1 ?         <BoardInsert 게시글배열={게시글배열} 게시글배열변경함수={게시글배열변경함수}/> :         레이아웃 == 2 ?         <BoardDetail  상세보기={상세보기} 레이아웃변경={레이아웃변경}/> :         null       }

 

 

/* eslint-disable */ 
//콘솔창에 불필요한 에러를 지우는 코드

import './App.css';
import {useState} from 'react';

import 초기게시글 from './data';  //default옵션으로 export한 경우 변수명을 다르게 가져올 수 있음
import {a,b,c} from './data'; //a,b,c의 값을 가지고 옴
import BoardInsert from './components/BoardInsert';
import BoardList from './components/BoardList';
import BoardDetail from './components/BoardDetail';
import BoardUpdate from './components/BoardUpdate';


function App() {

  //let 제목 = "KH C CLASS";

  // state 문법
  let [제목2, 제목변경함수]  = useState('KH E CLASS'); 

  let [게시글배열, 게시글배열변경함수] = useState(초기게시글);

  //2) 레이아웃상태를 state로 저장시키기
  let [레이아웃, 레이아웃변경] = useState(0);
  
  let [상세보기, 상세보기변경] = useState(null); // 각 게시글 정보 담아줄 예정

  function 제목2변경 (){
    // 제목2 = "KH C CLASS"; // 단순 대입연산자를 활용하는 경우 state값의 변경점을 reactDom이 알지못함
    제목변경함수("KH C CLASS"); //useState의 두번째 매개변수로 전달받은 함수를 통해 변경 시 화면이 재랜더링됨
  }


  return (
    <div className="App">
      <div className="header">
        <h3 style={ {fontWeight : "bolder"} }>  {제목2}  </h3>
      </div>

      <div className='nav'>
          <button onClick={function(){ // ui상태관리 -3) state변경함수를 버튼등의 요소에 부여
          레이아웃변경(0);
          }}> 게시판 </button>
          <button onClick={function(){
            레이아웃변경(1);
          }}> 등록 </button>
      </div>

      {
        레이아웃 == 0?
        <BoardList  게시글배열={게시글배열} 게시글배열변경함수={게시글배열변경함수} 상세보기변경={상세보기변경} 레이아웃변경={레이아웃변경} /> :
        레이아웃 == 1 ?
        <BoardInsert 게시글배열={게시글배열} 게시글배열변경함수={게시글배열변경함수}/> :
        레이아웃 == 2 ? 
        <BoardDetail  상세보기={상세보기} 레이아웃변경={레이아웃변경}/> :
        null
      }

    </div>
  );
}


export default App;

 

 

 

 

▶ BoardList.js

- 레아웃변경과 상세보기변경을 가져오기 위해 state 추가

let {게시글배열, 게시글배열변경함수 , 레이아웃변경, 상세보기변경} = props;

 

 

 

- 게시글 목록 중 해당하는 글번호, 글제목, 작성자, 작성일을 클릭하면 상세페이지로 이동하도록 "게시글상세조회" 함수로 게시글.글번호 매개변수로 넘김

- 매개변수 형태로 값을 넘겨줘야하기 때문에 "() => ~ " 이런형태로 보내야한다!

 

 

 

- 게시글상세조회 함수 생성

=> 레이아웃변경(2) 를 목록중 하나를 클릭했을 때, 레이아웃 == 2 가 되면 상세페이지가 보이도록 설정함

=> find를 통해서 조회할글번호와 게시글배열의 글번호와 같은 데이터를 찾으면 상세게시글이라는 변수에 담고, 상세보기 함수에 값을 담는다.

function 게시글상세조회(조회할글번호) {         let 상세게시글 = 게시글배열.find( function(게시글) {             return 게시글.글번호 == 조회할글번호;         });         상세보기변경(상세게시글);         레이아웃변경(2);     }

 

 

 

- tr태그에다가 onClick을 추가하면 삭제버튼을 누를때 게시글 상세조회 페이지로 넘어가게된다. 이문제를 방지하기 위해서 stopPropagation();를 추가해야함!

 

export default function BoardList(props){

    let {게시글배열, 게시글배열변경함수 , 레이아웃변경, 상세보기변경} = props;


    function 게시글삭제(삭제할글번호) {
    
        //2) 게시글배열에서 글번호와 일치하지 않는 게시글만 필터링하기. (filter함수 이용)
        let 필터링배열 = 게시글배열.filter( function(게시글) { 
          return 게시글.글번호 !== 삭제할글번호; 
        }); 
        게시글배열변경함수(필터링배열); 

    }

    
    function 게시글상세조회(조회할글번호) {
        let 상세게시글 = 게시글배열.find( function(게시글) { 
            return 게시글.글번호 == 조회할글번호;
        });
        상세보기변경(상세게시글);
        레이아웃변경(2);
    }

    return (
        <div className='outer'>
        <br />
        <h2>일반게시판</h2>
        <table className='list-table'>
          <thead>
            <tr>
              <th style={ {width : "10%" } }>번호</th>
              <th style={ {width : "40%" } }>제목</th>
              <th style={ {width : "20%" } }>작성자</th>
              <th style={ {width : "20%" } }>작성일</th>
              <th style={ {width : "10%" } }>삭제</th>
            </tr>
          </thead>
          <tbody>
            {/* 
              Array내부의 map함수 사용 예정
              [1,2,3].map(function () { return 1}) ==> [1,1,1]
            */
             게시글배열.map(function( 게시글, 인덱스) {
              return (
                <tr key={인덱스} onClick={ () =>  게시글상세조회(게시글.글번호)}>
                  <td>{게시글.글번호}</td>
                  <td>{게시글.글제목}</td>
                  <td>{게시글.작성자}</td>
                  <td>{게시글.작성일}</td>
                  <td><button onClick={(e) => {
                    e.stopPropagation(); // 이벤트 전파 방지
                    게시글삭제(게시글.글번호)}}
                    >삭제</button>
                  </td>
                </tr>
                )
             })
            }
          </tbody>
        </table>
      </div>
    )
}

 

 

▶ BoardDetail.js

- BoardList.js에서 상세보기를 가져오기 위해 아래와 같이 추가

let{상세보기,레이아웃변경} = props;

 

export default function BoardDetail(props){

    let{상세보기,레이아웃변경} = props;
  
    return(
      <div className='outer'>
          <br/>
          <h2>게시판상세보기</h2>
          <table className='detail-table'>
              <tr>
              <th colSpan={4}>{상세보기.글제목}</th>
              </tr>
              <tr>
              <th>작성자</th>
              <td>{상세보기.작성자}</td>
              <th>작성일</th>
              <td>{상세보기.작성일}</td>
              </tr>
              <tr>
              <th>글내용</th>
              <td colSpan={3} style={{ height: "200px" }}>{상세보기.글내용}</td>
              </tr>
          </table>
          <div className='btn-area'>
              <button onClick={ () => { 레이아웃변경(3) } }>수정</button>
          </div>
      </div>
    )
  
  }