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
객체 초기자
객체는 new Object(), Object.create() 또는 literal 표기법 (initializer 표기법)을 사용하여 초기화될 수 있습니다. 객체 초기자(object initializer)는 0개 이상인 객체 속성명 및 관련값 쌍 목록입니다, 중괄호({})
developer.mozilla.org
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
contact-app by velopert using sw-precache-webpack-plugin, eslint-loader, fs-extra, postcss-flexbugs-fixes, babel-jest, babel-runtime, whatwg-fetch, webpack, react-dom
codesandbox.io
자식 컴포넌트에서 부모에게 값 전달

부모 컴포넌트 설정
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
전개 구문
전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시
developer.mozilla.org
실습코드보기
https://codesandbox.io/s/42rw81qvx?file=/src/App.js
contact-app - CodeSandbox
contact-app by velopert using sw-precache-webpack-plugin, eslint-loader, fs-extra, postcss-flexbugs-fixes, babel-jest, babel-runtime, whatwg-fetch, webpack, react-dom
codesandbox.io
이글은 아래 강의를 보고 간단히 정리한 글입니다.
강의를 수강하시면 보다 상세한 정보를 얻으실 수 있습니다.
참조 : 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 - velopert(김 민준) (인프런)
참고문서 : https://react-anyone.vlpt.us/03.html