React 정리 #3

in Devlog on Bit



React 정리 #3

복습 (구조)

  • props로 기본 필드, state 필드, 함수 등을 받아올 수 있고 보낼 수 있다.

App.js

import React, { Component } from 'react'
import Bpp from './bpp'

export default class App extends Component {
  n1 = 10;

  state = {
    n2 : 20,
  }

  f1() {
    console.log('f1 call');
  }

  render() {
    return (
      <div>
        {/* Bpp에 Props로 넘기기 가능 (state, 함수 등) */}
        <Bpp n1 = {this.n1} state = {this.state} f1 = {this.f1}/>
      </div>
    )
  }
}

Bpp.js

import React, { Component } from 'react'

export default class Bpp extends Component {
  render() {
    return (
      <div>
        {/* 부모에게서 기본 필드 'n1' 받아옴 */}
        <h1>{this.props.n1}</h1>
        {/* 부모에게서 state 필드 받아옴 */}
        <h1>{this.props.state.n2}</h1>
        {/* 부모에게서 f1 함수 받아옴 */}
        <button onClick={this.props.f1}>App's Button</button>
      </div>
    )
  }
}


실습 #1

  • JavaScript의 random은 C와 같이 처리한다. 소수로 나오기 때문에 *연산과 버림 함수를 사용하여 랜덤값을 받는다.

  • 다른 Component로 함수 자체를 던져줄 수 있으며, 해당 함수가 메인 Component의 state값에 접근 가능하다.

import React, { Component } from 'react'

class App extends Component {
  state = {
    animal: ['호랑이', '코끼리', '앵무새'],
  }

  // Event 함수를 통해 rand함수를 받아 랜덤한 동물
  animalEvent = () => {
    // random 함수로 랜덤 index 값을 받아온다.
    let random = Math.floor(Math.random() * 3)

    this.setState({
      animal_name: this.state.animal[random],
    })
  }

  render() {
    return (
      <div>
        {/* 동물 이름은 App에서 표현 */}
        {this.state.animal_name}
        
        {/* Bpp Props로 함수를 던져줌 */}
        <Bpp animalEvent = {this.animalEvent} />
      </div>
    )
  }
}

class Bpp extends Component {
  render() {
    return (
      <div>
        {/* 버튼 이벤트는 Bpp에서 Props로 받아서 처리 */}
        <button onClick = {this.props.animalEvent}>동물</button>
      </div>
    )
  }
}

export default App;


실습 #2

  • 알림창 예시 3개
    1. 일반 알림창
      alert("안녕하세요!")
    2. 입력 가능한 알림창
      • prompt('알림창 text', '텍스트필드 안의 값')
          prompt("안녕하세요", "기본값")
    3. 확인, 취소 알림창
       window.confirm("확인 알림창")
  • input 태그내의 설정은 객체의 속성이기 때문에 콤마(,)를 사용하지 않음.
import React, { Component } from 'react'

export default class App extends Component {
  
  // 알림창 띄우는 3개
  f1 = () => {
    // 1. 기본 알림창
    alert("안녕하세요")
  }
  f2 = () => {
    // 2. 입력가능한 알림창
    // 입력 결과값이 리턴된다. (취소시 null)
    let result = prompt("안녕하세요", "입력하세요")
    console.log(result);
  }
  f3 = () => {
    // 3. 확인,취소 알림창
    // 입력 결과값이 리턴된다. (확인 true, 취소 false)
    let result = window.confirm("확인 or 취소")
    console.log(result);
  }

  // 상태 확인용 함수
  f4 = (e) => {
    console.log("입력");
    console.log(e.target.value);
  }

  // 실행된 객체를 `e`로 받아서 setState 실행
  f5 = (e) => {
    this.setState({
      txt : e.target.value
    })
  }

  state = {
    txt: "",
  }

  render() {
    return (
      <div>
        <button onClick = {this.f1}>f1</button>
        <button onClick = {this.f2}>f2</button>
        <button onClick = {this.f3}>f3</button>

        {/* 익명함수를 통하여 alert 호출 */}
        <button onClick = {() => {alert("글쎄요..")}}>글쎄요 버튼</button>

        <input
        // input 태그는 한줄로 구구절절 안쓰기 때문에 줄바꿈 처리
        //객체의 속성이기 때문에 콤마(,)를 사용하지않음.
          type = 'text'
          name = "메세지"
          placeholder = "값을 입력하세요!"
          // textfield안의 값이 바뀔때마다 호출되는 `onChange`
          onChange = {this.f5}
        />

        {/* 버튼을 클릭하였을때 state.txt필드의 값을 바로 알림창에 띄워준다. */}
        <button onClick = {() => {alert(this.state.txt)}}>알람</button>
      </div>
    )
  }
}


