React - ParkEunwoo/seoul-smart-app GitHub Wiki

React

1. React๊ฐ€ ๋ญ์ฃ 

  • MVC, MV* ํŒจํ„ด์—์„œ View๋งŒ ์‹ ๊ฒฝ์“ฐ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

Virtual Dom

  • ๊ฐ€์ƒ์˜ DOM ๊ฐ์ฒด์™€ ๋ณ€๊ฒฝ๋œ ๋ฐ์ดํ„ฐ๋กœ ์ƒ์„ฑ๋œ Virtual DOM์„ ๋น„๊ต
  • ๋ณ€๊ฒฝ๋œ ์š”์†Œ์— ๋Œ€ํ•ด์„œ๋งŒ ๊ธฐ์กด์˜ DOM ๊ฐ์ฒด์— ์ ์šฉํ•˜๋Š” ๋ฐฉ์‹์„ ์‚ฌ์šฉ
  1. ๋ฐ์ดํ„ฐ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๋ฉด ์ „์ฒด UI๋ฅผ virtual dom์— ๋ฆฌ๋ Œ๋”๋ง
  2. ์ด์ „ vitrual dom์— ์žˆ๋˜ ๋‚ด์šฉ๊ณผ ํ˜„์žฌ ๋‚ด์šฉ์„ ๋น„๊ต
  3. ๋ฐ”๋€ ๋ถ€๋ถ„๋งŒ ์‹ค์ œ dom์— ์ ์šฉ

2. React ์ปดํฌ๋„ŒํŠธ

ํŠน์ • ๋ถ€๋ถ„์ด ์–ด๋–ป์„ธ ์ƒ๊ธธ์ง€ ์ •ํ•˜๋Š” ์„ ์–ธ์ฒด

  • ๋ฆฌ์•กํŠธ๋Š” ์‚ฌ์šฉ์ž ํ™˜๊ฒฝ์— ์ œ๊ณตํ•˜๋Š” View๋ฅผ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๊ตฌ์„ฑ์š”์†Œ (Component)๋กœ ์ชผ๊ฐœ์„œ ๊ตฌํ˜„
  • Component ํ•˜๋‚˜ํ•˜๋‚˜๋Š” View์˜ ๋ชจ์Šต๊ณผ ๋™์ž‘ ๋ฐฉ์‹์„ ์ •์˜ํ•˜๋ฉฐ ์ „์ฒด์ ์ธ ์•ฑ์€ ์ด๋Ÿฌํ•œ Component๋“ค์ด ํ•ฉ์ณ์ ธ ๋งŒ๋“ค์–ด์ง€๊ฒŒ ๋จ
  • Component๋Š” ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•œ API๋กœ ๋‹ค๋ฅธ Component์—์„œ ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋ฉฐ ๋˜๋Š” ๋‹ค๋ฅธ ์•ฑ์—์„œ๋„ ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅ

2.1 ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ

  • ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ๋Š” state๋‚˜ component Life Cycle API๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  props๋ฅผ ๋ฐ›์•„ ๋ทฐ๋ฅผ ๋ Œ๋”๋งํ•˜๋Š” Component์— ํ•œํ•ด์„œ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉ

  • ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์˜ ๊ฒฝ์šฐ state๋‚˜ ์ผ๋ถ€ ๋ถˆํ•„์š”ํ•œ ๊ธฐ๋Šฅ๋“ค์„ ์ œ๊ฑฐํ•œ ํ˜•ํƒœ๋ผ class ํ˜•ํƒœ๋กœ ์ •์˜ํ•˜๋Š” Component๋ณด๋‹ค ๋ฉ”๋ชจ๋ฆฌ ์†Œ๋ชจ๋Ÿ‰์ด ์ ๊ณ  ์„ฑ๋Šฅ์ด ์ข‹์Œ..

2.2 ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ

  • state๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ..

3. props & state

