React

데이터를 넣기 위해서는 state를 이용하면 된다. 우리의 habit tracker 에는 습관을 얼만큼 했는지를 알 수 있는 숫자 형태의 데이터가 있다. 이 데이터를 넣어서 움직이기 위해서는 state를 이용해야 한다. 그래서 우리는 이번에 +, - 버튼을 이용해서 state의 수를 올리고 내릴 것이다. 1. state로 수 형태를 만든다. 2. span 태그 안에 this.state.count로 count를 불러온다. 3. 그 수를 +, - 버튼으로 수가 + - 될 수 있게 button 태그에 onClick으로 handleIncrement를 따로 만든다. 4. 그 안에 setState로 *꼭 setState로 해야함 안그러면 리액트가 인식 못함* this.setState({count: this.stat..

1. component에 habit.jsx 파일 만들기 2. rcc를 누르고 tap 을 누르면 골격이 만들어짐 3. 클래스는 항상 대문자로 시작 habit.jsx import React, { Component } from 'react'; class Habit extends Component { render() { return ( reading 9 ) } } export default Habit export default 로 Habit 클래스 컴포넌트를 다른 컴포넌트에서도 사용 가능하도록 만들어준다. return 부분에 소스코드를 추가해서 만들어준다. app.jsx import React, { Component } from 'react'; import './app.css'; import Habit from..

- (책) 리액트를 다루는 기술, (강의) 드림코딩 react 를 참조하여 정리하였습니다. jsx 자바스크립트 코드 위에서 간단하게 html처럼 할 수 있도록 만드는 것이다. 브라우저가 실행되기 전에 코드가 번들링되는 과정에서 babel을 사용하여 일반 자바스크립트 형태의 코드르 변환된다. html 과 jsx 의 차이 - html : - jsx : 기본적으로 html은 마크업 언어이고, jsx는 자바스크립트 코드이다. 그렇기 때문에 jsx는 편하게 비즈니스 로직을 작성 가능하다. const name = 'bbojjak' hello {name} jsx에서는 형제노드 작성 불가 했는데 다시 또 불가능하다는 뜻 예전에는 이렇게 묶었음. 불필요한 div 사용 하지만 요즘에는 사용 및 이렇게만 해도 됨 형제노드인..

터미널에서 yarn create react -app template 로 템플릿을 만든다. 해당하는 템플릿에 들어가서 yarn start 하면, app이 실행됨 - public : 정적인 것들이 담김 (HTML, 이미지, 리소스) - src : 소스코드들이 담김 다이나믹 동적인 것들 보통은 우리가 쓰는 소스 안에 src 안에 공통적으로 사용하는 components 폴더를 따로 만들어서 넣어 놓는다. 파일 이름을 소문자로, 리액트 컴포넌트 구분을 위해 jsx를 사용 index는 단순 js이다. (그냥 연결해주는 역할) 프로젝트 만들기 만들어둔 template를 우리의 프로젝트로 복사하는 방법 - 복사하고 싶은 공간 위치에서 터미널 cp -R template habit-tracker(프로젝트이름) 폴더로 들어..

1. 설치 방법 yarn Mac 사용 개발자: brew로 설치 하세요: brew install yarn brew가 설치되어져 있지 않다면 여기에서 확인해 보세요: https://brew.sh/ /bin/bash -c "$(curl -fsSL )" 위에 명령어를 복사하셔서 터미널에 붙여서 실행하시면 설치가 된답니다. Windows 사용 개발자: yarn 사이트에 가시면 설치 파일을 받으 실 수 있어요 :) https://classic.yarnpkg.com/en/docs/install/#windows-stable 윈도우용 터미널: https://cmder.net/ NodeJS: https://nodejs.org/en/ Git: https://git-scm.com/downloads 저의 iTerm 셋팅: ht..

- (책) 리액트를 다루는 기술, (강의) 드림코딩 react 를 참조하여 정리하였습니다. MVC 자바스크립트 기반 프레임 워크 들은 주로 MVC (Model - View - Controller) 아키텍처, MVVM (Model - View - View Model) 아키텍처를 사용한다. AngularJS의 경우는 MVW 아키텍처로 애플리케이션을 구조화한다. MVC, MVVM, MVW와 같은 여러 구조가 지닌 공통점은 모델과 뷰가 있다는 것이다. 모델 (M) - 애플리케이션에서 사용하는 데이터를 관리하는 영역 뷰 (V) - 사용자에게 보이는 부분 컨트롤러 (C) - 프로그램이 사용자에게서 어떤 작업을 받으면 컨트롤러는 모델 데이터를 조회하거나 수정하고 변경된 사항을 뷰에 반영함. 리액트 리액트는 자바스크립..