실습 #3

  • state내에서 값을 설정할때 동적으로 []사이에 변수명 혹은 표현식을 넣어 변수내의 값을 받아 state 설정이 가능하다.
import React, { Component } from 'react';

class EventPractice extends Component {

  state = {
    username: '',
    email: '',
    message: ''
  }

  // '텍스트필드'의 값이 변경될 때마다 호출 되는 함수
  handleChange = (e) => {
    this.setState({
      //! 대괄호 안에 표현식을 넣어 사용한다.
      [e.target.name]: e.target.value
    });
  }

  // '버튼'이 클릭될 때마다 호출 되는 함수
  handleClick = () => {
    alert(this.state.username + ': ' + this.state.message);
    this.setState({
      username: '',
      message: ''
    });
  }

  // '텍스트필드'에서 'Enter'키를 눌렀을때 호출되는 함수
  handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      this.handleClick();
    }
  }


  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input 
          type="text"
          name="username"
          placeholder="유저명"
          value={this.state.username}
          // change 이벤트 등록
          onChange={this.handleChange}
        />
        <input 
          type="text"
          name="message"
          placeholder="아무거나 입력해보세요"
          value={this.state.message}
          // change 이벤트 등록
          onChange={this.handleChange}
          // keypress 이벤트 등록
          onKeyPress={this.handleKeyPress}
        />
        {/* 버튼클릭 이벤트 등록 */}
        <button onClick={this.handleClick}>확인</button>
      </div>
    );
  }
}

export default EventPractice;


예제 #3-1

let n = 'a'

let obj = {
    // 해당 'n' 값 내에 있는 'a'값으로 받아준다.
    [n]: 0,
    b: 10,
    c: 20,
}

console.log(obj);


예제 #4

  • map 메소드
    • 사용 방식 배열.map((요소, 인덱스, 배열) => {return 요소});
    • 반복문을 자동으로 돌아주며 배열안의 요소들을 1:1로 짝지어 준다.
let ar = [10, 20, 30, 40, 50]
console.log(ar);

// map을 사용해 가공된 데이터 저장이 가능하다.
let br = ar.map((n) => { 
    console.log(n) 
    return n * 10
})

// value값과 함께 key값도 받아올 수 있다.
let cr = ar.map((n, key) => { 
    console.log(n, key) 
    return n * 10
})

console.log(br);


실습 #4 - 1

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    // 요사이는 this 필요없음
    let ar = ['호랑이', '코끼리', '독수리']
    let br = ar.map((v, k) => {
      // version이 업데이트되어서 key값을 매핑해야함. 안그럼 오류.
      return <li key={k}>{v}</li>
    })

    return (
      <div>
        {br}
      </div>
    )
  }
}
  • 해당 br 배열을 람다식으로 표현
...
    let ar = ['호랑이', '코끼리', '독수리']
    let br = ar.map((v, k) => <li key={k}>{v}</li>)
...


실습 #5

// rcfc로 생성
import React, { Component } from 'react';

class App extends Component {

  // Mount = 보조시스템을 꼽을때 사용 <=> Unmount

  // render()되기 전에 값 갱신이 필요할때 사용
  // 'will'은 어떤 작업을 하기 전에 일어남
  componentWillMount() {
    console.log(1);
  }

  // render() 된 후에 값 갱신이 필요할때 사용
  // 'did'는 어떤 작업을 한 후에 일어남
  componentDidMount() {
    console.log(2);
  }

  componentWillReceiveProps(nextProps) {
    console.log(3);
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log(4);

  }

  componentWillUpdate(nextProps, nextState) {
    console.log(5);

  }

  componentDidUpdate(prevProps, prevState) {
    console.log(6);

  }

  componentWillUnmount() {
    console.log(7);

  }

  render() {
    console.log(8);
    // 컴포넌트의 lifecycle
    // 실행시 1, 8, 2가 나옴.
    // 나머지 함수는 props로 넘어갈때 , 넘어가고나서 등의 상황에 사용
    return (
      <div>

      </div>
    );
  }
}

App.propTypes = {

};

export default App;


실습 #6

import React, { Component } from 'react'

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

// 'state'를 사용할 일이 없다. => 함수형 컴포넌트
// 앞에 나왔던 7가지의 life cycle이 없어서 가볍다. => 함수형 컴포넌트
// 부모에게 props 받는건 가능 => 함수형 컴포넌트

// 2. 함수형 컴포넌트이며, rsc 단축키로 생성한다.
const Bpp = (t) => {
  return (
    <div>
      <h1>Bpp</h1>
      {t.a}
    </div>
  );
};

// 1. 함수형 컴포넌트
// function Com () {
//     return (
//       <div>
//         <h1>COM</h1>
//         <h1>{this.props.a}</h1>
//       </div>
//     )
// }


정리


© 2019. by mintheon

Powered by mintheon