State와 Liftcycle State의 필요성시계 컴포넌트를 만들어 봅시다. 시계 컴포넌트를 만들려면, 매초마다 화면을 갱신해야 시간이 흐르는 것처럼 보이겠죠? function Clock(props) { return ( {props.date.toLocaleTimeString()} ); } function tick() { ReactDOM.render( , document.getElementById('root') ); } setInterval(tick, 1000); CodePen으로 예제 확인하기 화면을 다시 그려주는 방법으로, setInterval()를 사용하여 ReactDOM.render()을 매초 호출하여 화면을 갱신하였습니다. 매초 화면을 갱신하는 기능은 Clock 컴포넌트 안에서 구현하는 것이 ..
Components와 Props Component는 UI를 독립적(independent)하게 나누는 단위입니다. Component는 독립적이고, 재사용 가능해야 합니다. Component는 JavaScript에서 함수, Props는 함수의 인자값으로 생각 할 수 있습니다. 함수는 인자 값으로 어떠한 값을 만들어 내고, Component는 Props로 어떠한 UI를 만들어 냅니다. Component 종류Component를 만들어 내는 방법은 function을 이용하는 방법과 ES6에서 추가된 class를 이용하는 방법 2가지가 있습니다. Function ComponentComponent를 표현하는 가장 간단한 방법입니다. function Welcome(props) { return Hello, {props...
JSX React.JS는 일반적인 JavaScript 문법이 아닌 JSX 문법을 사용하여 UI를 구성하게 됩니다. 아래의 코드를 JSX라고 합니다.const element = Hello, world!;JSX는 JavaScript의 확장 구문으로 JavaScript의 모든 기능을 제공합니다. 위의 element 변수를 보면 HTML 태그를 정의하는데, 따옴표를 사용하지 않는 것을 볼 수 있습니다. JSX의 사용은 React.JS에서 필수는 아닙니다. 하지만 JSX를 사용하는 것이 어플리케이션의 속도와, 코드 작성에서 더 쉽고 빠르게 개발 할 수 있게 해줍니다. JSX Tag 안에 JavaScript 사용하기JSX 안에 JavaScript를 사용하려면 중괄호{} 를 사용하면 됩니다. function squa..
CodePen CodePen을 이용하여 React.JS를 이야기할 계획입니다. CodePen을 이용하면 별도의 설치 없이 브라우저에서 React.JS 코드를 작성하고 확인 할 수 있습니다. 사용하는 법은 아주 간단합니다. 회원가입 한 후 Pens를 생성하여 간단한 세팅만 설정하면 끝! Settings에서 JavaScript Preprocessor에 Babel로, Add External JavaScript에 https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js와 https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js, react.js와 react-don.js를 포함해주면 끝이납니다. Code..
React 소개 React.JS 란 ? React.JS는 페이스북에서 개발한 View단을 컨트롤하는 라이브러리 입니다.Component 단위로 View를 모듈화 하여, 재사용 가능한 UI를 생성 할 수 있게 합니다. React.JS는 가상 DOM(Virtual DOM)이라는 개념을 사용합니다. 만약 DOM이 변경이 되었다면, 기존의 DOM과 가상 DOM을 비교하여, 최소한의 DOM을 변경하여, DOM 변경 시 최적화 합니다. 왜 가상 DOM을 사용하나요 ?DOM(Document Object Model)은 문서를 객체로 표현하기 위한 표준입니다. 즉, HTML이나 XML 등의 문서를 객체로 표현하기 위한 표준입니다. DOM은 아래의 예시와 같이 HTML은 트리 구조로 표현됩니다. DOM은 트리 구조로 표현..