TIL_230119_ React, Redux(Toolkit), Typescript

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

---

📒 오늘의 공부

1. 프로그래머스 JS

Lv0. 배열뒤집기

• 바로 sort()가 떠올랐는데 잘 안풀림
  • for문 돌릴 필요가 없었는데 for문을 돌리고 그 안에서 sort하고 있었음;
  • 생각을 다시 함
• 배열의 길이 먼저 구하기
  
  • 이렇게 하니 결과는 5,4,3,4,5
    -> 배열의 길이와 상관 없이 항상 끝 2자리는 순서가 바뀌지 않는다.
    -> 왜..?
    -> num_list[i] = num_list[arrLength - f]가 서로 같은 수 일 때 이후로는 순서가 바뀌지 않음..

다른 풀이

• for문 이용

  • const reverse = []; for(let i=arr.length-1; i >= 0; i--) { reverse.push(arr[i]); }
    

• reverse()

  • arr.reverse() 하면 끝..!
  • 원본 배열은 유지하기
    -> [...arr].reverse()

• 다른 풀이들을 다 보니 접근은 잘 한 것 같은데 내 방식이 좀 복잡했음!! 프로그래머스 매일 풀어야지..

---

2. React, Redux, Toolkit, Typescript

• Udemy react 강의

React

알게된 것

• 포털

  • 원하는 위치에서 html 코드가 렌더링 되게 하기
  • {ReactDOM.createPortal()}은 jsx를 사용하는 곳 어디에서든 쓸 수 있다.

• useRef()

  • dom 대신 focus를 주는 걸로 사용해왔는데 state 대신 이용할 수 있다.
  • useRef로 value에 접근할 수 있어 input에 value, onchange 등을 설정하지 않아도 돼서 코드양이 줄어든다.
  • input을 초기화 하고 싶을 땐 dom 조작을 해야 한다는 것
    setEnteredName("") 대신
    name_input.current.value = ""
  • 제어되지 않는 컴포넌트라고 불림
    -> 리액트의 state로 관리되지 않기 때문

• localStorage를 활용한 로그인, 로그아웃 관리

  • 브라우저에 내장된 localStorage를 이용
  • 로그인 버튼 함수에 추가
    localStorage.setItem("isLoggedIn", "1");
    -> 사용자가 로그인 했을 때 = 1, 아니면 = 0
  • 로그아웃 버튼을 눌렀을 때
    localStorage.removeItem("isLoggedIn");
  • 첫렌더링 시 한 번만 실행되도록 useEffect 쓰기
    

• useEffect로 이메일, 비밀번호 유효성 검사를 한 번에 하기

  • setFormIsValid가 이메일, 비밀번호가 각각 입력될 때 실행됐다면 useEffect로 두 값이 입력될 때마다 실행되게 하기
    

• useEffect 훅은 sideEffect를 처리하기 위해 존재

  • sideEffect는 어떤 액션에 대한 응답으로 실행되는 액션 ex) 이메일, 비밀번호가 입력됐을 때 실행되는 유효성 검사(액션)

• useEffect 안에서 setTimeout과 cleanUp 함수
  

• Reducer 함수, react context 사용 전에 redux 강의로 넘어감

  ---

Redux

알게 된 것

• 리덕스는 리액트 뿐만 아니라 다른 언어에서도 사용할 수 있다.

  • node에서 redux 사용하기 실습
  • npm init -y npm install redux

• 리액트 앱에서 redux 쓰기

  • store를 만들고 export 한 후 최상위 index.js에서 provider로 store를 제공하는 이유
    -> 앱 전체 혹은 하위 컴포넌트들에서 store에 접근할 수 있다.

• class 기반 component에서는 hook을 사용하지 못하기 때문에 {counter}를 이용해야 한다.

  • '248. 클래스 기반 컴포넌트' 참고

  ---

Redux toolkit

알게 된 것

npm install react-redux
npm install @reduxjs/toolkit

• 둘 모두 설치해줘야 함

• 리덕스를 사용할 때는 기존 값을 절대 변경하지 않고 복사해와서 사용해야 하기 때문에 counter, showCounter를 재정의해줘야 했지만
  

  • redux toolkit의 reducer 안에서는 자동으로 복사가 되기 때문에 이렇게 사용해도 된다.
    

• firebase로 data 저장하기

  • firebase와 redux를 같이 쓸 때 어떠한 비동기적 로직도 reducer 안에 들어가선 안 된다.
    ex. fetch()
  • realtime database가 잘 안돼서 스스로 firebase 설치, firestore 연결해서 db에 장바구니에 들어가는 제품 넣었는데 장바구니에 넣을 때마다 quantity만 바껴서 전체 리스트가 배열로 매번 들어감..

    ---

Typescript

알게 된 것

• 개별 파일 컴파일
  • npx tsc with-typescript.ts
  • js로 생성된 파일의 변수명과 ts파일의 변수명이 같다고 ts파일 내에서 오류가 났음.
  • js에서 변수명을 바꾸니 오류는 해결됐지만 index.html에 js를 불러와 실행시키니 ts에서 선언한 변수명을 찾을 수 없다는 오류
  • ts파일에서 오류가 생기는 것을 무시하고 js와 ts의 변수명을 원래대로 똑같이 하니 브라우저에서 오류 없이 js파일의 console이 잘 찍힘..

---

3. Typescript Quiz

• enum

  • 객체에 key가 아닌 value로 접근하면 에러

• 타입 지정 오류
  

  • let v1: {name:string};으로 타입을 정의해주니 오류 사라짐!

• 함수의 인자, value의 타입이 number지만 return이 if문에 따라 number | string 일 때

  • 함수에 들어가는 숫자에 따른 결과 값과 상관없이 해당 함수를 호출하는 상수의 타입 또한 number | string 이어야 한다.