[취업준비일지] - 96

1.현재 버튼이 가지고 있지 않은 값을 state에 넣고 싶은 경우
parentElement를 통해 부모 요소를 따라 올라갈 수 있다.

const getParentText = (e) =>{
  console.log(e.target.parentElement.textContent)
}
<div>
 <button onclick(getParentText)/>
 수정하기
</div>

2.number input창을 사용할 경우 디지털 시계형태의 입력을 위해
0~59로 input에 넣을 수 있는 숫자를 제한하고 싶지만
길이의 제한만 가능할 뿐 실질적으로 들어가는 숫자를 통제하기 어려울 때는
아래와 같이 useState에 넣기 전 숫자 변환을 거치면
100을 넣어도 59가 들어가고 -1을 입력해도 0이 들어간다.
setTime(Math.max(0,Math.min(59,e.target.value)))

 

3.input창에서 나온 값을 state로 넣고 싶지만 
하나하나 변화값을 넣기에는 랜더링이 부담스러운 경우
debounce를 사용해도 좋지만 onBlur를 사용해도 좋다.

input값의 실시간 변화는 input 자체에서 표기되며(onChange미사용시)
반영시키기 위한 행동은 submit, 등록, 시작 등 다른 버튼을 눌러야 할 경우
필수적으로 blur처리가 되기 때문에(Enter를 사용하는 경우 사용 불가)
state에는 딱 한번씩만 들어가게 할 수 있어 랜더링을 최대한으로 줄일 수 있다.





(1).백준 15819 너의 핸들은 문제는 아이디를 사전식 순서로 구분할 경우
index와 아이디들을 제공할 때 사전식으로 인덱스에 해당하는 아이디를 구하는 문제였다.

테스트해보니 추가적인 조치가 필요한 정렬이 아닌 sort만으로 가능했기 때문에
.sort로 정렬된 배열에 [index-1](1부터 제공했기 때문에)을 넣어 해결했다.

const input = `4 1
acka1357
spectaclehong
mitslll
luke0201`.split('\n')

let sortedArr = input.slice(1).sort()
let targetIndex = input[0].split(' ').map(Number)[1]
console.log(sortedArr[targetIndex-1])