3.1 props

  • props๋Š” ํŠน์ • ์ปดํฌ๋„ŒํŠธ์˜ ์†์„ฑ์„ ์ง€์ •ํ•  ๋•Œ ์‚ฌ์šฉ
  • props๋Š” ํŠน์ • ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถˆ๋Ÿฌ์™€ ์‚ฌ์šฉํ•˜๋Š” ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ(Component)์—์„œ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Œ
import React, { Component } from 'react';
import MyComponent from "./MyComponent";

class App extends Component {
  render() {
    return (
      <div className="App">
        <MyComponent name = "Soongsil"/>
      </div>
    );
  }
}

export default App;
    import React, { Component } from 'react';

    class MyComponent extends React.Component
    {
        render(){
            return(
                <h1>Hello {this.props.name}</h1>
            )
        }
    }

    export default MyComponent;
  • App์ปดํฌ๋„ŒํŠธ = ๋ถ€๋ชจ, MyComponent = ์ž์‹
  • App์ปดํฌ๋„ŒํŠธ์—์„œ MyComponent์— ๋Œ€ํ•œ name์ด๋ผ๋Š” props๋ฅผ Soongsil์ด๋ผ๋Š” value๋กœ ์ •ํ•ด์คŒ
  • MyComponent์—์„œ๋Š” ํ•ด๋‹น props๋ฅผ ์ฝ๊ธฐ ์ „์šฉ์œผ๋กœ๋งŒ ์‚ฌ์šฉ๊ฐ€๋Šฅ

3.2 state

import React, { Component } from 'react';

class Counter extends React.Component {
  state = {
    number: 0
  }

  add = () => {
    this.setState({
      number: this.state.number + 1
    });
  }

  minus = () => {
    this.setState({
      number: this.state.number - 1
    });
  }

  render() {
    return (
      <div>
        <h1>์นด์šดํ„ฐ</h1>
        <div>๊ฐ’: {this.state.number}</div>
        <button onClick={this.add}>+</button>
        <button onClick={this.minus}>-</button>
      </div>
    );
  }
}

export default Counter;
  • ์ฃผ์ฒด๊ฐ€ ๋˜๋Š” ์ปดํฌ๋„ŒํŠธ(Component)์—์„œ ์ง์ ‘ ๊ฐ’์„ ๋ณ€๊ฒฝํ•˜๊ณ  ์ฝ์„ ์ˆ˜ ์žˆ๋Š” state

  • ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉ ๊ฐ€๋Šฅ

  • state๊ฐ’์„ ๋ณ€๊ฒฝํ•˜๋ ค๋ฉด ๋ฐ˜๋“œ์‹œ setStateํ•จ์ˆ˜๋ฅผ ์ด์šฉ (this,setState())

  • setStateํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ์ด ๋˜์•ผ renderํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋จ -> state๊ฐ’์„ ๋ณ€๊ฒฝ๊ฐ€๋Šฅ

4. ์ปดํฌ๋„ŒํŠธ ์ƒ๋ช… ์ฃผ๊ธฐ

4.1 ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ƒ๊ธธ ๋•Œ(Mounting)

