📅 오늘 한 일
1. 리액트 공부
2. 코테 문제 풀기
✏️ 무엇을 배웠나
1. 무작정 코드 타이핑하지 말고 전체적인 데이터 길부터 트기
리액트 입문 과제였던 투두리스트 만들기 코딩 설명을 들었다. 코딩 과정을 차근차근 따라갈 수 있었는데 내가 짰던 코드의 흐름과 비교해서 볼 수 있어 좋았다. 코드를 짤 때 전체적인 흐름을 어떻게 만드는 게 좋을지 감이 잡히지 않아서 막막했던 한 부분이 시원해진 느낌이다. 일단 데이터가 흐를 수 있는 전체적인 길을 잡아준 다음에 디테일하게 하는 방법을 배웠다. 매번 한 부분만 디테일하게 하다가 전체적인 흐름이 막혀서 낭패였던 경험이 종종 있었다.
2. props와 state에 대한 이해도 UP
props랑 state가 뭔지는 알겠는데 도저히 어떻게 어떤 케이스에서 사용하는 게 적절할지 갈피를 못 잡고 있었는데 마찬가지로 타인의 코드의 흐름을 보면서 눈으로 직접 확인할 수 있는 부분들이 많았다. state도 props로 내려줄 수 있다는 것 등등.
3. Redux의 개념과 쓰는 이유
리덕스가 뭔데 왜 쓰는데?
state는 해당 컴포넌트에서만 쓸 수 있다는 걸 알고 있다. 만약 이 state를 다른 컴포넌트에서 사용하고 싶다면 props를 줘서 내려보내줘야 한다. 그런데 컴포넌트 사이의 관계가 복잡하다면 이게 쉬울까? 자식 컴포넌트가 아니라 손자의 손자의 손자 컴포넌트에게 전달해야 한다면 props drilling 때문에 데이터를 쓰지 않는 컴포넌트에도 전달을 해줘야 하지 않나? 그리고 그 많은 컴포넌트에서 다 수정을 해줘야 하는 상황이 온다면...?
이런 문제점을 해결하기 위해서 리덕스가 나왔다.
리덕스는 데이터 전달을 위에서 아래로 그리고 1:1로 전달해주는 기존의 방식을 바꾼다. 리덕스를 사용하면 Store에 데이터를 저장해두고 전역(모든 컴포넌트)에서 사용할 수 있도록 하는 것이다. 그러면 props drilling도 복잡한 컴포넌트의 구조 때문에 머리가 아픈 일도 없겠다.
4. 리덕스 설치 및 세팅 방법
1. 패키지 설치
- 리덕스와 리액트-리덕스 패키지를 설치한다.
- 터미널에서 아래 커맨드 입력.
yarn add redux react-redux
2. 폴더 구조 세팅
- src 안에 redux 안에 config와 modules 폴더 생성
- config/configStore.js 생성
- redux store를 설정하는 코드임.
import { createStore } from "redux";
import { combineReducers } from "redux";
// 리듀서를 추가하는 부분
const rootReducer = combineReducers({ reducer1, reducer2... etc });
// 리듀서들을 묶어서 저장소(스토어)를 만드는 부분
const store = createStore(rootReducer);
export default store;
- modules/
- state들을 저장하는 곳
4.
- 모듈을 만들면 스토어에 연결해야 한다
- 컴포넌트에서 스토어에 있는 데이터를 쓰려면 useSelector 훅을 사용해야 한다
5. 나 지금 뭐하지?
생각 없이 보고 생각 없이 읽지 말자.
내가 무엇을 위해서 어떤 것을 하고 있는지 자꾸 일깨워야 한다.
🥵 무엇이 어려웠나
1. 리덕스
- 리덕스 개념 이해는 했는데 역시나 실사용이 어렵다. 리덕스 코드가 흘러가는 경로를 노트에 그려보는 것도 좋을 것 같다.
🔎 더 알고 싶은 것 / 보완이 필요한 것
1. 리덕스 코드 흐름도 그리기
🏷️ 오늘의 코멘트
저번주 보다 리액트 좀 더 알게 된 거 같아서 기쁘다. 상쾌한 느낌.
