[css] 스타일 속성

:root, documentElement.style.setProperty

다음 메서드를 사용하여 CSS 변수의 값을 설정할 수 있다.

document
.documentElement
.style
.setProperty(--css-variable-name, value)
document.documentElement.style.getPropertyValue("--main-color")
-> red
document.documentElement.style.setProperty("--main-color", "blue")
document.documentElement.style.getPropertyValue("--main-color")
-> blue

출처 : https://ichi.pro/ko/tema-react-guseong-yosoleul-wihan-3-gaji-bangbeob-172599217967593

queryselectorAll 처럼 React에서 특정html 태그에 접근하는 방법은?

참고 링크 :  https://stackoverflow.com/questions/49215076/react-cannot-get-the-component-element-in-the-dom/49236856
+) 추가적으로 queryselectAll은 nodelist를 반환한다(배열형태)

 

input customizing

input range에 e.target.value 찍어보면 범위가 나온다.

input:range 양방향 버튼 만들기 : https://velog.io/@ordidxzero/bidirectional-html-input-range (추가구현)

중복체크기능(추가구현)

=> 쿼리스트링으로 이전, 다음버튼 구현하기

const selectCurrentButton = idx => {
Number(setButtonIndex(idx));
};

const goToPrev = index => {
index = 1 ? changePageByClick(0) : changePageByClick(index - 1);
};

const goToNext = index => {
index = 2 ? changePageByClick(1) : changePageByClick(index + 1);
};

 

fetch오류 _ 임시 헤더가 나타나는 경우의 수

관련링크 : https://developer.chrome.com/docs/devtools/network/reference/?utm_source=devtools#provisional-headers

 

리액트 함수형 컴포넌트에서 prev.Props사용하기 

https://velog.io/@dongdong98/React-Hook-%EC%B4%9D%EC%A0%95%EB%A6%AC

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch
https://developer.mozilla.org/ko/docs/Web/API/FormData

 

params을 써서 조건문을 거는 경우

params = searchParams.get('sub_category_id) //t/f
if (params) {
if (priceValue.length > 0 && query.length === 0) {
navigate(
/products?category_id=1&ordering=-best_ranking&price_upper=${priceValue}
);
} else if (priceValue.length > 0 && query.length > 0) {
navigate(
/products?category_id=1&ordering=${query}&price_upper=${priceValue}
);
} else if (priceValue.length === 0) {
navigate(/products?category_id=1&ordering=${query});
}
} else {
navigate(
/products?category_id=1&ordering=${query}$sub_category_id=${2}&price_upper=${priceValue}
);
}

✔  위와 같이 하게 되면 로직이 너무 복잡해진다.

 

if (priceValue.length > 0 && index > 0) {
navigate(
/products?category_id=1&ordering=-best_ranking&sub_category_id=${index}&price_upper=${priceValue}
);
} else if (priceValue.length === 0 && index > 0) {
navigate(
/products?category_id=1&ordering=-best_ranking&sub_category_id=${index}
);
} else if (priceValue.length > 0 && index === 0) {
navigate(
/products?category_id=1&ordering=-best_ranking&price_upper=${priceValue}
);
} else {
navigate(/products?category_id=1&ordering=-best_ranking);
}

✔  원래 로직이엿는데 이것도 리팩토링이 가능해보인다.

navigate(
          `/products?category_id=1&ordering=-best_ranking&price_upper=${priceValue}&${
            params ? `sub_category_id=${subCategoryNumber}` : ''
          }`

✔  결과물 👆

 

[결론]

navigate(/products${query}, {state: { }});

navigate에 state와 useLocation을 활용하여 조건부로 불러올 수 있음

[출처]
https://chanhuiseok.github.io/posts/react-13/
https://reference-m1.tistory.com/185