기타등등

다른 페이지에서 사용하는 react query라도 id를 유니크하게 쓰자

페이지 to 페이지로 이동할 때 같은 id를 쓰는 react query가 존재한다면 api를 두번 불러오는 에러가 발생함.

자바스크립트

qweqwd && wqeqwe ? true : false 는 !!(qweqwd && wqeqwe) 로 표현할 수 있다.

컴포넌트 사이에 들어가있는 내부컴포넌트들은 props.children으로 사용할 수 있다.

<Test>
  <One />
  <Two />
<Test/>
  
const Test = ({children}) =>{
  console.log(children)
  return ...
}

객체배열을 map으로 새로운 배열만들기

당므처럼 rows라는 객체 배열이 있을 때, 각 객체의 name으로 배열을 만들 수있다.

const newSelected = rows.map(n => n.name);

배열내에서 값 찾기

selected라는 배열이 있을 때, 값을 넣으면 해당 값이 배열에 존재하는지 true | false로 반환하는 함수이다

const isSelected = name => selected.indexOf(name) !== -1;
isSelected(data);
// true / false

concat함수

concat()은 배열 혹은 string의 집합에서 사용할 수 있는데, 배열과 string들에 사용하면 합쳐주는 역활을 한다.

const str1 = 'Hello';
const str2 = 'World';

console.log(str1.concat(' ', str2));
// Expected output: "Hello World"

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// Expected output: Array ["a", "b", "c", "d", "e", "f"]

export default 잘 사용하기

event.stopPropagation(); - 표안의 버튼 누를 때 체크박스가 동작하는 증상 수정

https://ko.reactjs.org/docs/react-component.html

Treeview Check box

https://smartdevpreneur.com/how-to-create-a-material-ui-treeview-with-styled-checkboxes/

join()

Join함수를 이용하면 배열 to string 하면서 중간에 원하는 것을 넣을 수 도 있고, arr.join('')으로 ''만 넣으면면 그냥 붙어서 출력된다.

var langs = ['HTML', 'CSS', 'JavaScript'];
var res = langs.join();

// 결과 : 'HTML,CSS,JavaScript'


var langs = ['HTML', 'CSS', 'JavaScript'];
var res = langs.join('');

// 결과 : 'HTMLCSSJavaScript'


var langs = ['HTML', 'CSS', 'JavaScript'];
var res = langs.join('/');

// 결과 : 'HTML/CSS/JavaScript'

value 로 key 값 찾기

let obj = { 1: 'a', 2: 'b', 3: 'c', 4: 'd'};
const data = Object.keys(obj).find(key => obj[key] === "c");

console.log(data)
// output 3

MUI select박스에서 options에 배열로 커스텀 컴포넌트를 넣을 수 있다.

opntions = {[
	<div></div>, <div/> , <div/> , <div/>
]}

다음엔 await async 함수를 잘 사용해보자.

throw로 try에서 catch로 err를 전달할 수 있다. 필요한 경우 잘 사용하자