200205 React, JavaScript

JavaScript

계산된 속성명 (Computed Property)

    function makeobj(key, value) {

        return { [key]: value }

    }

    console.log(makeobj("hello", "world"))

    // { hello: "world" }

    let i = 0;

    let obj = {

        ["val" + i++]: i,

        ["val" + i++]: i

    }

    console.log(obj)

    //{val0: 1, val1: 2}

    let param = "size"

    let config = {

        [param]: 12,

        ["moblie" + param.charAt(0).toUpperCase() + param.slice(1)]: 4

    }

    console.log(config)

    // { "size": 12, "moblieSize": 4 }

키값을 대괄호 [] 로 묶어주면 된다 이거구만.

Destructuring

    const obj = { age: 21, name: "spark", grade: "A"}

    const {name, ...rest} = obj;

    console.log(rest) 

    // {age: 21, grade: "A"}...객체의 차집합을 가져온다.

두번째 줄의 ...rest는 앞에 name을 제외한 차집합을 가져온다는 사실.

    const [{ prop: x1 } = { prop: 123 }] = []

    console.log(x1) // 123

음...어떤 이득이 있는지는 모르겠다

React

- 클래스 형태로 컴포넌트 선언 : 화면도 보여주면서 출력해주는 값들을 유지해야할 때

class App extends React.Component {

  render(){

    return (

      <div className="App">

        <header className="App-header">

          <img src={logo} className="App-logo" alt="logo" />

          <p>

            Edit <code>src/App.js</code> and save to reload.

          </p>

          <a

            className="App-link"

            href="https://reactjs.org"

            target="_blank"

            rel="noopener noreferrer"

          >

            Learn React

          </a>

        </header>

      </div>

    );

  }

}

- 함수 형태 선언 : 단순하게 UI 화면만 return 해야할 때 사용

function App() {

  return (

    <div className="App">

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>

          Edit <code>src/App.js</code> and save to reload.

        </p>

        <a

          className="App-link"

          href="https://reactjs.org"

          target="_blank"

          rel="noopener noreferrer"

        >

          Learn React

        </a>

      </header>

    </div>

  );

}

- div 태그 여러개 쓸 때, <> 또는 <Fragment> 태그 사용해서 불필요한 DOM 생성 방지

  render(){

    return (

      <>

      <div><h1>헬로우</h1></div>

      <div>하이</div>

      </>

    );

  }

- div style 입히기

class App extends React.Component {

  render() {

    const style = {

      backgroundColor: 'blue',

      padding: '70px',

      color: 'white',

      fontSize: '50px'

    }

    return (

      <div style={style}>안녕하세요 ㅎㅎ</div>

    );

  }

}

또는 이런식으로..좋아보이진 않음

      <div style={{

        backgroundColor: 'blue',

        padding: '70px',

        color: 'white',

        fontSize: '50px'

      }}>안녕하세요 ㅎㅎ</div>

- 상태 변화 예제. onClick 부분에 ( )를 쓰지않고 함수 호출이 되는 것을 볼 수 있음

class Counter extends React.Component {

    state = {

        number: 0

    }

    plus = () => { // 화살표 함수가 아니면 바인딩이 안됨 -ㅅ-;

        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.plus}>+</button>

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

            </div>

        )

    }

}

- this.setState 써먹기

let { number } = this.state;

number += 1;

this.setState( { number } )

이 방법이 괜찮은 듯