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

React Basic - (2) props & state

\n
\n

React Component 의 Data

\n
\n
    \n
  1. props : 부모 Component → 자식 Component로 전달하는 값. 자식 Component에서는 props 값을 변경할 수 없다.
    2. \n
  2. state : Component 내부에서 선언하며, state 값 변경 가능
    3. \n
\n
\n

props 다루기 - 클래스형 컴포넌트 & defaultProps

\n
\n

Myname.js

\n
import React, {Component} from 'react';\n\nclass Myname extends Component {\n    // props 값을 기본 지정할 수 있음. (누락 방지) - (1)\n    static defaultProps = {\n        name : \"default\"\n    }\n    render () {\n        return (\n        <div>My name is <b>{this.props.name}</b></div> \n        );\n    }\n}\nexport default Myname;
\n

App.js

\n
class App extends Component {\n    render() {\n      return (\n        <Myname name=\"리액트\"></Myname>\n      );\n    }\n}\n// props 값을 기본 지정할 수 있음. (누락 방지) - (2)\nMyname.defaultProps = {\n  name : 'default'\n};\n\nexport default App;
\n
\n

props 다루기 - 함수형 컴포넌트

\n
\n

Myname.js

\n
// 함수형 컴포넌트로 간단하게 작성 가능\nconst Myname = ({name}) => {\n    return (\n        <div>My name is {name}</div>  \n    );\n}\nexport default Myname;
\n
\n

State 다루기

\n
\n

state : 동적인 data를 다룰 때 사용됨.

\n

Counter.js

\n
import react, {Component} from 'react';\n\nclass Counter extends Component {\n    // Component의 state를 정의할 때는 class field를 사용함\n    state = {\n        number : 0\n    }\n    // Component에 method 작성\n    handleIncrease = () => {\n        this.setState({\n            number: this.state.number +1\n        });\n    }\n    handleDecrease = () => {\n        this.setState({\n            number : this.state.number -1;\n        });\n    }\n\n    // handleIncrease() {\n    //     this.setState({\n    //       number: this.state.number + 1\n    //     });\n    //   }\n    // // 이렇게 작성한 경우, this가 undefined라고 인식됨 : \n    // => 화살표 함수를 사용하여 함수명에 () 익명함수를 할당해야 함\n\n    render() {\n        return (\n            <div>\n                <h1>Counter : </h1>\n                <div>Value : {this.state.number}</div>\n                <button onClick={this.handleIncrease}>+</button>\n                <button onClick={this.handleDecrease}>-</button>\n            </div>\n        )\n    }\n}\nexport default Counter;
\n

App.js

\n
return (\n        <Fragment>\n            <Myname name=\"리액트\"></Myname>\n            <Counter></Counter>\n        </Fragment>\n      );
\n
\n

SetState

\n
\n

state 값을 변경하기 위해 반드시 거쳐야 하는 함수.

\n

SetState() 괄호 안에 전달되는 객체만 업데이트 됨.

\n\n
// 1.\nthis.setState({\n    number: this.state.number + 1\n});\n\n// 2.\nthis.setState((state) => ({\n\t\tnumber: state.number + 1\n}));\n\n// 3. 비구조화 할당 문법\nthis.setState(({number}) => ({\n    number: number + 1\n}));
\n
handleIncrease = () => {\n    const { number } = this.state;\n    this.setState({\n      number: number + 1\n    });\n  }\n\n  handleDecrease = () => {\n    this.setState(\n      ({ number }) => ({\n        number: number - 1\n      })\n    );\n  }
\n
\n

React에서 이벤트 함수 설정 시 주의사항 !

\n
\n
    \n
  1. onClick 과 같은 이벤트 이름은 camelCase 방식으로 작성해야 한다.
    2. \n
  2. \n

    이벤트에 전달하는 값은 함수여야 한다.

    \n

    onClick={this.handleIncrease()} 이 아니라,

    \n

    onClick={this.handleIncrease} 형태로 작성해야 함 !

    \n
    3. \n
","id":"6d2b3528-5d7b-58d0-b561-d5b4c5f0d773","frontmatter":{"title":"[React] (2) props & state ","date":"2020-03-16T00:00:00.000Z","description":null},"fields":{"slug":"/blog/react/react_20200316/"}}},"pageContext":{"slug":"/blog/react/react_20200316/"}}}