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

React Basic - (7) 데이터 필터링

\n
\n

데이터 필터링 구현하기

\n
\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    keyword : ''\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  handleRemove = (id) => {\n    const {information} = this.state;\n    this.setState({\n      information : information.filter(\n        info=> info.id !== id)\n    })\n  }\n  handleUpdate = (id, data) => {\n    const {information} = this.state;\n    this.setState({\n      information : information.map(info => \n        id === info.id?\n          {...info, ...data}\n          : info\n      )\n    })\n  }\n  // !! 이 부분이 추가됨\n  handleChange = (e) => {\n    this.setState({\n      keyword: e.target.value,\n    });\n  }\n  render() {\n    const {information, keyword} = this.state;\n    return (\n      <div>\n        <PhoneForm\n          onCreate={this.handleCreate}/>\n        <p>\n          {/* !! 이 부분이 추가됨 */}\n          <input\n            placeholder=\"검색할 이름 입력\"\n            onChange={this.handleChange}\n            value={keyword}\n          />\n        </p>\n        <hr />\n        <PhoneInfoList\n          // data에 현재 information 배열을 할당함\n          data={information}\n          onRemove={this.handleRemove}\n          onUpdate={this.handleUpdate}/>\n      </div>\n    );\n  }\n}\n\nexport default App;
\n
\n

onChange 이벤트로 인한 자식 컴포넌트의 불필요한 rendering 이슈

\n
\n\n
\n

데이터의 불변성을 유지해야 하는 이유?

\n
\n
    \n
  1. \n
\n
const array = [1,2,3,4];\nconst sameArray = array;\nsameArray.push(5);\n\nconsole.log(array !== sameArray); // false
\n\n
const array = [1,2,3,4];\nconst differentArray = [...array, 5];\n  // 혹은 = array.concat(5)\nconsole.log(array !== differentArray); // true
\n\n
\n

새 데이터를 등록할 때, PhoneInfo 컴포넌트의 모든 info의 불필요한 리렌더링 이슈

