이것저것 다 개발

React Component의 LifeCycle입니다. Component 생성부터 종료까지 호출되는 순서대로 나열해 두었습니다. 컴포넌트 초기 생성 constructor()constructor는 생성자 라고 불리며 컴포넌트가 생성되었을때 호출됩니다. componentWillMount()render() 전에 호출됩니다. render()view를 만들어주는 함수입니다. componentDidMount()render() 후에 호출됩니다. 컴포넌트 업데이트 componentWillReceiveProps(nextProps)Component가 새로운 Props를 받게 됐을때 호출됩니다. shouldComponentUpdate(nextProps, nextState)Component의 Props나 State변경시 호출..

Component와 propsReact를 이용하면 UI를 컴포넌트화 하여 재사용할 수 있도록 만들 수 있습니다.여기에서 props란 Component의 parameter로 들어가는 임의의 값 입니다.parameter를 props로 정의한 후 컴포넌트 생성 시 속성을 정의해주면 됩니다.먼저 Component를 만드는 방법을 알아보겠습니다.1. Component 생성1-1. ES5 function function Hello(props) { return Hello, {props.name} }첫번째 방법으로는 ES5문법으로 function을 생성하여 만들어진 html 태그를 리턴하는 방법입니다. 1-2. ES6 function const Hello = (props) => Hello, {props.name} 두번..

이전 글에서 React와 ReactDOM을 사용한 React 코드를 작성해보았습니다.http://yongyi1587.tistory.com/37 < React 기초 -React와 ReactDOM 라이브러리 React.createElement() 라는 API를 호출하여 HTML코드를 만들고 ReactDOM.render()를 호출하여 렌더링을 하였습니다. 이번 글에서는 JSX를 이용하여 element를 정의하는 법을 적어보려고 합니다.JSX는 javascript의 확장으로 HTML과 비슷한 구문을 이용해 react element를 정의할 수 있게 해줍니다. 먼저 JSX를 사용하기 위해서는 Babel이 필요합니다. 1. Babel 모든 브라우저는 ES6나 ES7을 지원하지 않으며 JSX를 지원하지 않습니다. 그..

React와 ReactDOM React를 사용하기 위해서는 먼저 React와 ReactDOM이라는 라이브러리가 필요합니다. React는 View를 만들기위한 라이브러리이고, ReactDOM은 UI를 실제로 브라우저에 렌더링 할 때 사용하는 라이브러리 입니다. CDN으로 React와 ReactDOM 라이브러리를 추가하겠습니다. https://reactjs.org/docs/cdn-links.html //여기에 react Element 추가 위처럼 간단한 html 코드를 작성하고 react와 reactDOM의 라이브러리를 추가하였습니다. 그리고 그 아래 script 태그가 react 코드를 작성할 공간입니다. react 코드를 작성해보겠습니다. React는 렌더링 과정에서 React.createElement로..