[React 리액트/CSS] CSS가 제대로 적용되지 않을 때 해결법

시작 전에..

* 그냥 아주 기본 중에 기본 중에 기본적인 것을 제대로 하지 못한

어떤 어처구니 없는 바보 꿔보의 행동을 다시는 반복하지 않기 위해 오답노트용 포스팅임을 알려드립니다.

---

프로젝트를 진행하고 있던 와중...

placeholder를 이용해서 로그인 화면을 꾸미고 있었는데

CSS가 맘에 안들어서 수정하려고 했는데 아무리 수정해도 적용이 안됐다

 

login-box 부분이 안 먹히는 건가 싶어서 다른 CSS도 수정했는데 전부 먹통..ㅠ

근데 또 다른 페이지의 CSS를 수정해보니 적용돼서 login.js 페이지와 관련된 CSS가 전혀 안 먹혔다 ㅠㅠ

 

내 코딩 친구 GPT 한테 바로 달려가서 물어봤는데,

 

나 분명히 다 했는데 !!!!!

그래서 망연자실.. 이건 어떻게 해결해야하는 거지,, 하던 와중

 

생각해보니까 아무리 CSS를 바꿔도 안 바뀌고 내가 제일 처음에 적용해놓은 CSS들은 적용되는 게 이상했다

차라리 아예 CSS가 초기화 되거나 그런거면 이해가 되는데,, 뭔가 CSS 잠김이 된 느낌??

 

문제는 정말 정말 기초적인 부분이었다...

---

React로 개발을 하면서 CSS를 구분해놓기 위해

 

이런 식으로 .js 파일 하나 + .css 파일 하나 생성해서 만들었다

예를 들어서, Login.js 파일을 만드는 과정에서 필요한 CSS 들은 Login.css 파일에 만들어서 import 해오는 형식이었다

그래서 당연히 Account.css와 Login.css는 아예 별개의 파일일 거라고 생각했는지....

귀차니즘으로 인해 Account.css 파일에서 필요한 CSS들을 Login.css 파일에서 그대로 살짝 바꿔서 썼다

이게 왜 문제일까..?

 

그렇다... CSS의 이름을 하나도 수정 안하고 '그대로' 갖다 썼다...

 

그래서 계속 같은 이름의 CSS들끼리 덮어쓰기가 되면서

Login.css의 '.Login-box' 를 수정해도

Account.css의 '.Login-box'를 불러와서 전혀 수정이 안되는 거였다...

 

결국 모든 CSS 이름을 다시 수정하고, 각 .css파일의 .js파일의 className을 다시 수정해야하는 사태 발생...

이거 해결하려면 시간이 꽤 오래 걸릴 것 같다... (오늘 날 잡고 해야지)

 

이참에 보다 깔끔한 코드로 만들기 위해

자주 쓰는 CSS들은 common.css 파일에 별도로 저장해서 공용으로 쓰는 공간을 만들고

각각에서만 생기는 CSS들을 각 페이지의 맨 앞글자에서 따와 L-Login-box / A-Login-box 이런 식으로 만들 예정이다