실습문제 2. Props와 State & 데이터바인딩

실습문제 구조

/practice
 - BoardContainer.tsx 
   - BoardList.tsx
   - BoardInsert.tsx
   - BoardSearch.tsx
   - boardMockUp.ts

BoardMockUp.ts

export const boardList = [
    {
        boardNo: 1,
        boardTitle: '초기게시글 1',
        boardContent: '다이어트3주차 힘드네요',
        boardWriter: 'admin',
        boardDate: '2023/12/27 10:00:00'
    }, {
        boardNo: 2,
        boardTitle: '다이어터 식단표 공유',
        boardContent: '아침 : 삼각김밥, 점심 : 김밥반줄, 저녁 : 삼각김밥',
        boardWriter: 'admin',
        boardDate: '2023/12/27 10:00:00'
    }, {
        boardNo: 3,
        boardTitle: '다이어트끝나면(1)',
        boardContent: '편백찜 먹고싶다',
        boardWriter: 'admin',
        boardDate: '2023/12/27 10:00:00'
    }, {
        boardNo: 4,
        boardTitle: '다이어트끝나면(2)',
        boardContent: '스키야끼 먹고싶다',
        boardWriter: 'admin',
        boardDate: '2023/12/27 10:00:00'
    }, {
        boardNo: 5,
        boardTitle: '다이어트끝나면(3)',
        boardContent: '타코 먹고싶다',
        boardWriter: 'admin',
        boardDate: '2023/12/27 10:00:00'
    }, {
        boardNo: 6,
        boardTitle: '대충만든 제목',
        boardContent: '대충만든 글내용',
        boardWriter: 'admin',
        boardDate: '2023/12/27 10:00:00'
    }, {
        boardNo: 7,
        boardTitle: '다이어트끝나면(4)',
        boardContent: '치킨 피자 먹고싶다',
        boardWriter: 'admin',
        boardDate: '2023/12/27 10:00:00'
    }, {
        boardNo: 8,
        boardTitle: '다이어트끝나면(5)',
        boardContent: '초밥 먹고싶다',
        boardWriter: 'admin',
        boardDate: '2023/12/27 10:00:00'
    }, {
        boardNo: 9,
        boardTitle: '다이어트끝나면(6)',
        boardContent: '햄버거 먹고싶다',
        boardWriter: 'admin',
        boardDate: '2023/12/27 10:00:00'
    }, {
        boardNo: 10,
        boardTitle: '오늘은 무슨날?',
        boardContent: '치팅데이',
        boardWriter: 'admin',
        boardDate: '2023/12/29 10:00:00'
    }
]

1. BoardContainer.tsx

• boardMockUp의 배열데이터를 export하여 자식 컴포넌트들에 list와 setList를 전달하시오.

import { useState } from 'react';
import { boardList } from './boardMockUp';  
import BoardList from './3. UseStatePractice1';
import BoardRegister from './4. UseStatePractice2';
import BoardSearch from './5. UseStatePractice3';

function BoardContainer(){

  // #1. state선언
  // - BoardList, BoardRegister, BoardSearch의매개변수를확인하여필요한 state를
  //   선언하세요.
  // - 사용할데이터의 초기값은 boardMockUp의 boardList를 사용하세요.

  // #2. props구현
  //  - props문법을 통해 컴포넌트들에 필요한 데이터를 전달하세요.
  //  - 각 컴포넌트의 필요한 데이터는 아래 문제들을 확인하여 파악하세요.
  return(
    <div>
      <BoardList />
      <BoardRegister />
      <BoardSearch />
    </div>
  )
}


export default BoardContainer;

2. BoardList.tsx

import React from 'react';
import { boardList } from './boardMockUp';  

function BoardList({list, setList}: {list: typeof boardList, setList: React.Dispatch<React.SetStateAction<typeof boardList>>}) {
  // #3. 정렬 함수 구현
  // - 작성일 기준 오름차순/내림차순 해주는 함수를 구현하세요.
  const sortByDateAsc;
  const sortByDateDesc;

  // #2. 삭제함수 구현
  //  - 게시글 번호를 인자로 받아 게시글을 삭제하는 함수를 구현하세요.
  const boardDelete;  
  
  return (
    <div>
      <h2>실습문제 2 : 게시판 목록</h2>
        <div style={{ marginBottom: '10px' }}>
          <div style={{ display: 'flex', gap: '10px' }}>
            <button onClick={sortByDateAsc}>작성일 오름차순 정렬</button>
            <button onClick={sortByDateDesc}>작성일 내림차순 정렬</button>
          </div>
        </div>
        <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>
            {  
              // #1 데이터 바인딩.  
              //  - props로 전달받은 배열데이터를 바인딩하세요
              //  - 구현 화면은 아래이미지를 참고하세요.(완벽히 똑같지 않아도 ok)
              //  - 렌더링 성능향상을 위해 key값을 설정하세요
            }
          </tbody>
        </table>
    </div>
  );
}

export default BoardList;

3. BoardInsert.tsx

import React, { useState } from 'react';
import { boardList } from './boardMockUp';  

