React 개발하기

vscode에서 Reactjs code snippets 확장 설치

해당 확장 패키지를 다운로드 받으면 간단한 키 입력으로 React 구문을 자동 생성해 줄 수 있다.

 

클래스 형태로 만들어진 컴포넌트 생성 (js파일)

rcc

 

함수형 컴포넌트 생성 

rsc

 

객체 안에서 사용되는 [e.target.name]: 문법은 속성 계산명 이라는 문법

 handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer

객체 초기자

 

Input 상태 관리

import React, { Component } from 'react';

class PhoneForm extends Component {

  state = {
    name: '',
    phone: '',
  }

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  render() {
    return (
      <form>
        <input
          name="name"
          placeholder="이름"
          onChange={this.handleChange}
          value={this.state.name}
        />
        <input 
          name="phone"
          placeholder="전화번호"
          onChange={this.handleChange}
          value={this.state.phone}
        />
        <div>
          {this.state.name} {this.state.phone}
        </div>
      </form>
    );
  }
}

export default PhoneForm;

 

 

실습 코드 보기

https://codesandbox.io/s/84j07kxq98

contact-app - CodeSandbox

 

 

자식 컴포넌트에서 부모에게 값 전달

https://react-anyone.vlpt.us/03.html 에 보다 상세한 설명이 있습니다.~

 

 

부모 컴포넌트 설정

import React, { Component } from 'react';
import PhoneForm from './compoments/PhoneForm';

class App extends Component {
  handleCreate = (data) => {
    console.log(data);
  }
  
  render() {
    return (
      <div >
        <PhoneForm onCreate={this.handleCreate}></PhoneForm>
      </div>
    );
  }
}

export default App;

 

자식 컴포넌트 설정

import React, { Component } from 'react';

class PhoneForm extends Component {

    state = {
        name : '',
        phone : ''

    }

    handleChange = (e)=>{
        this.setState({ 
            [e.target.name] : e.target.value 
        })
    }

    handleSubmit = (e)=>{
        e.preventDefault();
        this.props.onCreate(this.state);
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input 
                 name = "name" 
                 placeholder="이름" 
                 onChange={this.handleChange} 
                 value={this.state.name}
                />
                <input 
                 name = "phone" 
                 placeholder="전화번호" 
                 onChange={this.handleChange} 
                 value={this.state.phone} 
                 />
                 <button type="submit">등록</button>
                 <div>
                 {this.state.name}
                 {this.state.phone}
                 </div> 
            </form>
        );
    }
}

export default PhoneForm;

 

등록 버튼 클릭시, handleSubmit 호출되어 부모의 onCreate 이벤트가 발생하며 자식의 state 데이터를 전달 

 

배열 이용하기

import React, { Component } from 'react';
import PhoneForm from './compoments/PhoneForm';

class App extends Component {

  id = 0;

  state = {
    information : [],
  }

  handleCreate = (data) => {
    const {information} = this.state; // 비구조 할당 문법을 이용 간결하게 작성할 수 있다.
    this.setState({
      information: information.concat({
        ...data,
        id: this.id++ 
      })
      //== 같은 형태
      //information: information.concat(Object.assign({}, data, {id : this.id++}))
    })
  }

  render() {
    return (
      <div >
        <PhoneForm onCreate={this.handleCreate}></PhoneForm>
        {JSON.stringify(this.state.information)}
      </div>
    );
  }
}

export default App;

 

전개구문 이용

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

전개 구문

 

 

실습코드보기

https://codesandbox.io/s/42rw81qvx?file=/src/App.js

contact-app - CodeSandbox

 

 

 

 

이글은 아래 강의를 보고 간단히 정리한 글입니다.
강의를 수강하시면 보다 상세한 정보를 얻으실 수 있습니다.

참조 : 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 - velopert(김 민준) (인프런)
참고문서 : https://react-anyone.vlpt.us/03.html