[React+TS 오류 정복기] Updating a style property during rerender (border) when a conflicting property is set (borderBottom) can lead to styling bugs.

오류

Warning: Updating a style property during rerender (border) when a conflicting property is set (borderBottom) can lead to styling bugs. To avoid this, don't mix shorthand and non-shorthand properties for the same value; instead, replace the shorthand with separate values.

내코드

# 연관있는 코드만 적었습니다.

	const [district, setDistrict] = useState("지역을 선택하세요");

	...

    const handleSelectDistrict = (id: string, each: string) => {
        return (
            <div
				style={{
                    border:
                        id == "district"
                            ? district == "지역을 선택하세요"
                                ? "none"
                                : district == each
                                ? `1px solid ${colors.red}`
                                : `1px solid ${colors.grey}`
                            : id == "district2"
                            ? district2 == ""
                                ? "none"
                                : district2 == each
                                ? `1px solid ${colors.red}`
                                : `1px solid ${colors.grey}`
                            : id == "store"
                            ? store == "업종을 선택하세요"
                                ? "none"
                                : store == each
                                ? `1px solid ${colors.red}`
                                : `1px solid ${colors.grey}`
                            : "",
                    borderBottom:
                        id == "district"
                            ? district != "지역을 선택하세요" &&
                              district != each
                                ? `1px solid ${colors.red}`
                                : "none"
                            : id == "district2"
                            ? district2 != "" && district2 != each
                                ? `1px solid ${colors.red}`
                                : "none"
                            : id == "store"
                            ? store != "업종을 선택하세요" && store != each
                                ? `1px solid ${colors.red}`
                                : "none"
                            : "",

# 설명
# 요소의 onClick으로 district 값을 변경시키고, 변경된 값이 무엇인지에 따라 border의 유무와 색을 조절하려고 했다.

원인

Updating a style property during rerender (border) when a conflicting property is set (borderBottom) can lead to styling bugs.
-> borderBottom이 세팅될때 border를 업데이트하면 스타일링 버그가 생긴다

To avoid this, don't mix shorthand and non-shorthand properties for the same value; instead, replace the shorthand with separate values.
-> 같은 값에 대해 축약형, 비축약형을 으로 섞어 쓰지 말아라 !

해결

                style={{
                    borderStyle: "solid",
                    borderWidth: "0.7px",
                    borderColor:
                        id == "district"
                            ? district == "지역을 선택하세요"
                                ? "transparent"
                                : district == each
                                ? `${colors.red} ${colors.red} transparent ${colors.red}`
                                : `${colors.grey} ${colors.grey} ${colors.red} ${colors.grey}`
                            : id == "district2"
                            ? "transparent"
                            : id == "store"
                            ? store == "업종을 선택하세요"
                                ? "transparent"
                                : each == "카페" && store == "카페"
                                ? `${colors.red} ${colors.red} ${colors.red} ${colors.red}`
                                : each == "카페" && store == "음식점"
                                ? `${colors.grey} ${colors.grey} ${colors.red} ${colors.grey}`
                                : each == "음식점" && store == "카페"
                                ? `${colors.grey} ${colors.grey}  ${colors.grey} ${colors.grey}`
                                : `${colors.red} ${colors.red} transparent ${colors.red}`
                            : "",

borderBottom을 따로 지정해주지 않고 border 유무를 borderColor 4방향 에서 지정했다.
반복은 많지만 더 짧아지고 구분하기에 쉬워졌다 !!

참고 🫶🏻

https://www.inflearn.com/questions/52916/%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94-%EC%A7%88%EB%AC%B8%EC%9D%B4-%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4