2024.05.23 Today Yoonsung Learned

TIL

React Standard 4th 과제

EX2 문제

• Box 를 클릭하면 해당 Box만 파란색이 되도록 해야 합니다. components/ 안의 컴포넌트들안에서 TODO를 확인하세요.
• TODO: GlobalStyle 컴포넌트를 만들고 styled-reset 패키지로 스타일 초기화하고 App 컴포넌트에 적용해 보세요.

yarn add styled-components styled-reset
/* 터미널 창에서 패키지 다운*/

• App.jsx에 패키지 컴포넌트 추가

import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

const GlobalStyle = createGlobalStyle`
  ${reset}
`;

• active prop 을 어떻게 해야 클릭한 박스임을 알수있을 지 active prop에 할당할 값을 수정해보세요.

function BoxContainer() {
  const [activeIndex, setActiveIndex] = useState(0);

  const handleClick = (index) => {
    setActiveIndex(index);
  };

  return (
    <Container>
      {[0, 1, 2, 3, 4].map((index) => (
        <Box
          key={index}
          active={activeIndex === index}
          onClick={() => handleClick(index)}
        />
      ))}
    </Container>
  );

• props로 받은 $active 에 따라 배경색이 blue 또는 gray가 되도록 해보세요.

const StyledBox = styled.div`
  background-color: ${(props) => (props.$active ? "blue" : "gray")};
`;

function Box({ active, onClick }) {
  return <StyledBox $active={active} onClick={onClick} />;
}

EX3 문제

• 로컬 스토리지에서 초기 상태로 사용할 값을 가져오세요. 새로고침 해도 기존 상태를 유지하는 것이 목적입니다.
• 로컬스토리지에 값이 없을 경우 빈배열[] 로 설정하세요.

function App() {
  const [texts, setTexts] = useState(() => {
    const savedTexts = localStorage.getItem("texts");
    return savedTexts ? JSON.parse(savedTexts) : [];
  });

• 상태가 변경될 때마다 로컬 스토리지에 저장. key 값은 texts 로 합시다.

 useEffect(() => {
    localStorage.setItem("texts", JSON.stringify(texts));
  }, [texts]);

• input 에 텍스트 입력시 =>

• key값 저장