https://reactjs.org/docs/hooks-intro.html Introducing Hooks – React A JavaScript library for building user interfaces reactjs.org react hook - 리액트 공식 사이트 개념을 먼저 알아보기 위해, simpleHabit.jsx 라는 컴포넌트를 만들어서 react hook을 사용해 볼 것이다. import React, { Component } from 'react'; class SimpleHabit extends Component { state = { count: 0, }; handleIncrement = () => { this.setState({ count: this.state.count + 1 })..
React
미리 만들어 놓은 habitAddForm.jsx를 간단하게 function 컴포넌트로 만들 것이다. 우리는, 클래스를 만들 때 단축키는 rcc 였다. 하지만 함수를 만들 때 단축키는 rsi 로 만들어주면 된다. import React from 'react'; const HabitAddForm = (props) => { }; 이런 형태로 만들어 진다. 클래스 사용 방법과 비슷하게 props를 받고 원하는 것을 return 해주면 된다. import React from "react"; const HabitAddForm = (props) => { const formRef = React.createRef(); const inputRef = React.createRef(); const onSubmit = (eve..
https://reactjs.org/docs/state-and-lifecycle.html State and Lifecycle – React A JavaScript library for building user interfaces reactjs.org state와 lifecycle에 관한 공식 사이트 이다. 라이프사이클을 클래스에 추가하는 방법 우리가 만들어 놓은 habit.jsx 코드를 예시로 들어서 사용할 것이다. habit 컴포넌트는 동적으로 추가가 된다. 추가 하게 되면 습관이 들어오고 컴포넌트가 만들어지고, 브라우저 위에 표기가 될 때 새로운 데이터를 네트워크 통신을 위해서 받아오거나, 타이머를 시작하거나, 이런 일들을 할 때 이것을 가능하도록 하는 것이 라이프사이클 함수이다. 우리가 컴포넌트를 ..
habit.jsx에서 PureComponent 해버리면, 업데이트가 되지 않을 것이다. 이렇게 업데이트 되지 않는 모습을 볼 수 있다. 이 이유는 purecomponent는 shallow 하게 prop안에 데이터가 변경되지않으면 렌더되지 않는다고 생각이 들기 때문이다. 참조값을 받기 때문에, 멤버변수가 전달되고 우리는 habit안에 있는 오브젝트 안에 있는 count 안의 데이터만 바뀌기 때문에 오브젝트가 변하는 것은 아니다. 그렇기 때문에 동일하다고 판단 되므로 render함수가 호출이 되지 않는다. 여기서 purecomponent를 사용하고 해결할 수 있는 방법은 2가지가 있다. 1. 우리가 전달할 때 변화하는 것을 따로 빼서 전달한다. habit컴포넌트 기준으로 우리는 habit의 count가 변화..
리액트는 총 두가지 문장으로 설명할 수 있다. 1. 리액트는 컴포넌트 들이다. 2. 데이터가 조금이라도 업데이트 되면 전체적으로 어플리케이션이 다 리렌더가 된다. 리액트는 클래스로 만들 수 있는 컴포넌트와, 퓨어 컴포넌트가 있고 함수로 만들 수 있는 것은 함수를 쓰는 것, memo를 쓰는 것, react hook을 사용하면 라이프사이클이나 state 같은 것을 사용할 수 있다. 우리가 habittracker를 만들 때, index.js라는 파일이 있었는데, ReactDOM 이라는 라이브러리를 이용해서 index에 있는 root라는 아이디를 가진 요소와 App이라는 최상위 컴포넌트를 연결해준다. app이라는 컴포넌트에는 state가 있었고, state에 따라서 어떻게 표기될 건지 ui가 정의된 부분은 re..
이제 reset 버튼을 눌렀을 때, count가 모두 0으로 초기화 되는 버튼을 만들 것이다. 이건 그냥 버튼이고, 재사용할 곳도 없어보이기 때문에 그냥 컴포넌트화 하지않고 바로 habits.jsx에 button으로 만들어 줄 것이다. habits.jsx render() { return ( {this.props.habits.map((habit) => ( ))} Reset All ); } 클릭하면 this.props.onReset으로 만들어 주고, 이것을 또 app.jsx 에서 props로 넘겨주는 작업을 하면 된다. app.jsx handleReset = () => { const habits = this.state.habits.map((habit) => { habit.count = 0; return ha..