\n
\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    keyword : ''\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  handleRemove = (id) => {\n    const {information} = this.state;\n    this.setState({\n      // information 배열에서 제거할 id와 같은 id만 제거하고 필터링\n      information : information.filter(\n        info=> info.id !== id)\n    })\n  }\n  handleUpdate = (id, data) => {\n    // id : 변경하고자 하는 data의 id\n    // data : 변경하고자 하는 새로운 값\n    const {information} = this.state;\n    this.setState({\n      // information 배열에서 수정할 id와 같은 id인 경우, 새로운 info 객체를 만들어서 기존의 값과 새로운 data 값을 할당,\n      // 다른 경우 기존 값을 그대로 유지\n      information : information.map(info => \n        id === info.id?\n          {...info, ...data}\n          : info\n      )\n    })\n  }\n  handleChange = (e) => {\n    this.setState({\n      keyword: e.target.value,\n    });\n  }\n  render() {\n    const {information, keyword} = this.state;\n    // information 배열의 특정 info에서, keyword 문자열이 포함된 index가 있을 경우 남기고 없을 경우는 모두 제외한 새로운 filteredList 배열 생성\n    const filteredList = information.filter(\n      info => info.name.indexOf(keyword) !== -1\n    );\n    return (\n      <div>\n        {/* PhoneForm : input 관리 */}\n        <PhoneForm\n          onCreate={this.handleCreate}/>\n        <p>\n          <input\n            placeholder=\"검색할 이름 입력\"\n            onChange={this.handleChange}\n            value={keyword}\n          />\n        </p>\n        <hr />\n        <PhoneInfoList\n          // data에 filteredList 배열을 할당함\n          data={filteredList}\n          onRemove={this.handleRemove}\n          onUpdate={this.handleUpdate}/>\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    handleChange = (e) => {\n        this.setState({\n            [e.target.name] : e.target.value\n            // e.target.value : 이벤트 객체에 담겨있는 현재 text 값.\n        });\n    }\n    handleSubmit = (e) => {\n        e.preventDefault();\n        // 원래 이벤트가 해야 하는 작업을 방지시킴\n        this.props.onCreate(this.state);\n        this.setState({\n            name:'',\n            phone:''\n        })\n    }\n    render() {\n        return (\n            <form onSubmit={this.handleSubmit}>\n                <input\n                placeholder=\"name\"\n                value={this.state.name}\n                // onChange : input의 text값이 바뀔 때마다 발생하는 이벤트\n                onChange={this.handleChange}\n                name =\"name\"\n                />\n                <input\n                placeholder=\"phone\"\n                value={this.state.phone}\n                onChange={this.handleChange}\n                name=\"phone\"\n                />\n                <button type=\"submit\">submit</button>\n                {/* <div>{this.state.name} {this.state.phone}</div> */}\n            </form>\n        );\n    }\n}\nexport default PhoneForm;
\n

PhoneInfoList.js

\n
import React, {Component} from 'react';\nimport PhoneInfo from './PhoneInfo';\n\nclass PhoneInfoList extends Component {\n    static defaultProps = {\n        list : [],\n        // onRemove 함수에 아무것도 할당되지 않았으면 경고 문구 출력\n        onRemove : () => console.warn('onRemove not defined'),\n        onUpdate : () => console.warn('onUpdate not defined'),\n    }\n    // App 컴포넌트에서 input의 onChange 파라미터에 handleChange(e) 함수를 할당하였다. \n    // handleChange() 함수는 이벤트가 변경될 때마다 호출되는 함수이기 때문에, input 이벤트가 변경되어 App 컴포넌트의 상태가 업데이트 되면, 컴포넌트의 리렌더링이 발생하게 되고 자식 컴포넌트들도 리렌더링 된다. \n    // 하지만 필터링될 data가 변경되지 않는다면 자식 컴포넌트들이 리렌더링될 필요가 없기 때문에, 일반적인 방법으로 구현했을 때 렌더링 횟수가 늘어나므로 자원을 아껴야 할 필요가 있다. \n    // 따라서 LifeCycle API 중, shouldComponentUpdate() 함수를 선언하여 현재 props.data와 nextProps.data가 다를 때만 true로 설정하면, 변화가 필요하지 않을 때에는 render()함수가 호출되지 않는다. \n\n    shouldComponentUpdate(nextProps, nextState) {\n        return nextProps.data !== this.props.data;\n    }\n    render() {\n        console.log('render PhoneInfoList');\n        // 부모 컴포넌트 (PhoneInfo)에서 data를 받아옴\n        const {data, onRemove, onUpdate} = this.props;\n        // 받아온 data를 map을 통하여 컴포넌트로 반환해 list에 저장\n        const list = data.map(\n            info => (\n            <PhoneInfo \n            key={info.id} \n            info={info}\n            onRemove={onRemove}\n            onUpdate={onUpdate}\n            />)\n        );\n        return (\n            <div>\n                {list}\n            </div>\n        );\n    }\n}\nexport default PhoneInfoList;
\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    state = {\n        editing: false,\n        name:'',\n        phone:'',\n    }\n    handleRemove = () => {\n        const {info, onRemove} = this.props;\n        onRemove(info.id);\n    }\n    handleToggleEdit = () => {\n        const {editing} = this.state;\n        // editing 값을 반전시킴\n        this.setState({editing:!editing});\n    }\n    handleChange = (e) => {\n        // input에서 onChange 이벤트가 발생될 때 호출됨\n        const {name, value} = e.target;\n        this.setState({\n            [name] : value\n        });\n    }\n    // 업데이트 과정 :     각 data에 수정 버튼을 할당하여, edit 모드가 아닌 경우 클릭 시 state의 editing을 true로\n    // 변경     handleToggleEdit() : editing 값을 반전시키는 함수     handleChange() : edit\n    // 모드에서 input의 onChange 이벤트가 발생될 때 호출되는 함수\n\n    componentDidUpdate(prevProps, prevState) {\n        const {info, onUpdate} = this.props;\n        if(!prevState.editing && this.state.editing) {\n            // 일반 모드 -> 수정 모드로 변환될 때\n            // 선택한 data의 info를 현재 state로 설정해야 함\n            this.setState({\n                name : info.name,\n                phone: info.phone\n            });\n        }\n        if(prevState.editing && !this.state.editing) {\n            // 수정 모드 -> 일반 모드로 변환될 때 \n            // 현재 state를 info에 update 해야 함\n            onUpdate(info.id, {\n                name : this.state.name,\n                phone : this.state.phone\n            });\n            // onUpdate() 함수를 호출하여 선택된 id의 현재 상태를 update\n        }\n    }\n\n    shouldComponentUpdate(nextProps, nextState) {\n        if(!this.state.editing && !nextState.editing && nextProps.info === this.props.info) {\n        // 현재 수정 상태가 아니고, 다음 상태도 수정 상태가 아니며, 현재 info와 다음 info값이 같다면 리렌더링 안함\n            return false;\n        }\n        return true;\n    }\n\n    render() {\n        console.log('render PhoneInfo'+ this.props.info.id);\n\n        const style = {\n            border: '1px solid black',\n            padding: '8px',\n            margin: '8px'\n        };\n        const {editing} = this.state;\n        if (editing) {\n            // 수정 모드\n            return (\n                <div style={style}>\n                    <div>\n                        <input              placeholder=\"이름\"\n                            value={this.state.name} \n                            onChange={this.handleChange}\n                            name=\"name\"/>\n                    </div>\n                    <div>\n                        <input\n                            placeholder=\"전화번호\"\n                            value={this.state.phone}\n                            onChange={this.handleChange}\n                            name=\"phone\"/>\n                    </div>\n                        <button onClick={this.handleToggleEdit}>적용</button>\n                        <button onClick={this.handleRemove}>삭제</button>\n                </div>\n            );\n        }\n        // 일반 모드 \n        else {\n            const {name, phone} = this.props.info;\n            return (\n                <div style={style}>\n                    <div>\n                        <div>\n                            <b>{name}</b>\n                        </div>\n                        <div>{phone}</div>\n                        <button onClick={this.handleToggleEdit}>수정</button>\n                        <button onClick={this.handleRemove}>삭제</button>\n                    </div>\n                </div>\n            );\n        }\n    }\n}\nexport default PhoneInfo;
\n
\n

실행 결과

\n
\n

\"react_20200320\"

\n
\n

React 개발의 목표 및 정리

\n
\n
    \n
  1. 재사용 가능한 컴포넌트를 만든다.
    2. \n
  2. props 는 부모에게서 전달받는 값이다.
    3. \n
  3. state 는 자기 자신이 지니고 있는 데이터이다.
    4. \n
  4. props 나 state 가 바뀌면 컴포넌트는 리렌더링 한다.
    5. \n
  5. LifeCycle API 를 통해서 컴포넌트 마운트, 업데이트, 언마운트 전후로 처리 할 로직을 설정하거나 리렌더링을 막아줄 수 있다.
    6. \n
","id":"93386ab9-39de-51e3-a4f8-caebf0494d30","frontmatter":{"title":"React Basic - (7) 데이터 필터링 ","date":"2020-03-21T00:00:00.000Z","description":null},"fields":{"slug":"/blog/react/react_20200321/"}}},"pageContext":{"slug":"/blog/react/react_20200321/"}}}