[TIL] 팬레터함 만들기 (2)

[오늘 한 일]

• 알고리즘 5문제 풀기
• context 브랜치 완성
• Home page에서 코멘트 hover시 스케일 커지도록 수정
• Detail page에서 수정버튼 클릭 시 수정취소를 할 수 있는 "취소"버튼 추가
• redux 브랜치 진행 중

Context

// Context.js
import { createContext } from "react";

export const Context = createContext(null);

Context.js 파일을 만들고, 기존에 data state를 App.jsx에서 생성했기 때문에 App.jsx 파일에서 Context를 import 했다.
그리고 기존에 fakeData.json 파일을 가져오는 방식을 외부 서버에서 json 파일 가져오는 것 처럼 useEffect 훅을 사용했었는데, 로컬에서 json 파일을 가져오는 경우는 굳이 useEffect 훅을 사용해서 가져 올 필요가 없다는 피드백을 받고, 코드를 수정했다.

// App.jsx
...
import { useState } from "react";
import { Context } from "./Context";
import fakeData from "./fakeData.json";

function App() {
  const [data, setData] = useState(fakeData);

  return (
    <Context.Provider value={{ data, setData }}> // 여기!
      <ThemeProvider theme={theme}>
        <GlobalStyle />
        <Router />
      </ThemeProvider>
    </Context.Provider>
  );
}

export default App;

Provider를 통해 하나의 객체로 data와 setData를 넘겨주었다.
그리고 하위 컴포넌트인 Router에서 props를 넘겨주는 부분들은 다 삭제했다.
그리고 data와 setData를 사용하는 Home.jsx에서 data를 받아오려고 시도했었는데 처음엔 실패했다..

function Home({ data, setData }) {
  console.log(data); // ❌

기존에 props 넘겨주던 방식대로 data를 받아오면 될거라고 생각한..😂
에러가 나길래 어?외않되?😡 이러고 있었다..

import { Context } from "../Context";

function Home() {
  const { data, setData } = useContext(Context); // ⭕️

App.jsx에서 Context.provider 를 통해 value={{ data, setData }}를 넘겨주었으니, 하위 컴포넌트에서는 props가 아닌 useContext 훅을 사용해서 받아와야 한다. 그리고 처음에 객체형식으로 data와 setData를 보내주니, 받아올 때에도 구조분해할당 방식으로 객체에 들어있는 값을 꺼내와야 한다. 그랬더니 값을 잘 받아왔다.

코멘트 hover시 스케일 조정

styled component에서 hover를 어떻게 설정하나 했는데, 다음과 같이 사용할 수 있었다.

const CommentBox = styled.div`
  display: flex;
  gap: 10px;
  margin: 10px;
  background-color: ${theme.pink};
  padding: 15px;
  border-radius: 10px;
  box-shadow: ${theme.boxShadow};
  width: 450px;
  height: 100px;
  transition: 0.3s ease-in-out;
  &:hover {
    transform: scale(1.05);
  }
`;

잘 된다!😀

수정취소를 할 수 있는 [취소] 버튼 추가

수정할 생각이 없는데 수정 버튼을 클릭하면 수정을 해야만 그 상태를 빠져나올 수 있었다. 이를 보완하고자 수정을 취소할 수 있는 [취소] 버튼을 추가했다.

// Detail.jsx
<Btns>
  {isInputDisabled ? (
    <>
      <Button value="수정" onClick={() => setIsInputDisabled(false)} />
      <Button value="삭제" onClick={deleteComment} />
      </>
  ) : (
    <>
      <Button value="수정완료" onClick={updateComment} />
      <Button value="취소" onClick={() => setIsInputDisabled(true)} />
      </>
  )}
</Btns>

[취소] 버튼을 클릭하면 isInputDisabled라는 state가 true가 되면서 textarea는 다시 입력할 수 없는 상태로 바뀌고, 버튼들은 다시 [수정][삭제] 버튼이 보이게 된다.