컴포넌트로 쪼개서 만드는 조건 :
- 재사용 가능성
- 해당 패턴이 두 번 이상 반복
- 시스템에서 많이 사용
- 독립적 특성
즉, ⚠️ 해당 UI가 어떤 기능을 하고 있는지 고민과 설계의 시간이 깊어져야 한다.
두 가지 패턴으로 바라본다.
컴포넌트 패턴1 : 일반적인 text-link
<!-- 일반 텍스트 링크 -->
<a href="/" class="text-link">
링크 텍스트
</a>컴포넌트 패턴2 : 새창으로 열리는 text-link
<!-- 새창 텍스트 링크 -->
<a href="/" class="text-link" target="_blank" rel="noopenner noreferrer">
링크 텍스트
</a>/* 텍스트 링크 */
.text-link {
background: yellow; /* 선택한 영역이 맞는지 확인이 필요하다면 사용 해보자. */
}
<anchor> 태그는 inline 속성으로 컴포넌트 설계 시 block속성으로 바꿔 놓을 것인지, inline속성으로 유지할 것인지 결정을 해야 한다.
link를 block속성으로 만들어 놓고 위에 있는 HTML 컴포넌트를 가져와서 사용한다면 '링크 텍스트'위아래는 무조건 줄바꿈이 일어나게 된다.
/* 텍스트 링크 */
.text-link {
background: yellow;
display: block;
}
보통 logo를 블록 속성으로 만든 이유 중 하나는 logo 이미지 앞뒤로 다른 요소(텍스트, 리스트 등)가 오더라도 같은 줄에 렌더링 되지 않도록 예측하고 만들기 때문이다.
text-link에 display를 바꾸면서 컴포넌트를 만들지, inline 속성을 유지하면서 만들어야 할까 고민이 필요하다.
text-link가 들어간 'IP 보안'이미지 옆에 'ON/OFF'토글 버튼이 있기 때문에 해당 상황에서 block속성이 적합하다고 가정 해본다.
하지만 text-link 컴포넌트를 가져와 inline 속성으로 유지하여도 토글 배치를 위해 display: flex;를 지정하면 .text-link가 flex item이 되어 block 속성으로 변하기 때문에 매한가지인 상황이다.
슬비님은 바깥 레이아웃은
display: grid;로 많이 만들고, 안쪽 레이아웃은display: flex;를 주로 사용하게 된다고 하셨다.
그렇다면 <anchor>태그는 기본적으로 inline 요소이고 해당 속성을 조금 더 유연하게 하기 위해 flex모델로 사용할 수 있다.
block속성으로 전환되면서 비로소flex모델이 될 수 있다.
해당 inline특성을 유지하면서 flex모델을 쓰고 싶다면 inline-flex를 사용해도 된다.
작은 단위의 컴포넌트 만들 때
inline-flex가 때로는 효과적이다.
.text-link {
background: yellow;
display: inline-flex;
}
inline-flex 적용 결과 분리가 되면서 inline요소를 수평으로 쌓을 때 흔히 보이는 공백 문자가 사라지는 것을 볼 수 있다.
flexable하고 얼마든지 inline 요소를 배치할 수 있다. 즉, 블록과 인라인 특성이 공존한 display: inline-block 특성을 그대로 가지고 있으면서 추가로 flex의 특성을 더 갖고 있는 샘이다.
.text-link {
background: yellow;
display: inline-flex;
flex-flow: row nowrap; /* inline 속성여부 확인 */
width: 4rem; /* inline 속성여부 확인 */
}
텍스트를 길게 하고 가로 길이를 줄면서 가로 정렬에 줄바꿈 미허용으로 지정하면 inline 속성에서만 나타는 상황이 렌더링 되는 것으로 증명해볼 수 있다.
display: inline-block 특성을 가지고 있기 때문에 추후 해당 컴포넌트에서 가로와 세로 값을 바로 지정이 가능하고
내부에서 글자 줄바꿈도 커스텀할 수 있는 장점이 있다.
display: inline-blockvs.display: inline-flex;
inline-block: 고정된 크기inline-flex: 유연한 크기
해당 컴포넌트에 텍스트 크기 미지정 하여도 컴포넌트를 가져다 사용하는 곧에서 글자 크기를 지정할 수도 있다.
단, 본인이 판단하기에 해당 컴포넌트는
14px의 폰트가 더 많다면 defalt로font-size: var(--font-md);변수 지정하여 재정의 해도 된다.추후 300개의
--blue-100을 수정할 경우, 한번에 보수가 쉬워지며, 해당 컴포넌트의 자식 요소까지 한번에 색상 변경이 가능하다.추가로 이후 React를 배우게 되면 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는
Props(Properties의 줄임말)가 너무 깊어지면Prop Drilling을 사용하는데 이때 지역변수 선언이 많이 활용되기도 한다.**Prop Drilling : 컴포넌트 계층 구조에서 상위(부모) 컴포넌트의 데이터를 하위(자식) 컴포넌트로 전달하기 위해 여러 중간 컴포넌트를 거쳐 props를 전달하는 과정을 의미
키보드로 디자인 접근하기
&:focus {
outline: 0;
box-shadow: 0 0 0 1px var(--blue-900);
border-radius: var(--rounded-xs);
}
모든 디자인은 탭(Tab)키로 접근하면 outline(Focus Ring)이 생긴다.
그리고 브라우저 agent 마다 focus ring이 다르다. (예: 예전에 firefox는 focus ring이 검은 점선 이었다.)
지금은 focus ring 디자인을 변경 해줄 수 있다.
input:focus {
outline: 3px solid red;
}border shorthand(단축 속성)와 비슷하다.
단, ouline 디자인을 사용하는 사람이 많지만 박스의 모서리를 각지게 하는 단점이 있다.
이를 해결하기 위해 box-shadow를 적용해본다.
box-shadow: 0(X축 움직임) 0(Y축 움직임) 0(blur처리) 1px(정도 퍼지게 만들기) red;마치 border를 준것 처럼 둥근 모서리 값으로 테두리가 생긴 것을 볼 수 있다.
&:focus {
outline: 0px solid blue;
box-shadow: 0 0 0 1px red;
}
border를 주면 상자 크기에 영향을 주고,outline과box-shadow는 상태 크기에 영향을 주지 않는 특성이 있다.즉, 상자 위에 겹쳐지는 개념이다.
그래서 box-shadow를 많이 활용하게 된다.
box-doadow를 주면border-radius를 이용하여 변수를 만들어 Tab키로 접근했을 때 동그란 모서리를 렌더링할 수 있다.
border-radius: var(--rounded-xs);
즉, outline 디자인으로 만으로는 구현하기 어렵고 focus 디자인을 활용해본 케이스다.
최종 text-list 컴포넌트
