{"componentChunkName":"component---src-templates-blog-js","path":"/blog/react/react_20200319/","result":{"data":{"markdownRemark":{"html":"

React Basic - (5) 배열 다루기 1

\n
\n

React 배열의 속성

\n
\n\n

⇒ 불변성을 유지해야, 리액트에서 모든것들이 필요한 상황에 리렌더링 되도록 설계할 수 있고, 성능도 최적화할 수 있다.

\n
\n

Map 함수

\n
\n
const a = [1,2,3,4,5];\nconst b = a.map(number => number * 2);
\n
\n

컴포넌트 만들기

\n
\n

PhoneInfo : 각 전화번호의 정보를 보여주는 컴포넌트

\n

PhoneInfoList : 여러 개의 PhoneInfo 컴포넌트를 보여줌

\n
\n

배열에 추가되는 과정

\n
\n
    \n
  1. App에서 PhoneForm의 onCreate 파라미터에 handleCreate() 할당
    2. \n
  2. PhoneForm에서 submit을 클릭해 handleSubmit()이 호출되면, 부모 컴포넌트 (App)의 onCreate에 현재 상태(name, phone)인 this.state가 할당됨
    3. \n
  3. App의 handleCreate()가 호출되면, 받아온 data를 바탕으로 information 정보가 추가됨 (id는 하나씩 증가)
    4. \n
  4. PhoneInfoList에는 현재 information정보가 파라미터로 할당되므로, information 배열이 추가될 때마다 받아온 data를 map을 통해 변환한 list가 리렌더링됨.
    5. \n
\n
\n

전체 Code

\n
\n

App.js

\n
import React, {Component} from 'react';\nimport PhoneForm from './PhoneForm';\nimport PhoneInfoList from './PhoneInfoList';\n\nclass App extends Component {\n  id = 2\n  state = {\n    // state에는 렌더링되는 값만 넣어줌\n    information : [\n      {\n        id : 0,\n        name : 'paige',\n        phone : '010-0000-0000'\n      },\n      {\n        id : 1,\n        name : 'tiger',\n        phone : '010-1111-1111'\n      }\n    ]\n  }\n  handleCreate = (data) => {\n    const {information} = this.state;\n    this.setState({\n      information : information.concat({\n        id:this.id++, ...data\n      })\n    })\n    console.log(data);\n  }\n  render() {\n    const {information} = this.state;\n    return (\n      // <Counter/>\n      <div>\n        {/* PhoneForm : input 관리 */}\n        <PhoneForm\n          onCreate={this.handleCreate}/>\n        <PhoneInfoList\n          // data에 현재 information 배열을 할당함\n          data={this.state.information}/>\n      </div>\n    );\n  }\n}\n\nexport default App;
\n

PhoneForm.js

\n
import React, {Component} from 'react';\n\nclass PhoneForm extends Component {\n    state = {\n        name : '',\n        phone : ''\n    }\n    // input의 onChange가 발생하면 호출되는 함수\n    handleChange = (e) => {\n        this.setState({\n            // [e.target.name] : 이벤트가 발생한 input의 name\n            [e.target.name] : e.target.value\n        });\n        // => 현재 input 상태를 이벤트 객체의 텍스트 값으로 변경\n    }\n    handleSubmit = (e) => {\n        // 페이지 리로딩 방지\n        e.preventDefault();\n        // 상태값을 onCreate를 통하여 부모에게 전달\n        this.props.onCreate(this.state);\n        // 상태 초기화\n        this.setState({\n            name:'',\n            phone:''\n        });\n    }\n    render() {\n        return (\n            <form onSubmit={this.handleSubmit}>\n                <input \n                    placeholder=\"이름\"\n                    // submit을 클릭하면 초기화되도록 하기 위해 {this.state.name}객체 할당\n                    value={this.state.name}\n                    onChange={this.handleChange}\n                    // input의 name으로 각 input을 구분함\n                    name=\"name\"\n                />\n                <input\n                    placeholder=\"전화번호\"\n                    value={this.state.phone}\n                    onChange={this.handleChange}\n                    name=\"phone\"\n                />\n                <button type=\"submit\">등록</button>\n            </form>\n        );\n    }\n}\nexport default PhoneForm;
\n

PhoneInfo.js

\n
import React, {Component} from 'react';\n\nclass PhoneInfo extends Component {\n    // defaultProps을 통하여 info의 기본값 설정 => 컴포넌트가 undefined 되는 것 방지\n    static defaultProps = {\n        info: {\n            name: '이름',\n            phone: '010-0000-0000',\n            id: 0\n        }\n    }\n    render() {\n        const style = {\n            border: '1px solid black',\n            padding: '8px',\n            margin: '8px'\n        };\n        const {name, phone, id} = this.props.info;\n        return (\n            <div style={style}>\n                <div>\n                    <b>{name}</b>\n                    <b>{phone}</b>\n                </div>\n            </div>\n        );\n    }\n}\nexport default PhoneInfo;
\n

PhoneInfoList.js

\n
import React, {Component} from 'react';\nimport PhoneInfo from './PhoneInfo';\n\nclass PhoneInfoList extends Component {\n    static defaultProps = {\n        data : []\n    }\n    render() {\n        // 부모 컴포넌트 (PhoneInfo)에서 data를 받아옴\n        const {data} = this.props;\n        // 받아온 data를 map을 통하여 컴포넌트로 반환해 list에 저장\n        const list = data.map(\n            info => (\n            <PhoneInfo key={info.id} info={info}/>)\n        );\n        return (\n            <div>\n                {list}\n            </div>\n        );\n    }\n}\nexport default PhoneInfoList;
","id":"75b6a91e-eed5-5aae-90c7-75ce1015c19c","frontmatter":{"title":"[React] React Basic - (5) 배열 다루기 1 ","date":"2020-03-19T00:00:00.000Z","description":null},"fields":{"slug":"/blog/react/react_20200319/"}}},"pageContext":{"slug":"/blog/react/react_20200319/"}}}