📅 학습 일자 : 22. 12. 15

📜 진행 내용

• [과제] 리덕스로 투두리스트 만들기
• [특강] react lifecycle - 미수강

---

💡 배운내용

▣ [과제] 리덕스로 투두리스트 만들기

■ 프로젝트 세팅 2

• 라이브러리, 패키지 추가
  • styled-componnets 사용하기
    • styled-components : CSS in JS - Js 코드로 CSS 코드 작성할 수 있는 패키지
      • 설치
        • VScode 플러인 설치 : vscode-styled-compponents
        • 터미널 : yarn add styled-components
      • 사용
        • 컴포넌트 파일 : import styled from "styled-components";
        • 코드 작성 예시

          import styled from "styled-components";
          
          // 1. styled키워드를 사용해서 컴포넌트 생성
          // ※ styled. 뒤에는 어떤 html 태그로 생성할지 지정해준다. (form이면 form으로 하는 등.)
          const StBox = styled.div`
          	// css 코드 작성방식과 동일하게 작성
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 20px;
          `;
          
          const App = () => {
          	// 2. 생성한 styled-components를 JSX에서 html 태그처럼 사용
            return <StBox>박스</StBox>;
          };
          
          export default App;

  • react-router-dom 사용하기
    • react-router-dom : 구분된 페이지를 구현할 수 있게 해주는 패키지, ( SPA를 구현할 수 있다. )
      • 설치
        • 터미널 : yarn add react-router-dom
      • 사용
        • 연결할 페이지 컴포넌트 파일 생성 - 예) Home, About…
        • Router.js 파일 : import { BrowserRouter, Route, Routes } from "react-router-dom";
          • 코드 기본 양식

            import React from "react";
            import { BrowserRouter, Route, Routes } from "react-router-dom";
            
            // 2. Router 함수 작성 
            //BrowserRouter를 Router로 감싸는 이유는, 
            //SPA의 장점인 새로고침시 화면깜빡임이 되지 않게 해주기 위함이다. 
            const Router = () => {
              return (
                <BrowserRouter>
                  <Routes>
                  </Routes>
                </BrowserRouter>
              );
            };
            
            export default Router;

          • 페이지 컴포넌트 Route 설정 - 코드 예시

            import React from "react";
            import { BrowserRouter, Route, Routes } from "react-router-dom";
            import Home from "../pages/Home";
            import About from "../pages/About";
            
            const Router = () => {
              return (
                <BrowserRouter>
                  <Routes>
            				{/* 
            						Route의 react-router-dom 지원 props 중
            						1. path는 사용하고싶은 "주소" 넣어주기
            						2. element는 해당 주소로 이동했을 때 보여주려는 컴포넌트 넣어주기
            				 */}
                    <Route path="/" element={<Home />} />
                    <Route path="about" element={<About />} />
                  </Routes>
                </BrowserRouter>
              );
            };
            
            export default Router;

        • App.js 파일 : Router.js import

          import React from "react";
          import Router from "./shared/Router";
          
          function App() {
            return <Router />;
          }
          
          export default App;

■ react-router-dom Hooks & API

• 요소의 이벤트 발생시 페이지 이동 구현
  • useNavigate
    • 컴포넌트 파일 주요 코드

      import { useNavigate } from "react-router-dom";
      
      const Home = () => {
        const navigate = useNavigate();
      
        return (
          <button onClick={() => { navigate("/works"); }}>
            works로 이동
          </button>
        );
      };

  • Link
    • 컴포넌트 파일 주요 코드

      import { Link } from 'react-router-dom';
      
      const Home = () => {
      
      	return 
      	<Link to="/contact">contact 페이지로 이동하기</Link>
      };
      export default Works;
      

• Dynamic Routes와 useParam

  • Dynamic Routes(동적 라우팅) : path에 id와 같은 유동적인 값을 넣어 특정 페이지로 이동하는 기능 구현의 방법

  • react-router-dom 에 이어서..

    import React from "react";
    import { BrowserRouter, Route, Routes } from "react-router-dom";
    import Home from "../pages/Home";
    import About from "../pages/About";
    
    const Router = () => {
      return (
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="about" element={<About />} />
    				{/* 추가한 코드 기본 예시 */}
    				<Route path="about/:id" element={<About />} />
    				{/* 추가한 코드 변형 예시 */}
            <Route path="about/:id" element={<Item />} />
          </Routes>
        </BrowserRouter>
      );
    };
    
    export default Router;

  • useParam : 라우터 사용시 파라미터 정보를 가져와 활용하게 해주는 hook

    • 예제에서는 path값을 가져와 path의 id값을 조회할 수 있게 해주었다.

    • 코드 예시

      • Home.jsx - 이동 전 화면 컴포넌트 : Link를 사용해 data 배열의 id를 path뒤에 붙여주었다.

        import { Link } from 'react-router-dom';
        
        const data = [
          { id: 1, todo: '리액트 배우기' },
          { id: 2, todo: '노드 배우기' },
        ];
        
        function Home() {
          return (
            <div>
              {data.map((work) => {
                return (
                  <div key={work.id}>
                    <Link to={`/works/${work.id}`}>
                      <span> Go to: {work.todo}</span>
                    </Link>
                  </div>
                );
              })}
            </div>
          );
        }
        
        export default Home;

      • Work.jsx - 이동한 컴포넌트 : useParams로 path값의 id와 data의 id를 비교하여 같은 데이터를 찾았다.

        ※ 아래 코드에서는 path의 id의 값이 문자형이기 때문에 parseInt를 사용했지만,

        id를 uuid로 생성한다면 parseInt를 사용하지 않고 비교해도 된다.

        import React from 'react';
        import { useParams } from 'react-router-dom';
        
        const data = [
          { id: 1, todo: '리액트 배우기' },
          { id: 2, todo: '노드 배우기' },
        ];
        
        function Work() {
          const param = useParams();
          const work = data.find((work) => work.id === parseInt(param.id));
          return <div>{work.todo}</div>;
        }
        
        export default Work;

        • 프로젝트에서 작성한 코드

          const Detail = () => {
          	// store에 저장한 state 데이터를 가져와 사용함
            const globalTodo = useSelector((state) => state.todos.todos);
            const param = useParams();
            const item = globalTodo.find((elem) => elem.id === param.id);
          
            return (
                <StDetail key={item.id}>
                  ID: <StIdContent> {item.id}</StIdContent>
                  <StDetailTitle>제목: {item.title}</StDetailTitle>
                  <StDetailContent>내용: {item.content}</StDetailContent>
                </StDetail>
            );
          };

---

🎯 문제와 해결

• 하드코딩한 부분 리팩토링 - 아직 해결 전…

⁉️ 어려웠던 내용

• 하드코딩한 부분 리팩토링
  • 투두리스트의 투두를 필터링하기.

❎ 한 번 더 공부할 내용

• [특강] react lifecycle

---

🔗 출처 및 참고자료

• 스파르타 코딩클럽 - 리액트 숙련 강의