내일배움캠프 4기 스파르타코딩 React B반
📒 오늘의 공부
1. React - Udemy react 강의
React - 사용자 입력값 관리
알게 된 것
-
module.css를 import 할 때
import classes from "./AddUser.module.css"- 사용할 땐
<Card className={classes.input}>
- 사용할 땐
-
input 활용
- input의 type
- 그 동안 type을 정하지 않고 썼는데
type="text"/type="number"/type="textarea"
이렇게 다양하게 쓸 수 있다.
-
입력된 내용이 없을 때
!를 쓸 수도 있고
enteredUsername.trim().length === 0
trim으로 공백을 제거한 길이가 0일 때를 쓸 수 있다. -
형제 컴포넌트끼리 데이터를 주고 받아야 할 때
- 부모 컴포넌트 이용하기
- AddUser.jsx에 함수를 props로 보내기
- AddUser.jsx에서 props로 받은 함수에 인자를 넣어보내기
- App.jsx에서 인자로 받은 데이터로 list를 최신으로 교체
->...prev,~ - id는 인자로 받은 기존 데이터에 없지만 새로운 list로 업데이트할 때 넣어줄 수 있다.
->Math.random().toString()으로 무작위 숫자를 문자열로 넣기
-> age를 입력할 때 문자열로 받도록 했음 - 추가로 알아본 것:
generateRandomString(num)
-> num의 길이만큼 랜덤 문자열 생성 UserList컴포넌트는 AddUser가 전해준 데이터를 App.jsx를 통해 props로 받아 쓸 수 있다.
- 부모 컴포넌트 이용하기
-
component 재사용의 중요성
- UI로 만든 Card, Button 등을 여러번 재사용
- ☑️ 기존에 작업한 것들 컴포넌트 분리해보기
-
jsx문법은 하나의 element만 있어야 하기 때문에 가끔
<div>로 전체를 감싸줘야 할 필요가 있다.- div의 경우 Dom에서 렌더링이 되기 때문에
Wrapper컴포넌트를 만들어 쓰는 방법도 있다.
- props로 받은 내용을 반환만 해주기 때문에 dom에 렌더링 되지 않는다.
- 다른 방법
-><> </>항상 작동하지는 않음. 프로젝트 설정이 지원한다면 사용해도 괜찮다.
-><React.Fragment>내장된 wrapper 사용
-> react에서{Fragment}import 후<Fragment>로 사용 가능
- div의 경우 Dom에서 렌더링이 되기 때문에
문제 및 해결
- handleChange 함수 하나로 두 input을 모두 관리하고 싶어서 이렇게 코드를 짰는데 오류
- if문에 걸리는 username input에 값이 입력되지 않고
오류
the specified value cannot be parsed, or is out of range.
- if문에 걸리는 username input에 값이 입력되지 않고
- 해결
if (event.target.name === "userName")- target을 써주지 않아서 오류가 났던 것
더 나아가기
-
수업에서는 alert를 주지 않았지만 UX를 향상시키기 위해 내용이 입력되지 않았을 때 alert 추가 및 useRef 이용해 해당 input에 focus
-
userName과 userAge가 입력되었지만 age가 1이하일 때로 변경 및 유효성 검사 추가(+focus)
2. Typescript TimeAttak
React 과제 refactoring
-
리액트 숙련 과제(redux) refactoring
- 기존 프로젝트를 clone 받아서 오류를 수정하며 하는 것 보다 프로젝트를 새로 만들어서 하는 게 시간 안에 할 수 있을 것 같아 처음부터 만들기 시작
- 기존 과제 파일, 블로그 참고
문제 및 해결
- style.js 를 ts파일로 변경하니 오류
npm i --save-dev @types/styled-components설치해서 해결
문제 및 해결
-
document.get~focus()부분을 type정의 하기 어려워서 useRef()로 바꿈 -
대원의 도움을 받아 해결
const content_input = useRef<HTMLInputElement>(null); -
추가적으로 조건문에 input.current를 넣어줘야 한다.
2. React - Component Lifecycle 강의
알게 된 것
-
컴포넌트가 Mount, Update, Unmount되는 과정
-
setState는 비동기적이다.
-
console.log는 동기적이다.
-
batching(일괄처리)
- 동일한 scope내에서 실행되는 state 변경함수가 2개 이상일 때 모든 state 변경함수를 모아 한 번에 state 변경 시킨 후 리렌더링을 한 번만 한다.
-
useEffect는 렌더링 과정에서 실행되지 않고 return이 끝면서 Mount된 후에 실행 된다.
-
useQuery
- 첫렌더링시 isLoading이 true라 data를 아직 안 받아온 상태
- return이 끝나면서 mount가 된 후에 API호출이 일어나면서 data를 받아와 state 변경이 일어난다.(리렌더링)
- 첫렌더링시엔 data가 undefined라 바로 jsx에서 data.map을 쓸 수 없다.
->data?map혹은 return문 위에if(isLoading)~등의 예외 처리를 해야 한다.
