React(리액트) ; props & state

< React(리액트) ; props & state >

 

1. 리액트 컴포넌트에서 다루는 데이터 2종 : props 와 state

 - props : 부모 컴포넌트가 자식 컴포넌트에게 주는 값, 자식 컴포넌트에서는 props 를 받아오기만하고, 받아온 props 수정은 불가.

 - state 는 컴포넌트 내부에서 선언하며 내부에서 값 변경 가능.

 

2. component 의 종류 2종

 - class형 component : state, LifeCycle 사용 가능

 - function형 component : state, LifeCycle 사용 불가, class 형에 비해 속도가 약간 빠름, props 만 사용할 경우 선택

 

3. 새 컴포넌트(class형)를 포함하는 새 파일 만들기

 - src 디렉토리에 tesfile.js 을 만들고, testfile.js를 열어서 MyWork 라는 컴포넌트 생성.

 - compont 의 기본 속성(props) 중 name 속성을 이용해보자.

 - 특정 component 자신을 나타내는 this를 이용해 특정 props를 이용할 수 있음

    : this.props.name

import React, { Component } from 'react';

 

class MyWork extends Component {

  render() {

    return (

      <div>

        작품명은 <b>{this.props.name}</b> 입니다.

      </div>

    );

  }

}

 

export default MyWork;

 

4. App.js 파일에 새 component 의 props 정의

 - name props 를 사용해야 하고, 사용할 props는 App.js 에 정의되어 있어야 함.

 - App.js에서 새 component 를 import 해와서 MyWork class 의 name props 값을 부여한 후 MyWork 클래스의 내용을 화면에 출력함. à 브라우져에서 MyWork 내용이 출력되는 것을 확인.

import React, { Component } from 'react';

import MyWork from './testfile';

// import logo from './logo.svg';

// import './App.css';

 

class App extends Component {

  render() {

    return (

      <MyWork name="홍길동전" />

    );

  }

}

 

export default App;

 

5. defaultProps : props 의 기본값을 설정

 

1) class 안에 defaultProps 를 설정

 - view 화면인 testfile.js 의 MyWork class 문 바로 밑에 설정. (render 문 시작하기 전)

 - App.js에서 <MyName /> 이런식으로 name 값을 생략하면 defaultProps 값이 나타남.

import React, { Component } from 'react';

 

class MyWork extends Component {

  static defaultProps = {

    name: '작품명이 없습니다.'

  }

  render() {

    return (

      <div>

        작품명은 <b>{this.props.name}</b> 입니다.

      </div>

    );

  }

}

 

export default MyWork;

 

2) class 밖에 defaultProps 를 설정 (함수형 component 에서 defaultProps를 설정시 이 방법 사용)

 - class와 export 문 사이에 독립적으로 설정

 - static 대신에 클래스명. 을 사용 ; MyWork.defaultProps

import React, { Component } from 'react';

 

class MyWork extends Component {

  render() {

    return (

      <div>

        작품명은 <b>{this.props.name}</b> 입니다.

      </div>

    );

  }

}

 

MyWork.defaultProps = {

  name: '작품명이 없습니다.'

};

 

export default MyWork;

 

6. 함수형 컴포넌트

 - function형 component : state, LifeCycle 사용 불가, class 형에 비해 속도가 약간 빠름, props 만 사용할 경우 선택

 - 컴포넌트 초기 마운트가 아주 미세하게 빠르고, 메모리 자원을 덜 사용합니다. 미세한 차이이니, 컴포넌트를 무수히 많이 렌더링 하게 되는게 아니라면 성능적으로 큰 차이는 없음.

import React from 'react';

 

const MyWork = ({ name }) => {

  return (

    <div>

        작품명은 <b>{name}</b> 입니다.

    </div>

  );

};

 

export default MyWork;

 

7. 동적 data 컨트롤 : state 사용

 - CSounter.js 파일 생성하고, Counter 컴포넌트 생성

 - class fields 문법을 사용하여 state를 정의 à setState를 이용하여 증가(handleIncrease), 감소(handleDecrease) method 작성 à state 와 method 를 이용하여 return 을 rendering. (2개의 button tag에 onClick 이벤트를 this. handleIncrease 와 this. handleDecrease 로 각각 정의)

import React, { Component } from 'react';

 

class Counter extends Component {

  state = {

    number: 0

  }

 

  handleIncrease = () => {

    this.setState({

      number: this.state.number + 1

    });

  }

 

  handleDecrease = () => {

    this.setState({

      number: this.state.number - 1

    });

  }

 

  render() {

    return (

      <div>

        <h1>카운터</h1>

        <div>값: {this.state.number}</div>

        <button onClick={this.handleIncrease}>+</button>

        <button onClick={this.handleDecrease}>-</button>

      </div>

    );

  }

}

 

export default Counter;

 

 - App.js 파일 수정 : Counter 클래스를 import 해와서 Counter 클래스를 화면에 보여줌.

import React, { Component } from 'react';

import Counter from './Counter';

 

class App extends Component {

  render() {

    return (

      <Counter />

    );

  }

}

 

export default App;

 

8. Counter 구문 분석

- class fields 문법을 사용하여 state를 정의 à setState를 이용하여 증가(handleIncrease), 감소(handleDecrease) method 작성 à state 와 method 를 이용하여 return 을 rendering. (2개의 button tag에 onClick 이벤트를 this. handleIncrease 와 this. handleDecrease 로 각각 정의)

 

1) state 정의

a. class fields 문법을 사용한 state 정의

state = {

    number: 0

  }

 

b. constructor를 사용한 state 정의

 - constructor 는 기존의 class 생성자를 덮어쓰게 되므로, super(props) 를 통해 Counter component의 생성자를 미리 실행하고나서 state 설정.

constructor(props) {

    super(props);

    this.state = {

      number: 0

    }

  }

 

2) setState를 사용하여 method 정의

- 화살표 함수 => 가 아닌 기존의 방식을 사용하면 버튼 클릭 이벤트 발생시 this 와의 binding이 끊겨서 this가 undefinde로 나타나는 오류가 발생함. Constructor 를 사용해서 this와의 bind 해줌으로 오류를 수정할 수 있긴하지만 번거로운 작업이므로 react 에서는가능하면 => 함수를 사용하자.

 - state에 정의된 값을 수정하기 위해서는 this.setState 함수를 사용. (이 함수가 호출되면 component 가 re-rendering 되면서 변경된 state 값으로 적용됨.)

handleIncrease = () => {

    this.setState({

      number: this.state.number + 1

    });

  }

 

  handleDecrease = () => {

    this.setState({

      number: this.state.number - 1

    });

  }

 

3) JSX 구문 작성

 - state 와 method 를 이용하여 return 을 rendering.

 - counter의 값으로 {this.state.number} 를 사용.

 - 2개의 button tag에 onClick 이벤트를 this. handleIncrease 와 this. handleDecrease 로 각각 정의

 - html 과의 차이점 : 이벤트이름은 camelCase 로 설정. onclick 은 onClick, onmousedown 은 onMouseDown, onchange 는 onChange

 - 이벤트의 값은 함수가 아니라 함수명이여야 함. 함수()를 넣으면 무한루푸를 돌게됨.(렌더링-함수호출-setState-렌더딩-함수호출-……)

{this.handleIncrease()}    ; No

{this.handleIncrease}      ; Yes

render() {

    return (

      <div>

        <h1>카운터</h1>

        <div>값: {this.state.number}</div>

        <button onClick={this.handleIncrease}>+</button>

        <button onClick={this.handleDecrease}>-</button>

      </div>

    );

  }