Development/javascript4 callback으로 받은 값 사용하는 법 callback을 통해 받은 값은 useState를 이용하여 실제로 쓸 수 있는 값으로 저장해야 함 const onFilterChange = (filter) => { const { value } = filter; } value가 필요한 상황 const [receivedValue, setReceivedValue] = React.useState(''); const onFilterChange = (filter) => { const { value } = filter; setReceivedValue(value); } 위와 같이 receivedValue에 저장하여 사용한다. 2022. 11. 30. 메소드 체이닝 체인 형식의 메소드 연결을 말한다. const a = ‘Hello~’; const b = a.split(’’); const b = a.split(’’).reverse(); const b = a.split(’’).reverse().join(’’); split → reverse → join 순으로 실행된다. 2022. 11. 30. 보간법 element-${} 위와 같이 달러 표시와 중괄호를 사용하는 것을 보간법이라 한다. 보간법을 사용하기 위해서는 backtick 기호(`)를 사용해야 한다. `element-${}` div element 1 div element 2 div element 3 div element 4 div element 5 const divElems = document.querySelectorAll('.div'); divElems.forEach(function(item, index) { console.log(`item index: ${index}`); }); 2022. 11. 29. defer div element const divElem = document.querySelector('.div'); console.log('querySelector result: ', divElem); 위와 같이 작성할 경우, 다음과 같이 null값이 반환된다. 웹 브라우저는 HTML의 맨 위에서부터 아래로 순차적으로 문서를 읽어나간다. 이 때, script 요소를 읽은 시점은 body 요소를 읽기 전인데, 스크립트문에 의해 알 수 없는 요소에 대한 querySelector를 실행하고 있는 셈이 된다. 따라서 null이 반환된다. 이를 해결하기 위해선 script 요소에 defer 속성을 추가해주어야 한다. div element defer는 HTML 문서를 모두 읽은 후에 script 파일을 읽도록 지시한다. 2022. 11. 29. 이전 1 다음
