[TIL] 210820 오늘 공부는 input 오류 해결 및 css flex 속성
드디어 금요일이다~~~~ 무야호~!
어제는 재택을 했는데, 재택이 더 피곤해서(?) 뻗었다. 혼자 하려니 더 힘들고 막막했음...흑흑... 병아리 신입...
지금도 졸리긴 하지만, 오늘 배운것을 꼭 쓰고 가려고 노트북을 다시 켰다!!!! 매일매일 배우는 것은 너무 많지만 짧게 간략하게만 기록의 느낌으로 쓰고 자야겠다.
다 하고 주말에는 앞으로 같이 입사한 동료분과 cs개념(computer science) 스터디를 하기로 했다. 책 한권 사서 읽어가는 느낌으로 아침마다 가볍게 진행해보고자 한다. 그래서 주말에는 어떤 책으로 공부하면 좋을지 찾아봐야겠다.
1) You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
구글링 하면 쉽게 해결책을 얻을 수 있는 오류 중에 하나다. 근데 나는 왜.. input 태그에 onChange가 없으면 value를 못쓰는지가 궁금했다. input 태그에 readOnly를 추가해서 경고창을 없애긴 했는데 Why 가 궁금했다.
결론적으로는, value의 값이 바뀌지 않을때는 readOnly 프로퍼티를 넣어주고, 바뀌는 값일때는 value를 defaultValue로 바꾼 뒤, onChange 이벤트에서 초기 value값을 바꿔주는 이벤트 핸들러를 넣어줘야한다.
<input type="text" value={someState} readOnly/>
html에서 form등의 요소(input, textarea, select)는 일반적으로 자신의 상태를 유지하고, 사용자 입력을 기반으로 업데이트한다. 즉 value입력 요소의 경우 사용자가 입력하는 동안 onChange 이벤트 등을 통해 리액트가 상태 변경을 감지하고 업데이트 되는 것!
변하는 값의 경우 최초에 defalutValue를 업데이트하고, 상태값에 따라 이벤트 핸들러를 통해 value값을 업데이트 하는 방식인 것 같다.
구글링 했는데 해결법을 설명하는 블로그는 많아도 왜 이렇게 해야하는지에 대한 설명은 많이 없어서 찾기 힘들었다.. 아직도 잘 모르겠다. 😣
2) flex의 활용
나는 flex를 정렬하는데에만 사용했었는데, 오늘 Flex를 컨테이너 공간에 따라 크기를 조정하는 역할이 있다는 것을 알게되었다.
flex: 증가너비 감소너비 기본너비;
만약 flex:1; 로 작성하면 flex-grow:1; 과 똑같다. 그렇다면 생략된 shrink, basis의 값을 보면,
flex: 1 1 auto 와 같을까?
No!
flex-basis의 경우 생략되면 0이 적용된다. 즉 flex: 1 1 0 이 된다.
flex-basis의 경우 공간 배분 전 기본 너비를 설정한다. 기본값 auto는 해당 아이템의 width 값을 사용한다. 따로 설정하지 않으면 해당 아이템의 width가 된다.
flex-grow는 아이템이 Flex-basis 값보다 커질 수 있는지 결정하는 속성이다. 0보다 큰 값이 세팅되면 해당 아이템이 유연한 flexible 박스로 변하고 원래 크기보다 커지며 빈 공간을 메운다. 기본값이 0이기 때문에 적용하지 않으면 아이템들은 늘어나지 않는다.
즉, flex-grow에 들어가는 숫자는, 아이템들의 flex-basis를 제외한 여백 부분을 Flex-grow에 지정된 숫자의 비율로 나누어 가진다.
Flex:1 이라면, 남은 빈 공간을 flex를 적용한 item이 채우게 된다. ( flex:1 이면 총 너비의 100%를 채우게 된다)