금마 일기

🎈 Higher Order Component 🎈 📌 기존 구성 요소에 기능을 추가하는데 사용되는 JavaScript 기능이다. 📌 데이터를 수신하고 해당 데이터에 따라 값을 반환하는데 입력 데이터가 변경되면 HOC가 재실행된다. 📌 구성요소를 업데이트하기 위해서는 HOC를 변경할 필요는 없고, 우리 함수가 사용중인 데이터만 바꾸면 된다. 🔧 MyHOC는 MyComponent에 데이터를 전달할때만 사용 되는 함수이다. import React from 'react'; var newData = { data: 'Data from HOC...', } var MyHOC = ComposedComponent => class extends React.Component { componentDidMount() { this...

📌 React 글 작성시 참고했던 페이지 목록입니다. https://www.tutorialspoint.com/reactjs/reactjs_quick_guide.htm ReactJS - Quick Guide - Tutorialspoint ReactJS - Quick Guide ReactJS - Overview ReactJS is JavaScript library used for building reusable UI components. According to React official documentation, following is the definition − React is a library for building composable user interfaces. It encou www.tutoria..

🎈 Animations 🎈 🔧 React에서 기본 CSS 전환 및 애니메이션을 만드는데 사용되는 추가 기능이다. 이것도 cmd에서 다운받는다. >npm install freact-addons-css-transition-group 🔧 새로운 파일인 style.css 만들자 >type nul > css/style.css 🔧 앱에서 사용가능하게 하려면, head 요소를 index.html에 연동시켜줘야 한다. 🔧 기본적인 React 컴포넌트를 만들어보자. ReactCssTransitionGroup 요소는 애니메이션을 구현할 구성요소의 래퍼로 사용된다. tran..

🎈 Flux 🎈 Flux는 프로그래밍 개념으로 데이터가 단방향으로 흐른다. 데이터는 앱에서 화면에 나타날때까지 단방향으로 흐르게 된다. 📌 Flux 요소들 [1] Actions : 데이터 흐름을 야기하는 작업이 Dispatcher에게 전송됨 [2] Dispatcher : 앱의 중앙 허브. 모든 데이터가 Store로 전송됨 [3] Store : 어플리케이션 state 그리고 로직이 유지되는 곳. 모든 Store는 특정 상태를 유지하며 필요할때 업데이트 됨 [4] View : Store에서 data를 받아서 앱을 다시 렌더링 함 📌 Flux 장점 - 단방향 데이터 흐름이 이해하기 쉽다 - 앱을 유지보수하기 더 쉽다 - 앱 부분들이 분리되어있다 📌 Redux Flux 패턴을 React 앱에 적용시킬 때 우리는..

ReactDOM.render(( ), document.getElementById('app')) 🎈 Router 🎈 📌 React로 App을 라우팅 하는 법 🔧 react-router를 설치하는 간단한 방법은 밑의 코드를 cmd에 치면 된다. >npm install react-router 🔧 4개의 컴포넌트를 만들건데, 'App' 컴포넌트는 tab menu에 사용하고, 다른 (Home), (About), (Contact)는 route가 바뀌면 렌더링 될것이다. main.js import React from 'react'; import ReactDOM from 'react-dom'; import { Router, Ro..

🎈 Keys 🎈 📌 React에서 keys는 동적으로 컴포넌트를 만들어서 일하거나, 사용자들이 목록을 바꿀 때 유용하다. 📌 key값을 설정하면 컴포넌트들이 변경된 후에도 식별 가능하다 🔧 고유한 index(i)값을 사용하여 동적으로 Content 요소를 만들어보자. 🔧 map 함수는 data 배열에서 3rodml 요소를 만들고, 고요한 key값이 모든 요소에 할당 될 수 있다록 i를 key 값으로 하여 요소를 생성해보자. App.jsx import React from 'react'; class App extends React.Component { constructor() { super(); this.state = { data:[ { component: 'First...', id: 1 }, { compo..

🎈 Refs 🎈 📌 ref는 element에 reference를 return할 때 쓰인다. 📌 Refs는 대부분의 케이스에서 사용하는 걸 피해야하지만 DOM을 측정하거나 컴포넌트에 method를 추가할때 유용하다. 🔧 다음의 예제는 refs를 가지고 입력필드를 초기화 하는 방법을 보여준다. 🔧 ClearInput 함수는 ref="myInput" 값을 가진 요소를 찾고, state를 초기화하며 그리고 버튼이 클린 된 후에 집중한다. App.jsx import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { constructor(props) { super(props); this.state = { ..

🎈 Events 🎈 [ 기본 예제 ] App.jsx import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { data: 'Initial data...' } this.updateState = this.updateState.bind(this); }; updateState() { this.setState({data: 'Data updated...'}) } render() { return ( CLICK {this.state.data} ); } } export default App; main.js import React from 'react'; import ReactDO..

🎈 Forms 🎈 📌 입력 form >> value={this.state.data} 📌 해당 form은 입력값이 달라질때마다 state값을 update하게 해주는데, 이때 onChange 이벤트를 사용해서 값이 변화했는지를 지켜본다. [ 기본 예제 ] App.jsx import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { data: 'Initial data...' } this.updateState = this.updateState.bind(this); }; updateState(e) { this.setState({data: e.target.value}); } r..

🎈 Life Cycle 🎈 📌 componentWillMount : 서버와 클라이언트에서 렌더링 전에 실행된다. 📌 componentDidMount : 클라이언트쪽의 처음 렌더링이 일어난 후에 실행된다. 여기서 AJAX 요청이나 DOM 혹은 state update가 일어나야한다. : 이 방법은 다른 JavaScript 프레임워크들과 합치거나, setTimeout 또는 setInterval과 같은 실행이 지연되는 함수와의 통합에 사용된다. : 우리는 이 method를 state 업데이트에 사용하여 다른 lifecycle method를 야기할수 있다. 📌 componentWillReceiveProps : props가 update되고 다른 render가 불리기 전에 일어난다. : setNewNumer에서 우리..