Homile

📌 어제 배운 내용의 React Redux를 사용한 과제를 다시 한번 복습하는 차원에서 푼다음에 파일의 전체적인 구조에 대해서 페어님과 함께 차근차근 뜯어보는 시간을 가졌습니다. 작은 쇼핑몰에서 물건을 장바구니에 담고 삭제하는 페이지였지만 많은 state와 컴포넌트가 존재하였고 어떻게 하나하나 작은 단위로 컴포넌트를 만들어야 하는지에 대해서 감을 익히는 시간이 되었습니다. 다음에 프로젝트를 하게 된다면 꼭 컴포넌트 분리를 작업 단위로 나눠서 재사용성을 높일 수 있도록 작업을 해야겠다는 마음가짐을 다시 잡는 하루였습니다!!

📗 오늘 학습한 내용

React-Redux

• Action을 정의하는 과정에서 Dispatch를 사용하여 Action안에서 Reducer를 실행 할 수 있도록 하는 것을 깨달았습니다. 물론 파일을 직접 분해해보고 Action안에 Dispatch(Reducer)가 있어서 생각할 수 있었습니다.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

React-Redux-toolkit 공부해보기

📝 중요한 내용

• Redux를 사용하여 상태관리를 할 때에는 꼭 props드릴링이 발생하는지 확인하고 사용해야한다.
• 드릴링이 발생하지 않고 사용하게되면 Redux를 낭비하게 되는 것이다.

📌 Redux 상태 관리 라이브러리를 실습하는 날이다. 어제는 prop를 남발하여 prop drilling이 생겼다는 것을 알 수 있었다. 하지만 React-Redux를 사용하게 될 경우 store(상태 저장소)에서 상태를 관리(갱신, 수정, 삭제 등)를 하고 있기때문에 위의 문제점을 해결할 수 있다는 것을 알았고, Redux를 실제로 사용해보며 손에 익힐 수 있는 시간이 되었다!!

📗 오늘 학습한 내용

Redux

• 상태 관리 라이브러리 (React 없이도 사용 가능)
• 컴포넌트와 상태를 분리하는 패턴
• 상태 변경 로직을 컴포넌트로부터 분리하여 단순한 함수 컴포넌트를 만들 수 있게 해준다.

Redux를 사용하는 이유

1. 모든 컴포넌트에서 prop 없이 state를 직접 꺼낼 수 있다.
   • 상위 컴포넌트에서 하위 컴포넌트로 state를 넘겨야 하는데 하위 컴포넌트가 너무 많을 경우 사용한다.
   • state를 보관하는 파일을 하나 만들어서 state를 보관하여 모든 컴포넌트들이 props 없이 꺼내서 사용할 수 있다.
2. 상태(state)를 관리하기 용이하다.
   • 모든 컴포넌트에서 state를 변경하기 시작할 경우 Redux를 사용하지 않는다면 에러를 찾기 힘들지만 state 저장소에서 바로 찾을 수 있다.

Redux의 상태 관리 구조: (Action → Dispatch → Reducer → Store)

1. 상태가 변경되어야 하는 이벤트가 발생하면 변경될상태에 대한 정보가 담긴 Action 객체 생성
2. Action객체: Dispatch 함수의 인자로 전달
   • 어떤 액션을 취할 것인지 정의해 놓은 객체
   • type은 Action 객체가 어떤 동작을 하는지 명시해주는 역할을 하기 때문에 필수로 지정해야 한다.(대문자, Snake Case로 작성)
   •  payload* : 액션에 필요한 추가 데이터
3. Dispatch 함수: Action 객체를 Reducer 함수로 전달
   • Reducer로 Action을 전달해주는 함수
4. Reducer 함수: Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경
   • Dispatch에게서 전달받은 Action 객체의 type에 따라 상태를 변경하는 함수 (순수 함수)
5. 상태가 변경되면, React는 화면을 재 렌더링
6. Store: 상태가 관리되는 오직 하나뿐인 저장소의 역할

Redux의 세 가지 원칙

1. Single source of truth
   • 동일한 데이터는 항상 같은 곳에서 가지고 와야한다.
2. State is read-only
   • 상태는 읽기 전용이라는 뜻으로, Redux의 상태를 직접 변경할 수 없고, Action 객체가 있어야만 상태를 변경할 수 있다.
3. Changes are made with pure functions
   • 변경은 순수함수로만 가능하다.
   • 상태가 엉뚱한 값으로 변경되는 일이 없도록 순수함수로 작성되어야 하는 Reducer와 연결되는 원칙.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Redux 복습해보기

📝 중요한 내용

• Redux의 구조: Action -> Dispatch -> Reducer -> Store
• Redux를 사용하는 이유
• Redux의 세 가지 원칙

📌 오늘도 어제와 같이 너무 너무 더운날이다!! 하지만 에어컨과 함께라면 공부하는데 전혀 지장이 없다 😀 😀
     오늘은 Redux를 배우기전에 상태관리를 왜 하는지 학습하고 Redux를 미리 학습해볼 예정이다.(이미 학습 해본건 안비밀)

📗 오늘 학습한 내용

프론트엔드 개발 상태관리

