TIL_221209_ 🚩❓✅ React 공부, Redux 특강

내일배움캠프 4기 스파르타코딩 React B반

---

📒 오늘의 공부

1. React Udemy 강의

• React 기초 및 실습 컴포넌트

PROPS

• props로 넘겨줄 때 key값은 내 마음대로 설정해도 된다.
  • 컴포넌트에서는 그 key 이름을 써야한다.
  • props는 동적인 데이터 뿐만 아니라 내가 지정한 value(값)을 넘겨 줄 수 있다.
• component에서 componet를 분리할 때 props로 데이터 넘겨주는 것 주의!
  • App -> A -> B일 때 A에서 props로 전체 데이터를 받아왔고 그 중 date부분만 B로 분리한다.
  • A에서 B에게 props.date 부분을 props로 넘겨줘야 한다.
• wrapper component
  • A 컴포넌트로 내용을 감쌌을 때 안에 있는 것들은 A컴포넌트에서 props.children으로 받는다.
  • A 컴포넌트에 원래 있던 className을 적용시키고 싶으면 A 컴포넌트 파일에서 classes 변수를 설정 해 항상 적용되는 className과 props로 받아온 className을 넣기

---

❓

const classes = "card" + props.className;

• 나눌 때 잘못 나눴는지 CSS가 적용이 안 돼서 일단 나눈 것 적용 취소

---

• 내장 Method
  • toISOString()
  • toLocaleString()
  • getFullYear() - 4자리 수 년도

---

2. Redux 특강

• 목표

  • Redux가 무엇이고 왜 써야 하는지 이해하기

• Redux가 필요한 이유

  • props drilling으로 인한 문제 발생
    -> 중간 컴포넌트가 100개라면 app에서 변경이 일어났을 때 100번 수정해야 함
  • state가 100개 이상일 때
    -> 한글만 담을 수 있는 state에 영문을 추가하게 되면 오류가 남.
    -> state 변경 / 관리는 Redux에서만 하기!

• store

  • 수 많은 state와 Reducer가 있는 저장소
  • dispatch도 있다!

• state

  1. 전역 state -> store에 있음
  2. 컴포넌트 state(지역 state)
  • 모든 state가 Redux로 관리되는 게 아님!

• 작동 원리

  • 'config'폴더의 configStore.js에서 리듀서, store를 만들고 store를 export
  • 'modules'폴더의 counter.js 에서 'Action Value', 'Action creator', 'Reducer'를 만든다.
  • 'Action creator' 로 만들어진 부분을 UI(컴포넌트)에서 method로 쓰면서 Action이 일어나게 한다.

• 실습

  입출금 만들기

  • 터미널에서 redux를 먼저 설치해야 한다.
    yarn add @reduxjs/toolkit react-redux
    -> 링크 참고해서 각 파일에서 redux 연결
    참고: https://react-redux.js.org/tutorials/quick-start
  • 연결하고 보니 버튼 누르기 전에 input에 입력한 값이 자동으로 반영이 됐다.
    -> initialState를 받아오는데 문제가 있었는데
    state={initialState} 여기서 중괄호를 지우니 잘 작동했다.(git commit으로 확인)

---

3. React 입문 과제 다시 한 것 수정

• CustomButton 분리

• 중복 코드 정리(ToDoBox)

• ✅ alert 구현

• ✅ CSS

• 일요일 스터디에서 리뷰하기로 해서 CSS, 주석 등 손 보기!

  • CSS 손 보다가 오늘 Udemy React 강의에서 배운대로 props 잘 넘어갔는지 전체적인 코드 점검!
    -> props 조금 수정하고 주석 더 추가

  • input이 비었을 때 alert 구현이 잘 안돼서 팀원들 도움을 받아 코드를 참고해서 구현했음!
    -> 제목만 비었을 때, 내용만 비었을 때 각각 input창에 focus 되는 부분도 도움 받아 구현했다!

---

🚩

• 할 게 너무 많아
  • 오전 내내 프로그래머스 도전하다 다 주말에 풀기로 하고 넘겨버리고 React 마저 공부했다.