TIL 27. 2024-02-02

프로젝트 진행과정

1. 멤버 UI 클릭 시 해당 멤버 정보만을 리스트 항목에 보여지는 코드를 작성하였다.

2.프로젝트 규칙: useContext나 redux 없이 useState로만 상태관리하기

프로젝트 진행 중 힘들었던 부분)

• useState를 어느 컴포넌트 위치에 두고 사용 해야할 지와 props를 어떻게 전달해야 할 지에 대한 많은 고민을 하였다.
• 현재 Home이라는 페이지에 기능별로 Header.jsx, Form.jsx, List.jsx 구조로 구성하였다.
• 각각 기능
  Header.jsx : 멤버별 UI 클릭 기능
  Form.jsx : 글 작성 기능
  List.jsx : 데이터의 정보를 보여주는 기능

해결 과정

• state 및 props를 생각하며 구조를 만들려고 하였지만...😂😂 답이 잘 나오지 않았다.
  프로젝트 진행을 잠시 멈추고 React 강의를 들으며 state개념과 props의 개념에 대해 학습하였다. 학습 중🤩🤩 "props란 상위 컴포넌트의 state 정보를 하위 컴포넌트에게 전달하는 거다"라는 말에 프로젝트 파일을 다시 열고 구조를 만들어보는데 정말 귀신같이 뚝딱뚝딱 만들어졌다.

해결 방법
방법은 바로!!!!!!
상위 컴포넌트인 Router에서 state를 만드는 것이었다. 정말정말 간단한 부분이었다.ㅠㅠ
지금까지 Router 컴포넌트는 경로 설정을 위한 컴포넌트라고만 생각하였기에 문제 해결 부분에서 깊게 생각하지 못하였다. 이후 문제였던 state 관리 및 props 전달 부분이 해결되니 멈추었던 프로젝트가 진행되었고 이후 진행될 Form.jsx 및 Detail 페이지 작업이 순조롭게 진행될 것 같다!!


👇👇👇👇 해결한 부분

// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다.
import { BrowserRouter, Route, Routes } from "react-router-dom";

// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.
//BrowserRouter를 Router로 감싸는 이유는,
//SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줍니다!
const Router = () => {
  const [data, setData] = useState(fakeData);
  const [isClick, setIsClick] = useState("");

  return (
    <BrowserRouter>
      <Routes>
        <Routepath="/" element={
             <Home
              data={data}
              setData={setData}
              isClick={isClick}
              setIsClick={setIsClick}
              />
          }
        ></Route>
        <Route path="detail/:id" element={<Detail/>}></Route>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

function Header({isClick, setIsClick}) {
  
  //멤버 UI 형성
  const aespa = ['카리나','지젤','윈터','닝닝'];

  
  //클릭한 멤버 이름을 전달
  const ItemClickEvent = (item)  => {
    setIsClick(item);
  }

  useEffect(() => console.log()
,[isClick]);


    return (
        <>
 < HeaderBackground>
  <HeaderTitle>에스파 팬레터 콜렉션</HeaderTitle>
  <HeaderList>
 {aespa.map((item) => {
  return (
    <HeaderItem  
    key={item}
    onClick={() => ItemClickEvent(item)} 
    $isClick = {item === isClick}  //styled component를 사용하여 클릭한 멤버 UI의 backGround 색깔 변경
    >{item}</HeaderItem>  
  )

 })}
  </HeaderList>
 </ HeaderBackground>
    </>
  )
}

export default Header

function List({data,isClick}) {

   //data: 전체 글의 정보
  //isClick: Header.jsx에서 클릭한 멤버의 이름
  
  
  return (
    <FooterBackground>
    <FooterList>
      //전체 data(글)에서 isClick(클릭한 멤버)에 해당되는 정보만 출력
      {data.filter((data) => data.writedTo === isClick ? true : false)
      .map((data) => {
        return(
         <FooterItem key = {data.id}>
          <FooterItemFigure>
            <FooterItemImage src={data.avatar} alt='기본 이미지'></FooterItemImage></FooterItemFigure>
          <FooterItemTitle>
          <ListTitle>{data.nickname}</ListTitle>
          <ListDate>{data.createdAt}</ListDate>
         </FooterItemTitle>
        <FooterItemContent>{data.content}</FooterItemContent>
        </FooterItem>
        )
      })}
  
    </FooterList>
    </FooterBackground>
  )
}

export default List