갬발자의 프로그래밍/React12 리액트 뽀개기 (3) state를 알아보자. state는 클래스에서만 사용이 가능하다 props와 비슷하지만 컴포넌트에 의해 완전히 제어되며 private속성이다. 일단 함수 컴포넌트에서 클래스 컴포넌트로 조금 수정을 했다. import React from 'react'; import logo from './logo.svg'; import './App.css'; import Clock from './Clock'; class App extends React.Component { render() { return ( ); } } export default App; 그리고 Clock이라는 컴포넌트를 만들었다. import React, { Component } from 'react'; class Clock extends Compone.. 2019. 12. 26. 리액트 뽀개기(2) 저번에는 간단하게 JSX에 대해서 알아봤다. 이번엔 props이다 props는 읽기 전용으로 수정할 수 없다고 한다. 사용해보자. //ex1.js import React from 'react'; class Ex1 extends React.Component { render(){ return 안녕하세요. { this.props.name }님; } } export default Ex1; 간단하게 ex1.js에서 만들었다. 이것을 App.js에서 사용할 것이다. import React from 'react'; import logo from './logo.svg'; import './App.css'; import Ex1 from './ex1'; function App() { return ( ); } export .. 2019. 12. 26. 리액트 뽀개기 (1) 리액트를 설치 하면 hello World를 봐야 할 거 같아 출력해 줬다. 일단 이정도 만 해놓고 react 문서를 조금 읽어보자. react의 사용에 있어서 jsx 문법을 사용해야 한다. 기본적인 정보는 아래에서 확인할 수 있다. Introducing JSX – React A JavaScript library for building user interfaces reactjs.org 기본적으로는 1.) html이 아니며 바스 크립트의 문법 확장 2.) 리액트의 "요소"를 만든다. 3.) 자바스크립트 표현식은 {} 사용 4.) 속성으로 표현식을 포함시킬 때는 "" 사용하지 않는다. 5.) camelCase 사용. 6.) 객체로도 사용. 등 이 있다. 또, css를 표현할 때도 const style = { .. 2019. 12. 26. hello react yarn global add create-react-app 리액트를 사용하려면 node가 필요하다. 나의 os는 window 이므로 window만 사용할 것이다. 물론 vscode를 사용할 것이고 여기서 사용하는 터미널을 사용할 것이다. 기본적으로 나는 sourcetree를 이용해서 git에 올리고 있다. ( 작은 것도 일단 올리고 나면..) 새로운 폴더를 열었다 개인적으로는 studyreact라는 폴더를 만들었다. 새로운 터미널을 열어서 리액트를 시작할 것이다. node.js를 설치했다면 npm이 자동 설치될 것이다. (npm이란 모듈을 패키지로 만들어 관리하는 것이다. 자세한 것은 생략한다.) npm을 이용해서 yarn을 설치해 사용할 것이다. (yarn은 npm보다 안정성과 속도 높기도 하며 권장된.. 2019. 12. 26. 이전 1 2 3 다음
