exp_blog

React Component에서 다루는 데이터는 props와 state

props

자식 Component가 생성될 때 부모 Component에서 받아온 데이터로 변경이 불가능

자식 Component에서 this라는 키워드를 통해 부모 Component로부터 받은 props를 사용할 수 있음

src/Card.js

// Card.js
import React, { Component } from "react";
 
class Card extends Component {
  render() {
    return (
      <React.Fragment>
        <h3>
          이름 : <b>{this.props.name}</b>
        </h3>
        <h3>
          소속 : <b>{this.props.department}</b>
        </h3>
        <h3>
          연락처 : <b>{this.props.phone}</b>
        </h3>
        <h3>
          이메일 : <b>{this.props.email}</b>
        </h3>
      </React.Fragment>
    );
  }
}
 
export default Card;

scr/App.js 수정

// App.js
import React, { Component } from "react";
import Card from "./Card";
 
class App extends Component {
  render() {
    return (
      <Card
        name="jisu"
        department="Dev"
        phone="010-1234-5678"
        email="282532@naver.com"
      />
    );
  }
}
 
export default App;

Card가 App의 자식 Component가 되는 것
이 때, 부모Component(App.js) 에서 지정한 name, department, phone, email이

-> 자식Component(Card.js)로 전달되어 

Card에서 this.props.name, this.props.department, this.props.phone, this.props.email이 사용

<defaultProps>

- 부모 Component 가 여러 개의 공통된 자식 Component 를 사용할 경우

 -> 하지만, 자식 Component에서 공통적으로 사용되는 props와 값이 다양한 props가 있을 수 있다

- 이 경우 , 자식 Component에서 defaultPorps를 이용하여 props의 기본값을 설정해 줄 수 있음

- 기본값 : 부모 Component에서 지정해 줄 경우 지정한 값으로 지정하지 않으면 기본값으로 props가 적용

//Card.js

import React, { Component } from "react";
 
class Card extends Component {
  static defaultProps = {
    department : "Dev"
  };

  render() {
    return (
      <React.Fragment>
        <h3>
          이름 : <b>{this.props.name}</b>
        </h3>
        <h3>
          소속 : <b>{this.props.department}</b>
        </h3>
        <h3>
          연락처 : <b>{this.props.phone}</b>
        </h3>
        <h3>
          이메일 : <b>{this.props.email}</b>
        </h3>
      </React.Fragment>
    );
  }
}
 
export default Card;

//App.js

// App.js
import React, { Component } from "react";
import Card from "./Card";
 
class App extends Component {
  render() {
    return (
      <React.Fragment>
        {/* department 생략 */}
        <Card name="jisu" phone="010-1234-5678" email="282532@naver.com" />
        <hr />
        {/* department 포함 */}
        <Card
          name="joby"
          department="Marketing"
          phone="010-5678-9123"
          email="bob@bob.com"
        />
      </React.Fragment>
    );
  }
}
 
export default App;

<Functional Component(함수형 컴포넌트)>

- 클래스형 컴포넌트 외 다른 방법으로 컴포넌트 생성

- 단순히 props 받아오는 컴포넌트의 경우 더 간단한 문법으로 사용 가능

- 함수형 컴포넌트는 컴포넌트가 함수이기 때문에 클래스의 특성에서 지닐수 있는 static이나 this 키워드를 사용할 수 없음

-  state나 Life Cycle과 관련된 함수를 사용할 수 없습니다.

//Card.js => 함수의 매개변수로 props의 인자들 직접 받음 

// Card.js
import React from "react";
 
const Card = ({ name, department, phone, email }) => {
  return (
    <React.Fragment>
      <h3>
        이름 : <b>{name}</b>
      </h3>
      <h3>
        소속 : <b>{department}</b>
      </h3>
      <h3>
        연락처 : <b>{phone}</b>
      </h3>
      <h3>
        이메일 : <b>{email}</b>
      </h3>
    </React.Fragment>
  );
};
 
// 기본 props 지정(함수형 컴포넌트 사용시 static을 사용불가)
Card.defaultProps = {
  department: "Dev"
};
 
export default Card;

