1. Input 상태 관리 import React, { Component } from 'react'; import PhoneForm from './components/PhoneForm'; class App extends Component { render() { return ( ); } } 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 }); } render() { return ( {this.st..

1. 도구 NodeJS NVM NPM / Yarn (속도 향상) VSCode 2. 프로젝트 생성 1) Create React App npx create-react-app my-app cd my-app npm start 2) 설정 파일 일반적으로 프로젝트를 만들게 되면, 웹팩, 바벨 설정 등 다양한 설정으로 프로젝트가 복잡해지는데 create-react-app으로 프로젝트를 생성할 경우, 모든 설정이 node-modules/react-scripts에 숨어있다. 만약 그러한 설정들을 커스터마이징을 할 경우에는 'yarn eject' 명령어를 수행하면 된다. 단, 한번하고 나면 되돌릴 수 없기에 주의해야한다. 3) VSCode 플러그인 Reactjs code snippets 플러그인을 설치하게 되면 보다 쉽게..

1. LifeCycle API LifeCycle API는 나타날 때, 업데이트 될 때, 사라질 때 등 상황에 맞게 사용할 수 있는 다양한 API가 존재한다. 1) 컴포넌트 초기 생성 컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API들은 다음과 같다. constructor componentDidMount: 외부 라이브러리 연동(D3, masonry, 등), 컴포넌트에 필요한 데이터 요청(Ajax, GraphQL, 등), DOM에 관련된 작업(스크럴 설정, 크기 읽기, 등)을 수행한다. ... componentDidMount() { console.log(this.mDiv.getBoundingClientRect()); // 특정 DOM의 정보 확인 } render () { return ( this.my..

1. Props 부모 컴포넌트에서 자식 컴포넌트에 값을 전달할 때 사용한다. import React, { Component } from 'react'; class MyName extends Component { static defaultProps = { name: "기본값" } render () { return ( 부모로 부터 받은 값은 {this.props.name}입니다. ) } } export default MyName; import React, { Component } from "react"; import MyName from './MyName'; class App extends Component { render() { return ( ); } } export default App; 2. 함수형 ..

1. JSX 기본 문법 ※ JSX는 HTML 비슷지만, Javascript로 변환이 된다. 1) 태그 태그는 반드시 닫혀있어야 한다. 2) 엘리먼트 두 개 이상의 엘리먼트는 반드시 하나의 엘리먼트로 감싸져 있어야 한다. 단, Fragment를 사용할 경우, 불필요한 엘리먼트를 사용하지 않아도 된다. import React, { Component, Fragment } from "react"; class App extends Component { render() { return ( Hello Bye // // Hello // Bye // ); } } export default App; 3) JSX Javascript 값 사용 JSX 내부에서는 Javascript 값을 사용할 땐 '{ }'을 사용한다. imp..

1. React MVC, MVVM, MVW 등의 프레임워크의 공통점은 Model이 있다는 점이다. Model은 양방향 바인딩의 특징을 가지고 있다. 즉, View의 값이 변화하면 Model도 변화하고, Model의 값이 변화하면 View의 값도 변화하는 특징을 가지고 있다. 여기서 변화(Mutation)는 특정 이벤트 발생 시 Model의 변화를 일으키고 어떤 방식으로 View를 업데이트를 해야할지를 정해야하는 복잡한 작업이다. 이러한 복잡한 과정을 해결하기 위해서, Facebook은 변화를 하지 않고 그 대신 데이터가 변경되면 기존의 View를 삭제하고 새로운 View를 만드는 개념으로 접근하게 되었다. 하지만 브라우저는 DOM 기반으로 동작하기 때문에, 페이지가 어떠한 상황마다 View를 생성하게 되..