function BoardRegister({list, setList}: {list: typeof boardList, setList: React.Dispatch<React.SetStateAction<typeof boardList>>}) {

  // #1. 게시글 입력 상태 관리 state
  //  - 실시간으로 게시글 입력상태를 보관하는 state를 선언하세요.
  //  - 게시글입력상태의 속성으로는 무엇이 필요할지 생각하고 , 불필요한 속성은 없도록 하세요.
  
  
  // #2. 게시글 입력 상태 관리 함수
  //  - 사용자가 입력하는 데이터를 실시간으로 게시글 입력 상태state에 저장하는 함수를 작성하세요.
  //  - 이 함수를 제목,작성자,글내용의 changeEvent에 바인딩하세요.  
  //  - 이 함수를 Input태그에 바인딩할때의 event객체는 React.ChangeEvent<HTMLInputElement>
  //    이며, TextArea에 바인딩할때의 event객체는 React.ChangeEvent<HTMLTextAreaElement> 입니다.
  const onInputHandler;
  
  // #3. 게시글 등록 함수
  //  - 제목, 작성자, 내용중 하나라도 입력하지 않으면 등록이 불가능해야합니다.
  //  - 게시글번호는 이전 게시글배열의 값들 중 가장큰 값에서 +1해주세요.
  //  - 게시글 날짜는 formatDate함수를 사용하여 현재시간이 등록되도록 해주세요.
  //  - 게시글 등록 후 BoardList컴포넌트에 등록한 게시글정보가 추가되도록 해주세요.
  //  - 게시글 등록 후 입력 값이 ''로 초기화되도록 해주세요.
  const onRegisterHandler;

  // 날짜 포맷팅 함수
  const formatDate = (date: Date): string => {
    const pad = (n: number) => n.toString().padStart(2, '0');
  
    const year = date.getFullYear();
    const month = pad(date.getMonth() + 1); // 월은 0부터 시작
    const day = pad(date.getDate());
  
    const hours = pad(date.getHours());
    const minutes = pad(date.getMinutes());
    const seconds = pad(date.getSeconds());
  
    return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
  }

  return (
    <>
    <div>     
      <h2>실습문제 3 : 게시판 등록</h2>
          <table className='enroll-table'>
            <thead>
            <tr>
              <th>제목</th>
              <td colSpan={3}>
                <input type='text' name='boardTitle' />
              </td>
            </tr>
            <tr>
              <th>작성자</th>
              <td colSpan={3}>
                <input type='text' name='boardWriter'/>
              </td>
            </tr>
            <tr>
              <th>글내용</th>
              <td colSpan={3} style={ { height: "200px" }  }>
                <textarea name='boardContent'></textarea>
              </td>
            </tr>
            <tr>
              <th colSpan={4}><button onClick={onRegisterHandler}>등록</button></th>
            </tr>
            </thead>
          </table> 
    </div>
    </>
  );
}

export default BoardRegister;

4. BoardSearch.tsx

import { useRef, useState } from 'react';
import { boardList } from './boardMockUp';  

function BoardSearch({list}: {list: typeof boardList}) {


  // - 검색어가 있으면 검색어를 포함한 게시글만 필터링하여 검색결과에 표시하세요.
  // - 검색어가 없으면 검색결과 없음을 표시하며 이 때 조건부 렌더링을 사용하세요.

  // #1. 검색어 관리
  //  - useState나 useRef를 활용하여 검색어를 관리하는 변수를 선언하세요. 
  //  - 단, 뭐가 더 효율적인지 생각한 후 작업하세요.
  
  // #2. 검색결과 저장용 state 선언
  //  - 검색결과를 저장할 state를 선언하세요.
  //  - 이 state의 초기값은 null로 지정하세요(검색결과 없음을 의미)
  //  - 이 state는 검색결과가 있는경우 typeof boardList 타입이며, 검색결과가 없는 경우 
  //    null타입을 가지는 UnionType입니다.
  const [result, setResult] = useState<typeof boardList | null>(null);

  // #3. 검색함수 작성
  // - 이 함수는props로 전달받은 list의 데이터를 바탕으로, 게시글 제목에 검색어가 포함된
  //    게시글정보만 필터링합니다 
  // - 필터링 결과는 2번 검색결과 저장용 state의 state변경함수를 통하여 저장합니다.
  // - 검색결과가 존재하지 않거나, 입력한 검색어가 비어있는 경우 null값을 저장합니다.
  const onSearchHandler;
  
  // #4. 
  return (
    <>
      <div>
        <h2>실습문제 4 : 게시판 검색</h2>
        <input type="text" placeholder="검색어를 입력하세요." />
        <button onClick={onSearchHandler}>검색</button>
      </div>

      <div style={{ marginTop: '20px' }}>
        <h3>검색 결과</h3>
         {  
            // #4 데이터 바인딩.  
            // - result가 null이 아니고, 길이가 0보다 큰경우 result값을 바인딩하세요.
            // - result가 null인 경우, 검색결과가 없습니다가 표시되도록 조건부 랜더링하세요.
            // - 구현 화면은 아래이미지를 참고하세요.(완벽히 똑같지 않아도 ok)
            // - 렌더링 성능향상을 위해 key값을 설정하세요
          }
      </div>
    </>
  );
}

export default BoardSearch;

• 검색결과 없는 경우