map
[ 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문 방식..
[ React ] 리액트 Map 과 데이터 랜더링
이번 게시글에선 Map 을 사용해 데이터를 직접 랜더링해보는 과정을 볼 것이다. 이전 게시글의 소스를 기반으로 수정하여 사용했음을 참고. 이번엔 직원이름, 연차를 입력받아 등록하는 화면을 만들고자 한다. 사용하게 될 js 파일을 먼저 요약정리부터 해본다면 아래와 같다. App.js - 메인컴포넌트. UserInput.js ( 입력폼 ) 과 UserProfileList.js ( UserProfile Data List ) 를 호출. UserInput.js - 신규 유저를 등록하는 입력폼 컴포넌트. UserProfileList.js - 유저의 정보 ( JSX ) 를 가지고 있는 List 컴포넌트. UserProfile.js - 각각 개별의 유저 정보 컴포넌트. 먼저 메인 컴포넌..
[ 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) ..