-
splice 와 split :: 활용예제Study/JavaScript 2020. 7. 12. 17:07
splice
자바스크립트의 배열(Array) 객체에서 제공되는 함수인 splice를 이용하면 원하는 위치에 요소를 추가하거나 삭제할 수 있다.
즉, splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.
먼저 splice 함수를 사용해 원하는 위치에 요소를 추가하는 것을 정리해보자.
예를 들어, 먼저 a라는 배열 객체가 다음과 같은 상태라고 해보자.
a.splice(2, 0, "7");
우리는 a 라는 배열의 '2'인덱스를 가진 위치에 0개를 삭제하고 7을 대입했다.
그럼 다시 a의 처음 상태로 돌아가 다음 코드를 실행하면 다음의 상태가 된다.
a.splice(0, 0, "7");
우리는 a라는 변수명을 가진 배열의 0번째 인덱스에 0개의 요소를 삭제하고 '7'을 대입하였다.
이제는 splice를 이용해 추가가 아닌 삭제에 대한 예를 살펴보자.
다음 코드를 실행하면 다음의 상태가 된다.
a.splice(2, 1);
우리는 a라는 변수명을 가진 배열의 인덱스가 '2'인 자리에 있는 1개의 요소를 삭제했다.
split
split() 메서드는 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눈다.
문법
string.split( separator, limit )separator에는 분할의 기준을 넣는다.
예를 들어 쉼표를 기준으로 분할할 때는 ',' 와 같이 한다.
limit로 최대 분할 개수를 정한다. 선택 사항으로, 값을 정하지 않으면 전체를 다 분할한다.
예제를 보자. 결과는 그 아래와 같다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> </head> <body> <p>abc,def,ghi</p> <script> var jbString = 'abc,def,ghi'; var jbSplit = jbString.split(','); for ( var i in jbSplit ) { document.write( '<p>' + jbSplit[i] + '</p>' ); } </script> </body> </html>
활용예제 (splice)
본인은 리엑트로 인스타그램을 클론하여 코딩하는 중,
피드의 댓글기능을 구현하며 자바스크립트의 splice 메소드를 처음 발견하였고, 이를 활용해 댓글 삭제 기능을 구현하였다.
이 예제를 함께 살펴보자.
구현 예시 concat을 이용해 위와 같이 댓글 기능을 구현하였다.
그리고 내가 올린 댓글 중 원하는 댓글을 삭제하고 싶다. 어떻게 해야할까?
인스타 댓글 코드 먼저 본인은 react-icons를 활용한 삭제 아이콘에 onClick 속성을 활용하여
클릭 시 handleDeleteComment 함수를 실행시키되, index 값을 전달하여 handleDeleteComment함수가 이를 활용해 실행되도록 하였다.
인스타 댓글 삭제 함수 그리고 handleDeleteComment 함수에서는 onClick에서 전달받았던 인덱스를 매개변수로 가져왔다.
const 상수 명이 List인 상수에 this.state.commentList를 담아주었다.
참고로 commentList는 코드상에는 빈 배열이지만(블로그에 보이진 않지만),
우리가 코멘트를 달 때마다 배열에 요소들이 담겨 댓글이 달리도록 구현하였다.
그리고 state의 commentList배열이 담긴 List를 splice 메소드를 활용하여
우리가 onClick에서 넘겨받은 즉, 온클릭이 된 인덱스 자리에 있는 요소 1개를 삭제하도록 명령하였다.
이를 코드로 나타낸 부분이 바로 아래와 같다.
List.splice(index, 1);그리고 splice된 List를 다시 state의 commentList에 담아주기 위해 setState를 활용해 데이터를 수정해주었다.
여러분도 이제 간편하게 삭제 기능이 가능하다!: )
참조:
예제 '저의 경험이 담긴 글입니다':)
splice http://www.gisdeveloper.co.kr/?p=2113
split mdn, https://www.codingfactory.net/10424
'Study > JavaScript' 카테고리의 다른 글
자바스크립트란? (0) 2021.08.22 [Data Structure] Set (0) 2020.07.13 Object 프로퍼티 접근, 할당, 중첩 (0) 2020.06.25 클래스 생성자와 메소드 (0) 2020.06.25 function 함수의 형태와 구성 (0) 2020.06.25