React로 진행한 프로젝트 내에서 공부가 필요했던 라이브러리를 정리합니다.
React 라이브러리/모듈/함수 정리
| 모듈명 | 설명 | 참고주소 |
| pender | 1. 프로미스 기반 액션들을 관리하기 위한 미들웨어와 도구가 포함된 라이브러리 2. redux-promise-middleware와 유사함 3. payload에 프로미스가 있으면 이 프로미스가 시작하기 전, 완료, 실패 했을 때 뒤에 PENDING, SUCCESS, FAILURE접미사를 붙여줌 4. 요청들을 관리하기위한 reduser와 요청관련 액션들을 처리하기 위한 액션 핸들러 함수들을 생성해주는 도구가 있음 |
https://redux-advanced.vlpt.us/2/04.html |
| pender의 type 속성 | pender에 type이 주어지면 type에 접미사를 붙인 액션 핸들러들이 담긴 객체를 생성함. | https://redux-advanced.vlpt.us/2/04.html |
| useRef | 1. React Hooks 중 하나 2. 특정 DOM을 선택해야 할 때 사용함 3. 상태가 변한다 => React 컴포넌트 함수가 호출된다 => 화면이 갱신된다 => 변수 기존 값이 초기화 될 수도 있다 => 이 문제를 해결하기 위한 것(다시 렌더링 되어도 동일한 참조값을 유지하기 위함) |
https://www.daleseo.com/react-hooks-use-ref/ |
| useState | 1. React Hooks 중 하나 2. 함수형 컴포넌트에서 상태(동적인 값)관리*사용자 인터랙션을 통해 컴포넌트 상태값이 동적으로 바뀔 경우 상태 관리하는 것이 필요함 |
https://xiubindev.tistory.com/97 |
| useEffect | ||
| objects.keys() | 1. 주어진 객체의속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는, 열거할 수 있는 배열로 반환함 | https://2ham-s.tistory.com/307 |
| map() | 1. 배열 각각에 대한 값을 꺼내어 배열을 만듦 | https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys |
| FormProvider | 1. 네이티브 폼 유효성 검사 | |
| createAction | 1. 액션 생성 함수 만들어주기 2. 직접 객체를 만들 필요가 없어진다 |
https://juhi.tistory.com/24 |
| handleAction | 1. 액션 생성 함수 만들어주기 2. 리듀서 작성시 더 간단하게 작성 가능함 |
https://juhi.tistory.com/24 |
| dayjs | 1. moment.js와 사용법이 거의 같음 2. 자바스크립트를 통해 날짜와 시간을 출력하는 라이브러리임 | https://goddino.tistory.com/234 |
| toast | 1. 팝업을 위한 것임, 작은 팝업 작업을 통해 간단한 피드백 제공 2. 메시지에 필요한 공간만 차지, 진행 중인 활동은 그대로 표시되고 상호작용이 유지됨 (ui블록킹이 일어나지 않음) 3. 시간이 초과되면 자동으로 사라짐 4. focus를 가지지 않음(2번의 의미인듯) |
https://programmingnote.tistory.com/8?category=799696 |
| shallowEqual | 1. 얕은 비교 2. 배열을 입력하면 안에 있는 속성 값을 각각 비교하여 그 값들이 변경되었을 때만 컴포넌트를 렌더링시킴 3. 매번 shallowEqual을 사용하는 것은 번거롭기에 커스텀 훅을 만드는 경우가 권장됨 |
https://as-you-say.tistory.com/227 |
| useMemo | 1*memozation: 기존에 수행한 연산값을 임시저장하고 동일한 입력이 들어오면 재활용하는 기법 | |
| toJS | Map을 일반 자바스크립트 객체형태로 변화시켜줌 | |
| combineReducers | 1. 여러개로 만든 리듀서를 하나의 combine으로 모아 내보내주는 역할을 한다 | https://uiyoji-journal.tistory.com/85 |
Redux
| 이름 | 설명 | 참고주소 |
| useSelector | 1. redux 훅 2. redux의 state값을 조회하기 위함, 함수형 컴포넌트에서 동적인 값을 관리 3. connet를 통해 상태값을 조회하는 것보다 훨씬 간결하며 코드 가독성이 좋음 4. reducer에 있는 값을 가져옴 |
https://blog.woolta.com/categories/1/posts/200 |
| useActions | 1. 일일히 액션을 생성하여 디스패치 할 함수를 생성하는 작업을 진행함 2. 다수의 액션을 동시에 생성하고자 할 때 유용함 |
react 생명주기 메소드
| 단계 | 이름 | 설명 |
| 렌더링단계 | getDefaultProps | 1. this.props의 기본값 지정 2. 컴포넌트가 만들어지려 할 때 호출 3. 혹은 부모로부터 속성이 전달되었을 때 호출 |
| 렌더링단계 | getInitialState | 1. this.state의 기본값을 지정할 수 있게 함 2. getDefultProps와 마찬가지로 컴포넌트가 만들어지기 전에 호출됨 |
| 렌더링단계 속성변경 단계 |
componentWillMount | 1. 컴포넌트가 DOM안으로 렌더링 되기 전에 호출되는 마지막 메소드 2. 이 메소드 안에서 setState를 호출해도 컴포넌트가 다시 렌더링 되진 않음. 즉, render메소드가 다시 호출되어 화면 내용이 갱신된다거나 하진 않는다 |
| 렌더링단계 속성변경 단계 업데이트 단계 |
render | 1. 모든 컴포넌트에는 이 메소드가 정의되어 있어야 한다 2. 여러 자식 노드를 포함할 수 있는 단 하나의 루트 노드를 리턴하는 책임을 진다 3. 최적화만을 목적으로 하는 경우, 어떤 것도 렌더링하고 싶지 않다면 단순히 null이나 false를 리턴하면 됨 |
| 렌더링단계 | componentDIdMount | 1. 컴포넌트가 랜더링 되어 DOM에 자리 잡은 직후 호출됨 2.컴포넌트 생성 완료 여부의 걱정 필요 없이 DOM 질의 작업 수행 가능 . 모든 준비가 된 컴포넌트에 의존하는 코드라면 모두 이 메소드 안에서 수행하면 됨 |
| 속성변경 단계 | componentWillreceiveProps | 1. 하나의 인자를 받음, 그 인자는 새로 할당하고자 하는 속성 값이 포함된 객체임 |
| 업데이트 단계 속성변경 단계 |
souldComponentUpdate | 1. 상태가 변경되었어도 업데이트를 바라지 않을 떄, 이런 업데이트 여부를 제어함 2. true리턴시 컴포넌트 업데이트, false리턴 시 업데이트 건너뜀 |
| 업데이트 단계 속성변경 단계 |
componentWillUpdate | 1. 컴포넌트가 업데이트 되기 직전에 호출 2. 이 메소드 안의 this.setState를 통해 상태 변경 가능 |
| 업데이트 단계 속성변경 단계 |
componentDIdUpdate | 1. 컴포넌트가 업데이트되고 render메소드가 실행이 끝난 뒤에 호출됨 2. 업데이트 이후 수행하고 싶은 코드가 있다면 이 메소드가 가장 적합한 장소임 |
| 언마운트 단계 | componentWillUnmonut | 1. 이벤트 리스너 제거, 타이머 중단 등의 뒷정리 작업 가능 |