๋งˆ์šดํŠธ(Mount)๋Š” DOM ๊ฐ์ฒด๊ฐ€ ์ƒ์„ฑ๋˜๊ณ  ๋ธŒ๋ผ์šฐ์ €์— ๋‚˜ํƒ€๋‚˜๋Š” ๊ฒƒ์„ ์˜๋ฏธ

  • constructor

    • ์ปดํฌ๋„ŒํŠธ ํด๋ž˜์Šค์˜ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค ๋•Œ ์ฒ˜์Œ์œผ๋กœ ํ˜ธ์ถœ๋˜๋Š” ํ•จ์ˆ˜
    • state์˜ ์ดˆ๊ธฐ๊ฐ’์„ ์ง€์ •ํ•  ๋•Œ ์‚ฌ์šฉ
  • getDerivedStateFromProps

    • props์™€ state ๊ฐ’์„ ๋™๊ธฐํ™”ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํ•จ์ˆ˜
  • render

    • ์ปดํฌ๋„ŒํŠธ์˜ ๊ธฐ๋Šฅ๊ณผ ๋ชจ์–‘์ƒˆ๋ฅผ ์ •์˜ํ•˜๋Š” ํ•จ์ˆ˜
    • htmlํ˜•์‹์˜ ๋ฌธ์žฅ์„ ๋ฐ˜ํ™˜ํ•˜์ง€ ์•Š๊ณ , ๋ทฐ๊ฐ€ ์–ด๋–ป๊ฒŒ ์ƒ๊ฒผ๊ณ  ์ž‘๋™ํ•˜๋Š”์ง€ ์ •๋ณด๋ฅผ ์ง€๋‹Œ ๊ฐ์ฒด(๋ฆฌ์•กํŠธ ์š”์†Œ)๋ฅผ ๋ฐ˜ํ™˜
  • componentDidMount

      • ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ์ฒซ ๋ Œ๋”๋ง์ด ๋๋‚ฌ์„ ๋•Œ ํ˜ธ์ถœ๋˜๋Š” ํ•จ์ˆ˜

4.2 ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์—…๋ฐ์ดํŠธ ๋  ๋•Œ(Updating)

์ปดํฌ๋„ŒํŠธ๊ฐ€ ์—…๋ฐ์ดํŠธ๋˜๋Š” ๊ฒฝ์šฐ๋Š” props ๊ฐ’ ๋ณ€๊ฒฝ, state ๊ฐ’ ๋ณ€๊ฒฝ, ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง ๋  ๋•Œ, this.forceUpdate๋กœ ๊ฐ•์ œ๋กœ ๋ฆฌ๋ Œ๋”๋ง ๋˜๋Š” ๊ฒฝ์šฐ

  • getDerivedStateFromProps

    • ๋งˆ์šดํŠธ(Mount) ๊ณผ์ •์—์„œ๋„ ํ˜ธ์ถœ๋˜์—ˆ๋˜ ํ•จ์ˆ˜
  • shouldComponentUpdate

    • ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฆฌ๋ Œ๋”๋ง ํ• ์ง€ ๋ง์ง€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ํ•จ์ˆ˜
  • render

    • ์ƒˆ๋กœ์šด ๊ฐ’์„ ์‚ฌ์šฉํ•˜์—ฌ View๋ฅผ ๋ฆฌ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.
  • getSnapshotBeforeUpdate

    • ๋ณ€๊ฒฝ๋œ ์š”์†Œ์— ๋Œ€ํ•˜์—ฌ DOM ๊ฐ์ฒด์— ๋ฐ˜์˜ํ•˜์ง€ ์ง์ „์— ํ˜ธ์ถœ๋˜๋Š” ํ•จ์ˆ˜
  • ComponentDidUpdate

    • ์ปดํฌ๋„ŒํŠธ ์—…๋ฐ์ดํŠธ ์ž‘์—…์ด ๋๋‚œ ๋ฆฌ๋ Œ๋”๋ง ํ›„์— ํ˜ธ์ถœ๋˜๋Š” ํ•จ์ˆ˜

4.3 ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์—†์–ด์งˆ ๋•Œ...ํŽ˜์ด์ง€๊ฐ€ ๋ฐ”๋€” ๋•Œ(Unmounting)

์ปดํฌ๋„ŒํŠธ๊ฐ€ DOM์—์„œ ์ œ๊ฑฐ๋˜๋Š” ๊ฒƒ

  • componentWillUnmount
    • ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ œ๊ฑฐ๋˜๊ธฐ ์ง์ „์— ํ˜ธ์ถœ
โš ๏ธ **GitHub.com Fallback** โš ๏ธ