All Story
[ React ] 리액트 전개 연산자 ?
전개 연산자는 JAVASCRIPT 에서 축약 코딩을 하기 위한 기법 중 하나이다. 주로 배열을 다루는 부분에서 사용되며 이를 사용하면 객체 혹은 배열을 펼칠 수 있다. 혹은 '그 외 나머지 매개변수' 를 임의로 지정할 수 있게 해준다. 배열을 펼칠 수 있다? 나머지 매개변수? 무슨 말인지 아래의 여러가지 예시를 통해 알아보자. 만약 아래와 같은 배열이 두 개가 있다고 가정해보자. const arr1 = [ 1, 2, 3, 4, 5 ] ; const arr2 = [ 6, 7, 8, 9, 10 ] ; 만약 arr1 배열과 arr2 배열을 하나로 합쳐 arr3 = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] 배열로 만들고 싶다. 기존에는 아래와 같은 방법으로 합쳤을..
[ 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) ..
[ React ] 리액트 동적 데이터 state
리액트의 컴포넌트가 다루는 데이터 중 저번 게시글에선 props 를 다루었다. 이번 게시글에선 동적 데이터인 state 를 다뤄보자. 앞에서도 말했듯 props는 부모 컴포넌트에서 넘어온 정적 데이터 형태이다. 반면, state는 컴포넌트 내부에서 선언해 내부에서 수정 및 작업이 가능한 동적 데이터 형태이다. 아래 소스를 보고 간단히 짚어보자. ( index.js 와 index.html 은 이전 props 설명 게시글과 동일 ) App.js import React, { Component } from 'react'; import Count from './Count'; class App extends Component { //render 함수 render() { return ( //JSX ..
[ React ] 리액트 정적 데이터 pops
리액트 컴포넌트들이 다루는 데이터는 props 와 state 두 가지로 나뉜다. props 는 현 컴포넌트를 호출한 곳에서 넘겨준 data 이며, 이를 받아서 사용하기만 할 수 있고 값을 직접 수정할 수는 없다. state 는 현 컴포넌트 내부에서 선언한 data 이며 내부에서 값을 변경할 수 있다. 이번 게시글에선 props 만 사용할 생각이다. App.js import React, { Component } from 'react'; import Food from './Food'; class App extends Component { //render 함수 render() { return ( //JSX ); } } export default App; App.js 의 render 함수가 무엇을..