22/07/23 [모각코] 2일차

react에서는 props로 부모 컴포넌트와 자식 컴포넌트가 서로 정보를 교환할 수 있습니다.

// App.jsx
function App() {
  const [color, setColor] = useState(false);
  const changeBackGroundColor = () => {
    setColor(true);
  };
  return (
    <>
      <GlobalStyle color={color} />
      <MainDiv>
        <Routes>
          <Route path="/" element={<Main changeBackGroundColor={changeBackGroundColor}/>} />
        </Routes>
      </MainDiv>
    </>
  );
}

 

changeBackGroundColor 함수를 만들고 Main component에 props로 넘겨줍니다.

// Main.jsx
const Main = ({ changeBackGroundColor }) => {
  const [loadingTimer, setLoadingTimer] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      changeBackGroundColor();
      setLoadingTimer(false);
    }, 2000);

    return () => {
      clearTimeout(timer);
    };
  });
  return (
    <>
      <Nav />
      {loadingTimer === true ? (
        <>
          <MainLoading />
        </>
      ) : (
        <></>
      )}
    </>
  );
};

setTimeout을 이용해서 2초후에  App.jsx 에서 받은 changeBackGroundColor를 실행 시켜줍니다. 그렇게 되면 App.jsx에 있는 color 값이 true로 바뀌게 되며

// styles.js
export const GlobalStyle = createGlobalStyle`
${reset}
    body{ // 폰트 종류, 배경색
        background-color:${(props) =>
          props.color === true ? "white" : `rgb(243,250,242)`}
    }
    :root{ //색, 폰트 설정, radius 설정
        
    }
`;

color 값을 받은 GlobalStyle은 배경색을 white로 바꾸게 됩니다.