React

이번에는 form 형태로 된 습관을 입력할 수 있는 input을 만들어본다. 우선 habitaddform.jsx를 만든다. form 형식이니까 div로 감싸주지말고, form으로 감싸준다. render() { return ( Add ); } 이렇게 form 태그 안에 input과 button을 만들어서 form 형식을 만들어준다. 그 후 form은 onSubmit 으로 버튼을 클릭했을 때 보내질 수 있도록 만들어져야 하므로 form에 onSubmit 함수를 추가한다. onSubmit = (event) => { event.preventDefault(); }; render() { return ( Add ); } event 함수를 받고, event.preventDefault(); 로 form이 submit 되..

일단 nav 컴포넌트를 만들어야 한다. 위에 있는 nav바 이다. 이런식으로 만들어야 한다. nav바에 있는 0은 현재 진행한 습관이 추가되면 1 추가되게끔 만들면 된다. 일단 nav바에도 count가 있어야 하기 때문에, 모든 데이터(state)를 최상위 컴포넌트인 app 컴포넌트에 옮겨야 한다. app.jsx class App extends Component { state = { habits: [ { id: 1, name: "Reading", count: 0 }, { id: 2, name: "Running", count: 0 }, { id: 3, name: "Coding", count: 0 }, ], }; handleIncrement = (habit) => { // state 오브젝트 안에 있는 co..

react의 이벤트를 처리할 것이다. (버튼을 누를 때 +되거나 -되거나 습관이 삭제되거나 하는 것) 우선 우리가 저번에 코드를 짠 habit.jsx 에서는 그냥 habit을 보여주는 수단으로만 활용한다. habit.jsx import React, { Component } from "react"; class Habit extends Component { render() { const { name, count } = this.props.habit; return ( {name} {count} ); } } export default Habit; habit.jsx에서는 데이터가 담겨있지 않고, 그저 습관들을 보여주는 역할만 할 것이다. habits.jsx에서 습관 데이터를 관리하고 그것을 props로 habit..

이번에는 habits 라는 습관들이 가득 있는 컴포넌트를 만들어보도록 하자 rcc를 이용해서 틀을 만들어준다. 그 후 state에 습관들의 데이터를 넣어준다. import React, { Component } from "react"; class Habits extends Component { state = { habits: [ { name: "Reading", count: 0 }, { name: "Running", count: 0 }, { name: "Coding", count: 0 }, ], }; render() { return ; } } export default habits; 이렇게 배열 객체 형태로 만들어 주었다. habits 라는 배열 안에 name과 count 오브젝트에 데이터가 담겨있다. r..

State 컴포넌트 안에서 우리가 정의한 컴포넌트의 state 오브젝트이다. 컴포넌트 UI를 위한 데이터를 보관하는 오브젝트로, 이 state라는 오브젝트를 통해서 데이터에 업데이트가 발생하면 리액트가 자동적으로 우리가 구현한 render 함수를 호출한다. import React from 'react'; class LikeButton extends Component { state = { numberOfLikes: 0, }; render() { return {this.state.numberOfLikes} ; } } export default LikeButton; Props 컴포넌트 밖에서 주어지는 데이터이다. 컴포넌트 안에서 자체적으로 데이터를 정의해서 사용하는 State와는 다르게, Props는 컴포넌트..

데이터를 넣기 위해서는 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..