state

-  Component 내부에서 생성된 데이터로 변경이 가능

- Component 내부에 state를 class field나 constructor(props) 내부에 정의해서 사용

Method Binding

- 이벤트 처리할 경우 , 임의의 메소드 생성

- 이 때, 해당 메소드에서 state를 변경하기 위해 this 키워드를 사용하려면 메소드에 this를 바인딩 시켜주어야

- constructor(props) 내부에 "this.메소드명 = this.메소드명.bind(this)"를 사용하여 메소드에 this를 바인딩

=> 이 작업이 없을 경우, 이벤트가 발생 시 해당 메소드가 이벤트로 전달되는 과정에서 this와 연결이 끊어져, undefined가 됨

      하지만, this 를 메소드로 화살표 함수 표현(Arrow Function Expression)으로 만들 경우,
      this 가 풀리는 것에 대해 걱정할 필요가 없기에 method binding 명시적으로 하지 않아도 됨

setState

- 선언된 state 값을 변경하기 위해서는 무조건 this.setState를 사용 /
   React 내부에서 setState를 호출하게 되면 자동으로 Component를 리렌더링하게 설계

- 객체로 전달되는 해당 값만 state에서 변경. 전달되지 않은 값은 기존값으로 유지.
   state 내부에 객체가 존재하고 그 객체의 특정 인자만 변경하고 싶다면
  "객체1: { ..., this.state.객체1, 변경요소: 변경요소 값 }"의 다음과 같은 구조로 작성

   =>  그렇지 않으면 객체 자체를 새로 덮어 써버림

 전개 연산자(Spread Operator, ...)을 사용하면 기존 내용을 해당 객체에 풀어줌.

 - 이 부분은 객체의 depth가 깊어지면 상당히 복잡해지므로 immutable.js나 immer.js를 이용해서 간단화 작업을 하는게 좋음

 - 기존의 값을 토대로 새로운 값으로 변경하고 싶을 땐 "값1: this.state.값1" 이런 식으로 처리.

     =>  this.state를 사용하고 싶지않다면 setState를 화살표 함수로 만들어서 매개변수로 state나 해당 값을 넣어주면 됨.

    이 때, 해당 값을 이용할 땐 비구조화 할당(Destructuring Assignment)이라는 문법을 사용합니다.

 - render() 함수 내부의 HTML 코드에서 이벤트를 설정할 땐, camelCase로 이벤트명을 적어야 함

  - 또한 이벤트 속성의 값으로는 "함수()" 형태가 아닌 "함수명"으로

     => 그렇지 않을 경우 함수 호출이 무한 루프에 빠질수 있습니다. (렌더링 -> 함수 호출 -> setState -> 리렌더링 -> 함수 호출 -> ...)

src/StopWatch.js

// StopWatch.js
import React, { Component } from "react";
 
class StopWatch extends Component {
  // class fields
  state = {
    sec: 0,
    buttonFlag: true,
    intervalFunction: null
  };
 
  // stop watch 로직
  timer = () => {
    // 비구조화 할당 사용( { sec } 부분 )
    this.setState(({ sec }) => ({
      sec: sec + 1
    }));
  };
 
  // start 버튼 클릭
  start = () => {
    this.setState({
      sec: 0,
      buttonFlag: false,
      intervalFunction: setInterval(this.timer, 1000)
    });
  };
 
  // stop 버튼 클릭
  stop = () => {
    clearInterval(this.state.intervalFunction);
 
    this.setState({
      buttonFlag: true
    });
  };
 
  render() {
    return (
      <React.Fragment>
        <h1>Stop Watch</h1>
        <div>
          <b>{this.state.sec}</b>
          <span>초</span>
          {this.state.buttonFlag ? (
            <button onClick={this.start}>start</button>
          ) : (
            <button onClick={this.stop}>stop</button>
          )}
        </div>
      </React.Fragment>
    );
  }
}
 
export default StopWatch;

src/App.js

// App.js
import React, { Component } from "react";
import StopWatch from "./StopWatch";
 
class App extends Component {
  render() {
    return <StopWatch />;
  }
}
 
export default App;