221103 TIL

1. width : min-content/ max-content / fit-content

동료의 코드를 보다 어떤 것인지 궁금해서 찾아봤다. 

 

min-content 와 max-content는 담고 있는 컨텐트에 의해 width의 값이 결정됨 

min-content는 엘리먼트의 너비를 줄일 수 있을 만큼 최소로 줄이고 싶을 때 사용,

max-content는  너비를 최대한 늘이고 싶을 때 사용, 텍스트의 배경색을 적용할 때 유용하게 사용

 fit-content max-content와 auto의 하이브리드 모드 

가용너비가 부족하지 않은 경우 max-content처럼 컨텐트의 최대 너비를 엘리먼트의 width값으로 사용

그러나 가용너비가 부족한 경우 auto 처럼 가용 너비에서 여백(margin)읠 제외한 너비를 witdh로 사용

 

주말에 조금 더 찾아보자 

출처 https://www.daleseo.com/css-width/

[CSS] width 속성과 너비 결정 매커니즘

 

2. e.preventDefault vs stopPropagation();

갑자기 헷갈려서 정리한다. 

e.preventDefault는 html에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막는 메서드

예를들어 a태그 안에 div태그를 클릭했을 때 a태그의 href 주소로 이동되는 것을 막고 싶을때, 

submit 했을 때 페이지가 리프레쉬 되는 브라우저 고유의 동작을 막을 때, 

 

stopPropagation는 이벤트가 상위 엘리먼트에 전달되지 않도록 막아준다. 

    <div onClick={() => alert("부모에서 실행되었습니다")}>

      <button onClick={() => alert("자식에서 실행되었습니다")}>클릭!!</button>

    </div>

자식 태그인 button 클릭 시 부모태그의 alert가 안띄우고 싶을 때 사용 

 

3. push와 concat 차이 ?

push는 오리지널 값이 바뀐다.

concat은 오리지널은 그대로 두고 새로운 배열을 반환한다.  

let arr1 = [1,2,3];
arr1.push(4) // arr1 [1,2,3,4]

let arr2 = [1,2,3];
let result = arr2.concat(4); // result [1,2,3,4], arr2 [1,2,3]