[TIL] 프로젝트 시작은 무슨 221203

REDUX

npm 명령어

리액트 + 리덕스 프로젝트 시작하기

$ npx create-react-app [프로젝트명] --template redux

 

기존 리액트 프로젝트에 리덕스 추가하기

$ npm i redux

$ npm i react-redux

 

해당 프로젝트 vs code 터미널에서 styeld-components 설치

$ npm install styled-components

 

폴더 세팅(이거 아님)

src/configStore.js 설정 코드 추가

import { createStore } from "redux";
import { combineReducers } from "redux";

/*
1. createStore()
리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수) 입니다. 
리덕스는 단일 스토어로 모든 상태 트리를 관리한다고 설명해 드렸죠? 
리덕스를 사용할 시 creatorStore를 호출할 일은 한 번밖에 없을 거예요.
*/

/*
2. combineReducers()
리덕스는 action —> dispatch —> reducer 순으로 동작한다고 말씀드렸죠? 
이때 애플리케이션이 복잡해지게 되면 reducer 부분을 여러 개로 나눠야 하는 경우가 발생합니다. 
combineReducers은 여러 개의 독립적인 reducer의 반환 값을 하나의 상태 객체로 만들어줍니다.
*/

const rootReducer = combineReducers({}); 
const store = createStore(rootReducer); 

export default store;

 

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

// 우리가 추가할 코드
import store from "./redux/config/configStore";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(

	//App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어줍니다.
  <Provider store={store}> 
    <App />
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

moduels 폴더에 todos.js 파일 추가하고 강의 자료를 다시 보면서 실습 문제를 풀려고 했다.

그런데 지금 만드는 건 to do list 인데 counter 폴더가 필요할까?라는 생각이 들었다.

 

그래서 실습 문제 답안 깃허브에 들어갔더니 역시나 폴더 구조가 달랐다.

 

src 폴더 안

다시 폴더 세팅

나의 test_todo2

또 궁금한 게 생겼다. 왜 App.js가 아니라 App.jsx로 했을까?

https://cocoon1787.tistory.com/844

[React] 리액트 .js vs .jsx 차이점

결론은 둘 다 가능하다는 것 같다.

그러면 index.js와 App.jsx가 src 안에 있는 이유가 있을까?

상관없다고 한다. 그리고 reportWeb ~ .js와 setup ~ .js도 필요 없는 파일이라고 한다.

 

App.jsx 에서 <h1>안녕<h1/> 을 쓰고 테스트했는데

 

Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.

 

에러가 떴다.

https://velog.io/@kek413/%EC%97%90%EB%9F%AC%EB%85%B8%ED%8A%B8

[에러노트] Store does not have a valid reducer

 

configStore.js에 모듈 값을 넣어줘야 한다고 한다.

import todos from "../modules/todos";

이걸 추가했더니 'todos' is defined but never used.'라고 떴다.

 

모든 state들을 담을 todos.js, todo input이 들어갈 Form.jsx component, todo lists(cards)가 들어갈 List.jsx component, 그리고 App.jsx를 만들러 가야겠다.

 

뭐부터 해야 할까? 일단 화면에 뭐라도 보여야 하니까 App에서 return 해서 화면에 보여줄 component를 넣어야겠다.

 

처음에는 comp를 import 하고 이렇게 썼더니

function App() {
  return (
      <Form></Form>
      <List></List>
  );
}

 

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

 

에러가 떴다.

https://velog.io/@ssook1222/%EC%98%A4%EB%8A%98%EC%9D%98-%EC%97%90%EB%9F%AC-Adjacent-JSX-elements-must-be-wrapped-in-an-enclosing-tag.-Did-you-want-a-JSX-fragment-...-%EC%97%90%EB%9F%AC

[오늘의 에러] Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? 에러

 

JSX를 쓰려면 하나의 태그로 묶어줘야 한다.

 

function App() {
  return (
    <div>
      <Form></Form>
      <List></List>
    </div>
  );
}

저기까지 쓰고 피곤해서 잠들었다

👊🏻 오늘 한 일

• [프로그래머스] 34. 모의고사 git push
• React 숙련 주차 강의 1-8
• React 숙련 주차 퀴즈, 실습 과제

😲 오늘 느낀 점

강의를 들으면 흐름은 이해가 가는데 실습 과제를 만들려고 하니 폴더 세팅 html 구조 짜는 것부터 모르겠다.

내일은 노마드 코더 강의를 쭉 들어봐야겠다. 

👏🏻 오늘의 칭찬

알고리즘 풀었음

🤔 오늘 아쉬운 점

오늘 개인과제를 시작하려고 했는데 시작도 못 했다. 속도가 안 난다.

⛵️ 내일 할 일

• [노마드 코더] React 강의 2-3 ~ 
• [노마드 코더] Redux 강의
• React, Redux blog & youtube
• WIL - State, Props, 리렌더링 발생 조건