본문 바로가기

js3

[JavaScript] filter() 📖리액트를 다루는 기술📖을 공부하면서 컴포넌트의 반복을 공부하면서 배열 객체의 내장함수를 많이 사용하였는데, 이를 좀 더 자세하게 알아보고 싶었다. 리다기에서 filter()메소드를 사용하는 예제가 있었다. 데이터를 제거하는 기능을 필터함수를 사용했다. const onRemove = id => { const nextNames = name.filter(name => name.id !== id); setNames(nextNames); }; 이 함수는 입력된 id를 받아서 그 id와 다른 즉, 해당된 id를 제외한 나머지 id에 해당되는 name들을 모아놓은 배열이 nextNames가 되는것이다. 그러고나서 setNames(nextNames)를 통해서 names값을 업데이트해주는것이다. 그렇다면, 여기서 fi.. 2021. 1. 24.

[JavaScript] push() & concat() 오늘은 리액트를 공부하다가 미뤄놓았던 궁금증을 풀어보았다. 📖리액트를 다루는 기술📖의 6장에서 내장함수에 대한 언급이 있었는데, 거기에 concat, filter와 같은 함수가 있었다. 그런데 concat 함수를 찾아보다보니 push함수와 비교가 많이 되길래 같이 공부해보았다. 이 두 함수들은 배열에 요소를 추가할 때 사용된다. 그럼 그 사이에서 두 함수의 차이는 무엇일까? 먼저, push 함수를 알아보고, concat함수에 대해서 알아보겠다. 왜 두 함수를 같이 비교하는것인가? 그 이유는 두 개의 배열을 하나의 배열로 합칠 때, 일어나는데 하나의 원소를 밀어넣는 push 대신에 concat을 사용하라고 두 함수를 같이 비교하는 것이다. 이 글은 MDN을 참고하여 작성하였다. push() push는 기존.. 2021. 1. 20.

[React] 이벤트 핸들링 EVENT = 특정 '사건' 버튼 클릭 이벤트 => 사용자가 버튼을 클릭한 사건 HTML Activate Lasers HTML onclick이 소문자로 이루어져있음 이벤트를 처리할 함수를 큰따옴표("")로 묶어서 표현해놓았음 React Activate Lasers React onClick의 C가 HTML과 다르게 대문자로 나타냄 이벤트를 전달할 때 문자열이 아닌 함수(이벤트처리 함수)를 전달 Camel Case 파일, 변수, 함수 등 대상의 이름을 띄어쓰기 없이 짓기 위함 리액트의 함수 핸들링에서 사용됨 Event handler = Event Listener 이벤트를 처리하는 함수 어떤 사건이 발생하면, 사건을 처리하는 역할 이벤트 핸들링 공식 문서 쉬운 예시(onClick 사용) JS) onClick .. 2020. 11. 30.

이전 1 다음

티스토리툴바