배열
[ JavaScript ] 자바스크립트 map( ) 함수
값을 여러개 가지고 있는 배열에서 모든 값을 꺼내고자 할 때, 꺼내는 방법은 정말 다양하게 알려져 있다. 이번 포스팅에선 이러한 배열에서 값 꺼내는 방법 중 map( ) 을 다뤄보도록 하자. 아래와 같은 배열 arr 이 있다고 가정해 보자. let arr = [ 10, 20, 30, 40, 50 ]; arr 배열의 5 개의 값을 전부 꺼내 콘솔에 찍어보고 싶다면 아래처럼 for 문을 이용한 분들도 많았을 것이다. const arr = [ 10, 20, 30, 40, 50 ]; //기본 for문 방식 console.log("기본 for문"); for(let index = 0 ; index < arr.length ; index++) { console.log(arr[index]); } //향상된 for문 방식..
[ JavaScript ] 자바스크립트 배열 concat
만약 [ 1, 2, 3 ] 이렇게 세 개의 값을 가지고 있는 배열 arr 가 있다고 가정할 때, 4 를 배열 arr 에 추가 하고 싶다면 push 메서드를 이용하는 경우가 대부분일 것이다. push 를 사용하는 것이 안 좋다는 말은 아님을 분명히 짚고 넘어가며, 리액트 등의 특정 환경에서는 배열안의 본래 값을 수정하면 안되는 경우도 존재함에 concat 사용을 권장한다. push 는 본 배열안에 값을 직접적으로 박아넣어버리는 개념이고, concat 은 배열을 하나 복사해 이 복사본에 값을 박아버리는 개념이라고 생각하면 된다. 예제 코드를 살펴보자. let arr = [ 1, 2, 3 ]; arr.push(4); // [ 1, 2, 3, 4 ] console.log(arr); 서론에서 언급한대로 [ 1, ..
[ React ] 리액트 Input Form 상태 관리, 배열 관리
지금까지는 자식 컴포넌트가 부모 컴포넌트에게 단순한 Element 를 return 해주는 데에 한했다. 이번 게시글에선 Input Element 와 이를 Form 으로 감싸 Form 의 상태를 직접 관리하고, React 에선 배열을 어떻게 쓰는지 간단하게 알아보자. 먼저 UserInput.js 의 소스를 살펴보자. UserInput.js import React, {Component} from 'react'; class UserInput extends Component { //state 에 userName, userGender, phoneNumber 초기화 state = { userName: '', userGender: '', phoneNumber: '' } inputChange = (e) ..