• 상태: UI에 동적으로 표현될 데이터(변하는 데이터)
• Side Effect: 함수(컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인
  • 대표적인 예: 네트워크 요청 (백엔드 API 요청)
• 로컬: 특정 컴포넌트 안에서만 관리되는 상태
  • 다른 컴포넌트와 데이터를 공유하지 않는 폼 데이터 (input box, select box 등)
• 전역: 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태
  • 다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태
  • 전역 변수를 남용하는 것은 좋지 않지만 서로 다른 컴포넌트가 동일한 상태를 다룰 때는 출처는 오직 한 곳에서 상태를 관리해야 한다. (하나의 출처 = 전역 공간)
  • 데이터 무결성을 위해 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 오도록 한다. (Single source of truth)
    • 데이터 무결성: 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 요소를 막고 상태들을 항상 옳게 유지하는 것.
  • 전역으로 상태 관리하는 경우
    • 테마 설정
    • 국제화 설정
• 상태 관리를 위한 툴
  • React Context
  • Redux
  • MobX
• 상태 관리 툴의 기능
  • 전역 상태 저장소 제공
  • Props drilling 이슈 해결

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Redux 공부해보기

📝 중요한 내용

• 상태관리를 할 때, 로컬과 전역을 잘 활용해야 한다.
• Redux: 상태관리도구

📌 React에서 사용하는 styled component를 더욱 잘 사용할 수 있게 되었고, UI 패턴 구현을 할 수 있고 어떤 형식으로 이루어지는지 잘 알 수 있는 시간이었습니다.

📗 오늘 학습한 내용

Styled Component를 사용한 UI 패턴 구현

• Autocomplete Component (자동완성 구현)
• ClickToEdit Component (input focus 구현)

stopPropagation

• 이벤트 버블링을 해결 할 수 있다.
• 인벤트 버블링: 자식 태그를 감싸고 있는 부모 태그를 클릭 시 자식 태그도 이벤트에 반응하게 되는 현상.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

📝 중요한 내용

• useRef
• Styled Component

Redux?

Redux는 전역 상태 관리 라이브러리이다.

Redux와 같은 라이브러리로는 Mobx, Recoil, Ovemind.js가 있다. 가장 많이 사용되는 것은 Redux이며, 다음으로 Mobx가 있었는데 Recoil이 등장하면서 점점 사용율이 밀리는 추세이다.

Redux를 사용하는 이유

1. 모든 컴포넌트가 props 없이 state를 직접 꺼낼 수 있다.

• 상위 컴포넌트에서 하위 컴포넌트로 state를 넘겨야 하는 데 하위 컴포넌트가 너무 많을 경우 사용
• state를 보관하는 파일을 하나 만들어서 state를 다 보관하여 모든 컴포넌트들이 props 없이 꺼내서 쓸 수 있다.

2. 상태(state) 관리하기 용이하다.

• 모든 컴포넌트에서 state를 변경하기 시작할 경우 버그가 생기면 모든 컴포넌트에서 에러를 찾아야한다. 하지만, redux를 사용할 경우 state를 보관하는 장소에서 수정 방법까지 지정해두고 컴포넌트에서 수정방법을 요청(요청만 가능)하면 state가 변한다.
• 그렇기 때문에 버그가 발생할 경우 state보관 장소에서 찾아서 해결할 수 있다.

Redux의 구조

Action

• state를 바꾸는 방식을 설정한다.
• type을 지정하여 Action 객체가 어떤 동작을 하는지 역항르 명시해 주어야합니다.
• 대문자와 Snake Case로 작성합니다.
• 필요에 따라 payload를 작성해 구체적인 값을 전달합니다.

Dispatch

• Reducer로 Action을 전달해주는 함수입니다.
• Action에 동작을 요청하는 것으로 Action 객체를 파라미터로 받는다.

Reducer

• Dispatch에게서 전달받은 Action 객체로 변화를 일으키는 함수로 Action 객체의 type에 따라 상태를 변경하는 함수입니다.
• Reducer는 외부 요인으로 인해 값이 변경되는일이 없는 순수함수여야 합니다.

Store

• 상태가 관리되는 오직 하나뿐인 저장소의 역할을 합니다.
• Redux의 상태가 저장되어 있는 공간입니다.

Redux의 동작 과정

Action → Dispatch → Reducer → Store

1. Action을 정의한다.
2. Dispatcher에서 Aciton객체를 파라미터로 받아 Reducer 함수로 전달한다.
3. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소(Store)의 상태를 변경한다.

참고자료

• 코딩애플 https://youtu.be/QZcYz2NrDIs
• 생활코딩 https://youtu.be/yjuwpf7VH74

📌 오늘은 스터디원과 페어가 되었다!!! 조금은 편안하게 페어활동을 할 수 있을 것 같다!! 내가 잘 하지 못하는 css의 영역이기 때문에 이전날 css를 최대한 공부해서 다행이다...😀

📗 오늘 학습한 내용

Styled Component를 사용한 UI 패턴 구현

• Modal 구현
• Toggle 구현
• Tab 구현
• Tag 구현

[udemy] React 완벽 가이드 강의

• className도 prop으로 넘겨줄 수 있다.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

📝 중요한 내용

• Styled Component 사용
  • ``(백틱)으로 감싼다.