🎀 주간 목표 달성 확인
✅ CORS가 뭘까? 관련 블로그 포스팅
✅ 리액트 라우터 정리 (react-router-dom) 관련 블로그 포스팅
✅ CSR, SSR, SSG 각 특징 관련 블로그 포스팅
✅ CSS-in-CSS와 CSS-in-JS (+ css framework) 관련 블로그 포스팅
✅ 리액트/Styled Components (7주차 강의) 수강 완료하기
✅ 딥다이브 스터디 1회차 진행 (1회차 자료 보러가기)
🎀 피드백
🧷 자주 사용될 것 같은 로직은 함수화 하자
이메일의 유무를 확인하는 로직이 있었다.
그냥 코드 자체를 함수화하지 않고 사용하고 있었다.
{user.email !== "" ||
user.email !== undefined ||
user.email !== null ? (
<ProfileImageEmailInfo/>
) : (
<GradientButton>
로그인
</GradientButton>
)}하지만 이메일 확인 로직은 재사용 될 가능성이 높다는 판단이 있었다.
그래서 아래와 같이 util.js 파일에 함수화 하여 리펙토링해 주었다.
const isValidEmail = (email) => {
return email !== "" && email !== undefined && email !== null;
};재사용도 가능하게 되었지만 가독성도 높아지게 되었다.
{isValidEmail(user.email) ? (
<ProfileImageEmailInfo/>
) : (
<GradientButton>
로그인
</GradientButton>
)}🧷 리액트에서 DOM을 직접 조작해 버리면 어카미!!
<ul>
{tagList.map((tag) => (
<li
id={tag.id}
key={tag.id}
onClick={onClick}
data-tag={tag.name}
data-id={tag.id}
>
<p>{tag.name}</p>
</li>
))}
</ul>위 코드에서 처럼,
data-tag와 data-id를 생성했고
const handleActiveListClick = async (e) => {
const everyTagLi = document.querySelectorAll(".sorting-group ul li");
const targetTag = e.target;
const targetTagLi = targetTag.closest("li");
const targetTagText = targetTagLi.getAttribute("data-tag");
const targetTagId = targetTagLi.getAttribute("data-id");
};부모 컴포넌트 코드는 위와 같다.
나도 모르게 자연스럽게 바닐라 JS에서 하듯이 data 속성을 받아와서 조작해주고 있었다.
하지만 리액트에서는 dom을 직접 조작하지 않아도 된다는 사실!!!
<ul>
{tagList.map((tag) => (
<li
id={tag.id}
key={tag.id}
onClick={() => onClickTag(tag.name, tag.id)}
className={selectedTagName === tag.name ? ` active` : null}
>
<p>{tag.name}</p>
</li>
))}
</ul>- 자식 컴포넌트에서 onClick할 때 함수 이름을 더 가독성 좋은
onClickTag로 변경했다. - 필요 없는 data 속성 삭제
onClickTag함수에 인자로 필요한 값들을 부모 컴포넌트로 보내준다.
(이때 화살표 함수를 사용해 주어야 한다.)
const handleActiveListClick = async (tagName, tagId) => {
const targetTagText = tagName;
const targetTagId = tagId;
};부모 컴포넌트 onClick 함수에서 받아와서 사용하면 끝이다!!
🧷 그럼에도, css-in-js
나는 이전에 웹퍼블리셔 직무로 근무한 적이 있다.
CSS를 처음 배울 때는 주로 순수 CSS만을 사용했었고,
실무에서는 SCSS를 사용하여, 중복 가능성과 변수 재사용을 고려하여 디자인하고 작성해야 했다.
그래서 그런가,
나는 모든 것을 직접 짤 수 있는 자유로운 CSS 작업을 선호하게 되었다.
-
module.css
-
SASS/SCSS
-
css framework는 선호하지 않는다.
용량이 크기도 하고, 자유도가 현저히 떨어진다는 점에서 그렇다.
(개인 의견입니다...ㅜㅜ 반박 시 여러분이 다 맞음)
그런데, 최근 강의를 들으면서 css-in-js(styled components)에 대해 알게 되었다.
동적인 스타일링이 가능하고, 별도의 css 파일 없이 jsx 한 파일에서 작성 가능하다는 점에서
엄청난 강점을 가지고 있다는 생각이 들었다.
하지만 개인적인 경험을 고려하면, 굳이...? 라는 생각도 들었다.
그냥 module.css와 scss를 함께 사용하면 해결될 문제라 생각하기 때문이다.
- 별도의 css 파일 없이 jsx 한 파일에서 작성 가능
: 하지만 jsx 파일에 css가 너무 길어지면 스크롤도 같이 무지하게 길어진다. - 동적인 스타일링 가능
: 클래스 네임으로도 충분히 동적 스타일링 가능하다.
styled components 가 길어지는 것을 방지하기 위해 style 파일을 따로 분리해 사용할 수 있다.
하지만 이런 식으로 굳이 분리해서 사용할 거라면,,, module 사용해도 되지 않을까?
게다가 공부하다 보니 (CSS-in-CSS와 CSS-in-JS (+ css framework))
css-in-js의 나쁜 점/못된 점에 대해 알게 되었다
이렇게까지 와버리니, 점점 css-in-js를 멀리하고 싶다는 생각이 들기 시작했다ㅋㅋㅋ
하지만 나는 개발자니까 도전해 봐야지 (ง •̀_•́)ง
그럼에도 불구하고 내가 css-in-js를 사용해 봐야하는 이유는 아래 세가지로도 충분하다.
- 아직 다양한 프로젝트에서 광범위하게 css-in-js를 사용해 보지 않았다.
(잘 모르면서 쓰기 싫다고 찡찡대면 안됨) - 단점만큼 장점도 분명히 존재한다.
- 많은 회사에서 css-in-js를 실제로 사용중이다.
(그만한 이유가 분명히 있을 것임)
그래서 첫 프로젝트에서는 style components를 사용하기로 결정했다.
깊게 사용해 보고, 개인적인 의견을 다시 한번 작성해 봐야겠다.
🎀 한주를 마무리하며!
☘️ 블로그 태그 이벤트 당첨 ㅎㅎㅎ
블로그 태그 이벤트에 꾸준히 참여하고 있었는데 이렇게 기프티콘을 받게 되었다 ❤️
기분이 정말 정말 좋다! ㅎㅎㅎ
다음에도 중복으로 받을 수 있는진 모르겠지만,, 계속 태그는 달아야겠다 ㅎㅎㅎ
