금마 일기

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에서 우리..

🎈 Component API 🎈 이번에는 React component API에 대해서 알아보자. setState(), forceUpdate, ReactDOM.findDOMNode() 이 3가지 메서드와 this.method.bind(this)를 사용할 것이다. 📌 Set State 🔧 setState() 메서드는 컴포넌트의 상태를 업데이트 할 때 사용된다. 🔧 이 메서드는 state를 교체하는게 아니라 단지 원래 상태에 바뀐 것을 더하는 것이다. import React from 'react'; class App extends React.Component { constructor() { super(); this.state = { data: [] } this.setStateHandler = this.setS..

🎈 Props 🎈 state와 props의 가장 큰 차이점은 props는 불변이라는 것이다. 우리가 container component가 state로 정의되어야 한다는 이유가 된다. 📌 Props 사용 🔧 component에 불변의 데이터가 필요하다면 props를 main.js. 안에 있는 reactDOM.render() 함수에 추가하거나, 🔧 component 안에 사용하면 된다. App.jsx import React from 'react'; class App extends React.Component { render() { return ( {this.props.headerProp} {this.props.contentProp} ); } } export default App; main.js import ..

🎈 State 🎈 📌 State는 데이터가 오는 곳이다. 📌 State는 가능한 간단하게 그리고 stateful component의 숫자를 최소화해야 한다. App.jsx import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { header: "Header from state...", content: "Content from state..." } } render() { return ( {this.state.header} {this.state.content} ); } } export default App; main.js import React from 'react..

🎈 Components 🎈 📌 어떻게 컴포넌트를 합치고 유지하기 쉽게 만드는지 배워봅시다 📌 페이지의 다른 것들에는 영향을 미치지 않고 컴포넌트만 바꾸고 업데이트 하는 것을 가능하게 해줍니다 App.jsx import React from 'react'; class App extens React.Component { render() { return ( ); } } class Header extends React.Component { render() { return ( Header ); } } class Content extends React.Component { render() { return ( Content The content text!!! ); } } export default App; 🔧 이 페이..