처음부터 흐름을 작성해보기
📌참고
📁src
└📁redux 안에 config, modules 폴더 생성
redux: 리덕스와 관련 코드를 모두 모은 코드
├ 📁config: 리덕스 설정 관련 파일
│ └configStore.js: 중앙 state 관리소인 Store를 만드는
│ 설정 코드들이 있는 파일
├ 📁modules: 만들 state의 그룹(투두리스트에 필요한 state를 만들 모듈 생성)\
│ └ todo.js
├ 📁pages: router dom 만들 페이지 컴포넌트를 담는 곳(그냥 컴포넌트에 넣어도 됨!)
│ ├ main.js
│ └ detail.js
└📁shared
└ Router.js
이렇게 파일 만들어나가야 함. 설치할 것들은
yarn add redux react-redux //리액트 리덕스랑 리덕스 두개 다
yarn add react-router-dom
yarn add styled-componenets📌hooks 사용법 정리
(1) useSelector = 스토어 조회
: 컴포넌트에서 스토어를 직접 조회 할 수 있게 돕는 'react-redux' 훅
const 변수 = useSelector((state)=>{
console.log(state)
return state
});
예시:
const number=useSelector(state=>state.counter.number);
=> 어떤 값을 내냐? 하면
state.counter.number는 state.모듈명.key 이기 때문에 key의 value가 도출된다.
그래서 useSelector은 모듈명안의 key값의 현 상태를 스토어에서 조회해줘~ 가 된다.
✅redux의 모듈
- 액션객체란, 반드시 type이란 key를 가져야 하는 객체이다. 또한 리듀서로 보낼 “명령"이다.
- 디스패치란, 액션객체를 리듀서로 보내는 “전달자” 함수이다.
- 리듀서란, 디스패치를 통해 전달받은 액션객체를 검사하고, 조건이 일치했을 때 새로운 상태값을 만들어내는 “변화를 만들어내는" 함수이다.
- 디스패치(dispatch)를 사용하기위해서는 useDispatch() 라는 훅을 이용해야 한다.
- 디스패치는 스토어의 내장함수 중 하나입니다.
- 우선, 디스패치는 액션을 발생 시키는 것 정도로 이해하시면 됩니다.
- dispatch 라는 함수에는 액션을 파라미터로 전달합니다.. dispatch(action) 이런식으로 말이죠.
- 액션객체 type의 value는 대문자로 작성한다. (JS에서 상수는 대문자로 작성하는 룰이 있음)
✅ducks 패턴
- 리듀서로 보내는 액션객체에 어떤 정보를 같이 담아보내고자 한다면 payload를 이용한다.
payload는 Action Creator를 생성할 때 매개변수에 자리에서 받을 준비를 하고, 반환하는 액션객체에 payload라는 key와 받은 매개변수를 value로 하여 구현한다.- 리듀서에서 payload를 사용하고자 할 때는 action.payload로 사용할 수 있다.
- ES6에서 객체를 생성할 때 key와 value가 같으면 축약해서 작성할 수 있다.
Ducks패턴은Erik Rasmussen이 제안했고, 현재 리덕스 모듈 작성방법의 정석으로 여겨지고 있다.
-
Reducer 함수를
export default한다. -
Action creator 함수들을
export한다. -
Action type은
app/reducer/ACTION_TYPE형태로 작성한다.
(외부 라이브러리로서 사용될 경우 또는 외부 라이브러리가 필요로 할 경우에는 UPPER_SNAKE_CASE 로만 작성해도 괜찮다.)
💡Tip
- 리액트 훅 사용할 거는 function 이름 대문자로 시작해야 함... 글니깐 펑션은 무조건 대문자로 시작하도록 짓자...
📌git push, pull (fatal: refusing to merge unrelated histories) 에러 해결하기
깃 pull이 안됐는데
git pull origin (branchname) --allow-unrelated-histories를 pull 할때 입력해서 해결함. commit 히스토리가 서로 관련이 없다는 뜻이다. 즉, 서로 관련성이 없기 때문에 merge할 수 없기때문에 생긴 에러라고 한다. 어떤 똑똑한 분께서 블로그에 알기 쉽게 설명해놓으셔서 해결😭😭
참고사이트:Innovative Thinking IT
✍️오늘의 느낀점
드디어 주특기 프로젝트가 시작됐다. 오늘은 S.A를 작성하고 팀원들과 어색함을 좀 풀어내는 하루를 보냈다.어떤 프로젝트를 할지를 의논하고 와이어프레임을 짜고 api 명세서 관련해서 소통을 했다. 오늘 자료와는 TIL은 전에 level2를 수행하면서 파일 수행과정에 어버버했기때문에 정리차 리드미에 짬짬이 정리했던 건데, 프론트엔드 깃헙을 파서 필요 모듈 설치 후 파일 만들때 참고를 많이 했기때문에 앞으로도 써야될 것 같아 올려보았다. 물론 자주 쓰면 저절로 외워지겠지만 아직 그 레벨까지 도달하지 못했으니... 적어놓고 참고하면서 쓸 예정!! 주특기 프로젝트 구현 성공하고 싶다✨✨
