JS, React 함수 / 라이브러리 정리
2022-06-15(WED) ~
유용한 참고서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference
1. JSON.stringify()
: JS값이나 객체를 JSON 문자열로 변환
2. JSON.parse()
: JSON 문자열을 JS값이나 객체로 변환
3. Object.assign([target 객체], [여러개의 객체])
: 여러 개의 매개변수 객체 중 target 매개변수 객체에 나머지 객체를 병합 -> 여러 객체의 프로퍼티를 복사하여 첫 번째 객체의 프로퍼티에 추가한 뒤에 그 객체를 반환
★ target 객체 지정 필수 ★
4. Object.defineProperty()
: Object.defineProperty(obj, prop, descriptor)
: 객체에 직접 새로운 속성을 정의하거나 이미 존재하는 속성을 수정하고 수정된 객체를 리턴
: 프로퍼티 속성에 접근 권한을 설정할 수 있고, getter/setter를 만들 수 있다.
※ 닷노테이션(.) 이용 시 모든 속성이 true로 설정된 후 생성된다.
ex: Api.instance = new Api();
- descriptor의 속성
| 속성 | 설명 | 디폴트 값 |
| value | 속성의 값 | undefined L |
| configurable | 속성을 변경하거나 삭제 할 경우 true로 설정 | false |
| writable | 속성의 값을 변경할 경우 true로 설정 | false |
| enumarable | for-in 루프에서 해당 프로퍼티를 반환하려면 true로 설정 | false |
| set | 속성 설정자로 사용할 함수 | undefined L |
| get | 속성 접근자로 사용할 함수로 속성 접근시 해당 함수의 반환값이 속성의 값이 됨 | undefined L |
Object.defineProperty(Api, 'instance', { //Api 객체에 instance라는 속성을 정의
value: new Api(), //instance = new Api() -> 속성의 값
writable: false, //값 수정 불가
configurable: false, //값 수정, 삭제 불가
});
5. Date.prototype.toISOString()
: ISO 형식(ISO 8601)의 문자열을 반환
: "YYYY-MM-DDTHH:mm:ss.sssZ"
6. useEffect()
: 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook
: component가 mount, unmount, update 시 특정 작업 처리 가능
→ 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드(ex: componentDidMount() 등..)를 함수형 컴포넌트에서 사용하기 위함!
- 기본 형태 : useEffect(function, deps)
① Component 화면의 첫 rendering시 function 실행 :deps에 빈 배열([]) 주기
② Component가 rendering될 때 마다 function 실행 :deps 생략
③ Component의 특정 값이 update될 때 function 실행 :deps에 검사를 원하는 값 주기
import React, { useEffect, useState } from "react";
const Lifecycle = () => {
const [count, setCount] = useState(0);
const [text, setText] = useState("");
//useEffect(() => {//콜백함수 return 값//}, [Dependency Array]); -> [Dependency Array]에 변화가 생기면
//콜백함수가 작동함
//1. Component Mount Lifecycle 제어 : useEffect() 함수의 두 번째 매개변수(Dependency Array)에 빈 배열[]을 주면,
//첫 번째 매개변수인 콜백함수가 실행됨!
useEffect(() => {
console.log("Mount!"); //탄생
}, []); //Dependency Array에 빈 배열[]을 줌
//2. Component Update Lifecycle 제어 : useEffect() 함수의 두 번째 매개변수(Dependency Array)에 아무것도 주지 않으면,
//첫 번째 매개변수인 콜백함수가 실행됨!
useEffect(() => {
console.log("Update!"); //변화
}); //Dependency Array 을 비워둠
//useEffect(() => {//콜백함수 return 값//}, [Dependency Array]); -> [Dependency Array]에 변화가 생기면
//콜백함수가 작동함
useEffect(() => {
console.log(`count is updated: ${count}`);
if(count > 5) {
alert(`count가 5를 넘었습니다! 1로 초기화합니다.`);
setCount(1); //count를 1로 초기화
}
}, [count]);
useEffect(() => {
console.log(`text is updated: ${text}`);
}, [text]);
return (
<div style={{padding: 20}}>
<div>
{count}
<button onClick={() => setCount(count+1)}>+</button>
</div>
<div>
<input value={text} onChange={(e) => setText(e.target.value)} />
</div>
</div>
);
};
export default Lifecycle;import React, { useEffect, useState } from "react";
const UnmountTest = () => {
//3. Component Unmount Lifecycle 제어 : Mount Lifecycle 제어 방식에 콜백함수 내 콜백함수를 또 주게되면 Unmount 시점에 실행됨
useEffect(() => {
console.log("Mount!"); //Mount 시점
return () => {
console.log("Unmount!"); //Unmount 시점
}
}, []);
return (
<div>Unmount Testing Component</div>
);
};
const Lifecycle = () => {
const [isVisible, setIsVisible] = useState(false);
const toggle = () => {
setIsVisible(!isVisible);
};
return (
<div style={{padding: 20}}>
<button onClick={toggle}>ON/OFF</button>
{/* 단락회로 평가(&&): isVisible이 true일 때만 UnmountTest가 동작함 */}
{isVisible && <UnmountTest />}
</div>
);
};
export default Lifecycle;(① Component Mount LifeCycle 제어 :
- useEffect() 함수의 두 번째 매개변수(deps)에 빈 배열([ ])을 주면, 화면의 첫 rendering때 콜백함수(function)가 실행됨
- deps를 생략한다면, re-rendering때 마다 function이 실행됨
- deps에 특정 값을 주면, 그 값이 update(or mount)될 때 function이 실행됨
② Component Update LifeCycle 제어 :
useEffect() 함수의 두 번째 매개변수(deps)에 아무것도 주지 않으면, 콜백함수(function)이 실행됨
③ Component Unmount LifeCycle 제어 : useEffect() 함수의 콜백함수 내 콜백함수(=cleanup 함수 (return 뒤 나오는 함수))를 또 주게되면, Unmount 시점에 두 번째 콜백함수가 실행됨
④ Component Update 직전 LifeCycle 제어 : 특정 값이 Update되기 직전에 콜백함수 내 콜백함수(=cleanup 함수 (return 뒤 나오는 함수))를 실행하고 싶다면, deps 배열안에 검사하고 싶은 값을 넣으면 됨)
(출처: https://xiubindev.tistory.com/100, https://goddaehee.tistory.com/308)
7. useCallback()
: 필요시에만 rendering이 일어나도록 함
(설명 추가 예정)
8. useRef()
9. useSWR() - Stale-While-Revalidate
: useSWR(key, fetcher)
: 클라이언트 서버에서 data를 가져오는 기능(fetching)을 편리하게 사용할 수 있도록 도와주는 hook
: fetcher라는 함수를 이용해 key라는 주소에서 가져오는 데이터를 전역적으로 관리 → key라는 주소에서 fetcher라는 함수를 실행함
: 두 개의 값, data와 error를 반환
: 한번 fetch한 원격상태의 데이터를 내부적으로 cache. 즉, 데이터를 클라이언트에 잠시 저장 -> 다른 컴포넌트에서 동일한 상태를 사용하고자 할 경우, 이전에 cache했던 상태를 그대로 리턴 -> 원격에 있는 데이터가 마치 클라이언트에 존재하는 것처럼 사용 가능
※ 클라이언트 서버에서만 사용할 수 있어서 POST, PATCH, DELETE 등 데이터베이스의 데이터를 바꿔야 할 경우에는 기존의 redux로 요청을 보내야 함
(출처: https://basemenks.tistory.com/245)
10. event.stopPropagation()
: 현재 이벤트가 *bubble up 단계에서 부모 태그로의 이벤트 전파를 stop 하도록 함
: 전파를 방지해도 이벤트의 기본 동작은 실행되므로, 링크나 버튼의 클릭을 막는 것은 아님
*bubble up: 웹 페이지 내의 버튼을 클릭했을 때, 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응함
(출처: https://ismydream.tistory.com/98)
11. event.preventDefault()
: 선택된 이벤트 외에 별도의 브라우저 행동을 막기 위해 사용
ex) <a> 태그 클릭 시 브라우저 주소 이동 후 자동으로 페이지 상단으로 이동하게 되는데, 여기서 event.preventDefault()를 사용하게 되면, 클릭 이벤트만 발생하게 됨
(출처: https://ismydream.tistory.com/98)
12. put/patch 차이
- put : resource 모든 것을 업데이트 한다. → 여러 속성 중 하나의 속성만 수정 요청을 보낼 경우, 나머지 속성은 null값으로 변한다.
- patch : resource의 일부를 업데이트 한다.
13. some() - Array.prototype.some()
: 배열의 각 엘리먼트에 대해 테스트 함수의 반환 값이 하나라도 true가 있는지 확인
: 하나라도 true가 발생하면 true를 반환
: 모두 false인 경우에만 false 반환
: 기존 배열 값 변경X
= or 조건
cf. every() - and 조건
1. lodash 라이브러리
(ref. https://lodash.com/)
: array, collection, date 등 데이터의 필수적인 구조를 쉽게 다룰 수 있게함
: JS에서 배열 안의 객체들의 값을 handling(배열, 객체 및 문자열 반복 / 복합적인 함수 생성) 할 때 유용 -> JS 코드를 줄여주고 빠른 작업 가능
: 보통 "_" 으로 사용하는데, 그래서 명칭이 lodash(low dash..?) 가 된 것이다.
ex) import _ from 'lodash';
: 여러 메소드가 존재 (우리가 아는 array, collection 메소드와 동일해 보임)