TIL_221212_ ❓❗✅React 숙련 강의 - Hooks, Redux, 실습(TODO)

정윤숙·2022년 12월 12일

TIL

목록 보기

43/192

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

📒 오늘의 공부

1. React 숙련 강의

pages를 만들어 app.js와 연결한 뒤 app.js는 깔끔하게 유지하고 새로운 내용을 배울 때마다 components로 만들어 연결했다.(React_Sparta_Class repository)

CSS-in-JS

자바스크립트로 CSS코드를 작성하는 방식
styled-components - 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 해주는 패키지
- 터미널 설치 yarn add styled-components
- vscode-styled-components extension 설치
'styled'키워드를 사용해 백틱 안에 css 코드를 작성하고 jsx에서 html 태그처럼 사용하기
- span ➡️ styled.span
  button ➡️ styled.button
props를 통해서 부모 컴포넌트로부터 값을 전달받고 조건문을 이용한 조건부 스타일링을 할 수 있다.

React Hooks

useState
- 함수형 업데이트
- 일반 업데이트
  -> onClick했을 때 명령의 수가 많아도 하나로 모아 최종적으로 한 번만 실행
- 함수형 업데이트
  -> 명령을 순차적으로 1번씩 실행
  ex) 숫자를 1씩 더하는 명령이 3번 실행되면 위에서부터 하나씩 더해져 총 3이 된다.
useEffect
- 화면에 어떤 component가 나타나거나 사라졌을 때(= component mount, unmount) 실행하고자 하는 함수를 제어하는 Hook
  ⭐ 컴포넌트가 렌더링 될 때 실행된다
- 무한 리렌더링
1. 첫렌더링 됐을 때 useEffect 실행
2. state가 변경될 때 App component가 리렌더링 됨
3. 리렌더링으로 인해 useEffect가 다시 실행
- 의존성 배열(dependency array)
```
useEffect(()=>{
 //실행하고 싶은 함수
}, [의존성배열])
```
  -> 의존성배열에 넣은 값이 변경될 때만 useEffect 실행
  -> [] 빈 배열이면 함수가 한 번만 실행된다.
- clean up(향후에 다시 배움 + navigate())
  -> component가 사라졌을 때 특정 작업을 실행
  -> useEffect 안에서 return으로 실행하고 싶은 함수를 넣는다.
- 의존성 배열에 따라 해야 하는 일이 다를 땐 useEffect를 분리해서 쓸 수 있다.

Redux

Local state - 컴포넌트에서 useState를 이용해서 생성한 state
Global state - Redux에서 생성된 State
- Redux(전역 상태관리 라이브러리)는 state가 생성되는 “중앙 state 관리소”를 사용할 수 있게 도와주는 패키지
Redux 설정
- yarn add redux react-redux
- configStore.js - store를 만드는 설정 코드가 있는 파일
- modules 폴더 - components 파일이 있는 곳
Redux 사용
- modeule을 만들면 store에 연결하기(configStore.js)
- component에서 store를 조회할 때 useSelector 사용
  -> useSelector, state는 module의 모든 state를 조회할 수 있는 값
- 실행하려는 명령 = action
- action 객체
  -> 반드시 type이라는 key를 가져야 한다.
  (reducer가 객체 안에서 key를 확인)
  -> type은 대문자(상수)
- dispatch
  -> action객체를 reducer로 보내는 전달자 함수
  -> useDispatch라는 hook을 이용
- reducer(counter.js)
  -> dispatch를 통해 전달 받은 action객체를 검사
  -> 조건이 일치했을 때 변화를 일으키는 함수
- action creator
  -> action 객체를 한 곳에서 관리할 수 있도록 "함수"와 액션 value를 상수로 만들기
  -> App.js에서 actioncreator import해서 사용
  -> 휴먼 에러 방지, 유지보수 효율성 증가, action의 listup
- payload
  -> reducer로 어떤 정보를 같이 보내고 싶을 때 이용
  -> reducer에서 쓸 때는 action.payload
⭐ 모듈을 만들 때 list up하기

실습 - Redux로 Todo List 만들기

List Up
- 컴포넌트는 자유롭게 나누고 사유는 README에 작성
  -> tutor code 따라 나눠서 따로 작성하지 않음
- ✅모듈관련 요소 =todo.js`
- ✅ CSS는 styled-components 이용
- ✅ 추가하기를 누르면 input에 쓴 내용 화면에 렌더링
- ✅ input이 공백이면 추가되지 않게 하기
진행 과정
- redux, styled-component부터 설치 후 폴더 생성
- 강의자료 참고해서 만듦
- 아직 익숙하지 않다 보니 이거 연결하다가 저거 연결하고 왔다 갔다 하면서 만들었다.
- import를 깜빡하거나 함수호출()을 안 하는 자잘한 실수도 했다.
❓
- onchangeHandler로 input의 값도 잘 받아오고 화면에 initialState도 잘 보이는데 추가하기만 누르면 오류발생
  Objects are not valid as a React child
  -> Object데이터를 그대로 렌더링 하려고 했기 때문이라고 나온다.