React 정리 #2

복습 (구조)

import React, { Component } from 'react'

export default class App extends Component {
  // 함수가 들어가는 영역
  render() {
    // JAVA 코드가 들어가는 영역
    return (
      // JSX 들어가는 영역
      <div>
      </div>
    )
  }
}

실습 #1

props는 값을 갱신시킬 수 없다. 자체적으로 갱신이 불가하다.

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div>
        <Bpp a = '호랑이' b = '10' c = {30}/>
      </div>
    )
  }
}

class Bpp extends Component {
  render() {
    console.log(this.props.c);
    //* props는 데이터를 갱신할 수 없다 (부모가 변경시킬 수는 있지만, 자식이 직접 갱신 시킬 수는 없다. (자체적으로 갱신 불가))
    // this.props.c = 50

    return (
      <div>
        <h1>{this.props.a}</h1>
        <h1>{this.props.b}</h1>
        <h1>{this.props.c}</h1>
      </div>
    )
  }
}

실습 #2

Props와 State의 차이점
크게 값을 갱신할수 있냐, 없냐로 구분한다.
- Props
  - 값을 단순히 받아오고, 값 갱신이 불가능.
- State
  - 컴포넌트 자체에서 초기화 하며, 값 갱신이 가능하다.
    - 단독으로 값 갱신은 불가능 하며, 함수를 사용해아하는데 setState() 라는 함수를 사용한다
꼭 State를 사용해야 하는 이유가 있는가?
- 일반 필드명으로도 선언이 가능하고, 값도 갱신이 가능하다. 하지만…
- setState로 값 갱신시 render()함수가 호출되어 화면상에 즉각적으로 렌더링이 가능하다. 하지만 일반 필드명으로 값을 갱신시, render()함수를 가지고 오지 않아, 즉각적으로 렌더링이 되지 않고 ‘값’만 변경된다.
- setState는
SetState는 비동기 함수이다
- 대신 다음 render() 전까지는 갱신이 된다는것을 보장한다.
- (ex) setState 안에서 갱신시킨 n1을 console.log()로 출력할 경우 값이 갱신되지 않은 상태로 보임
정리
1. 컨트롤 안에 값이 갱신되는 함수(화면에 보여야 하는 데이터)는 모두 state를 사용하자
2. 화면에 보이는것과 관계없이 컴포넌트와 관계없이 내부적으로만 사용하는 변수는 필드로 사용해도 무방

import React, { Component } from 'react'

export default class App extends Component {
  // 함수가 들어가는 영역
  // state는 값 갱신이 가능, 객체 문법으로 사용
  state = {
    n1: 0,
  }

  // 일반 필드명도 선언 가능
  n2 = 0

  f1 = () => {
    // setState로 만든 객체를 값 갱신
    this.setState({
      n1 : this.state.n1 + 1
    });

  }

  f2 = () => {
    // 일반 필드명
    this.n2++
  }

  render() {
    // JAVA 코드가 들어가는 영역
    console.log(this.state.n1);
    console.log(this.n2);
    return (
      // JSX 들어가는 영역
      <div>
        <h1>{this.state.n1}</h1>
        <h1>{this.n2}</h1>
        <button onClick={this.f1}>클릭1</button>
        <button onClick={this.f2}>클릭2</button>
      </div>
    )
  }
}

실습 #3

import React, { Component } from 'react'

//현재 폴더의 './bpp.js'를 Opp로 사용하겠다. 대신 export default를 가져온다.
import Bpp, { Cpp, Dpp } from './bpp'

// 'fpp.js'의 함수들을 'Fpp'로 사용한다.
import* as Fpp from './fpp'

//! 컴포넌트들과 함수들을 모두 사용하려면 두개를 사용해야한다. 한방에 모두 사용하는 방법이 있긴하지만, 사용시 메인문이 굉장히 더러워진다. 두개 쓰는게 낫다.
// 'gpp.js'의 default component와 Hpp component를 가져온다.
// 'Gpp'라는 이름으로 사용
import Gpp, { Hpp } from './gpp'
// 'gpp.js'의 함수들을 'Gppf'로 사용한다.
import* as Gppf from './gpp'

import Ipp from './sub1/ipp'

//여러컴포넌트들이 합쳐진 하나의 컴포넌트를 가지고 오고 싶을때.
//폴더를 import 시킬 때에는 index.js라는 파일이 무조건 존재해야한다.
import Sub3 from './sub3'

// 총괄 정리
export default class App extends Component {
  f1() {
    console.log('f1 Call');
  }
  render() {
    //각 함수 호출
    this.f1()
    Fpp.f2()
    Fpp.f3()
    Gppf.f5()
    return (
      <div>
      {/* 각 컴포넌트 */}
        <Bpp/>
        <Cpp/>
        <Dpp/>
        <Gpp/>
        <Ipp/>
        {/* 폴더명을 import 했을경우 폴더명을 선언한 변수를 사용하면 폴더 안에 있는 'index.js'파일이 불러와진다. */}
        <Sub3/>
      </div>
    )
  }
}

정리

props와 state는 값의 갱신 가능 유무에 따라 갈린다.
state와 일반 필드의 차이는 render() 함수를 불러오느냐에 따라 구분한다.
import* as...를 사용하면 Component내의 function들만 불러온다.
import ...를 사용하면 default Component를 불러온다.
import ..., {...}를 사용하면 default Component를 포함해 {}안에 들어있는 Component도 함께 불러온다.
내부에서만이 아닌 외부에서도 함수나 컴포넌트를 사용하려면 앞에 export를 붙여 주어야 한다.

React 정리 #2

복습 (구조)

실습 #1

실습 #2

실습 #3

정리

Share this post