221201_TIL

오늘 공부한 내용

• 항해 99 3주차 

• 주특기 언어 시험(todolist 간단한 추가하기 기능)
• styled-component theme 추가하기
• React-Router

어려웠던 내용

• REDUX에 관한 내용은 아직 쉽게 이해할 수는 없는 듯하다. 분명히 코드를 보고 이해도 가고 흐름도 이해가 가는데, 스스로 그 구조를 생각하면서 처음부터 작성을 해보면 완벽하게 쓰질 못한다. 조금 더 개념을 찾아보고 어떤 내용이 들어가고 그 내용들이 어떻게 흘러가는지에 대해 차분히 생각하면서 고민해봐야겠다.

궁금한 내용 / 부족한 내용

• styled-component에 theme를 추가하려 했는데, 이것도 나에게는 어려웠던 것 같다. 아직 객체형식으로 들어가는 무언가는 눈에 익지 않아서일까
• Router의 문법이 바뀌었다고 한다. BrowserRouter과 Routes는 얼마전까지는 없었던 것 같은데.. 그리고 Route에 element로 페이지 컴포넌트를 직접 넣어주는 형식으로 바뀐 것 같다.

 

ThemeProvider을 App.js의 최상단에 두고 감싼 다음, 브라우저에 상관없이 일괄적인 스타일을 적용하기 위해서  GlobalStyle을 사용하여 전체 컴포넌트에 공통적인 css를 적용해준다.

또한 useState를 변수에 담아 상태값을 하위 컴포넌트로 넘겨준 뒤, 하위 컴포넌트의 버튼의 클릭에 따라 state값을 변경해준다.

아직은 디스패치를 사용하여 스토어에 저장하고 셀렉터로 가져오고하는 상태관리를 한 것은 아니지만 근시일 내에 리덕스에 관하여 자세히 숙지한다음 꼭 활용하여 수정해보도록 하자. 

 

[App.js]

import logo from "./logo.svg";
import "./App.css";
import reset from "styled-reset"; //styled-components와 연결되어, 여러 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.js 패키지
import React, { useState } from "react";
import { createGlobalStyle, ThemeProvider } from "styled-components";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { lightTheme, darkTheme } from "./themes/theme";
import Home from "./Routes/Home";
import Detail from "./Routes/Detail";

const GlobalStyle = createGlobalStyle`
${reset}  
body {        
  background-color: ${(props) => props.theme.bgColor};  //props로 넘오는 객체 혹은 값들을 사용하려면 ${} 리터럴로 언패킹 해주면 된다!
  color:${(props) => props.theme.textColor}
}  
`;


function App() {
  const [background, setBackground] = useState(false);

  const changeHandler = () => {};
  return (
    <div>
      <ThemeProvider theme={background ? lightTheme : darkTheme}>
        <GlobalStyle />
        <BrowserRouter>
          <Routes>
            <Route
              path="/"
              exact
              element={
                <Home background={background} setBackground={setBackground} />
              }
            ></Route>{" "}
            //exact는 주어진 경로와 정확히 맞아 떨어져야만 설정한 컴포넌트를 보여준다는 의미.
         
            <Route path="/:id" element={<Detail />}></Route>
          </Routes>
        </BrowserRouter>
      </ThemeProvider>
    </div>
  );
}

export default App;

 

[theme.js]

export const lightTheme = {
  bgColor: "#fff",
  textColor: "#222",
  accentColor: "#12cbef",
};

export const darkTheme = {
  bgColor: "#282c35",
  textColor: "#fff",
  accentColor: "#ffe246",
};

export const theme = {
  lightTheme,
  darkTheme,
};

export default theme;

 

[Home.jsx]

import React, { useState } from "react";
export default function Home({ background, setBackground }) {
  return (
    <div>
      <button onClick={() => setBackground(!background)}>
        {background ? "WhiteTheme" : "DarkTheme"}
      </button>
    </div>
  );
}

결과 페이지 ( 눈 보호 해드리지 못해 죄송합니다ㅠ)

느낀점

늘 새롭고 힘든 과정이지만 혼자보다는 함께 공부할 때가 재밌고 즐거운 것 같다. 

늘 내가 바라는 것이 이루어지지는 않았지만 그래도 하루를 최선을 다 해 보내고 나서 오는 보람이 나를 버티게 만들지 않을까 생각해본다. 좋은 분들과 함께 공부를 하게 되는 영광을 누릴 수 있어서 너무나도 행복하고 감사하다.

멘탈관리가 힘든 나에게 있어 소중한 경험과 사고를 할 수 있도록 도와준 분들에게 감사하다는 말씀을 전해드리고 싶다.

내일 할 일

• 내일은 REACT 새로운 주차가 시작되는 날. redux 개념을 마무리 지어보자.
• 프로그래머스 문제는 풀어보자