[React] 함수 바인딩
2022. 3. 21. 19:50
공부/JavaScript
아래는 +버튼을 누르면 값이 1 증가하고, -버튼을 누르면 값이 1 감소하는 코드이다. class Counter extends Component{ constructor(props){ super(props) this.state={ num:0 } } increase(){ this.setState({ num:this.state.num+1 }) } decrease(){ this.setState({ num:this.state.num-1 }) } render(){ return( {this.state.num} + - ) } } export default Counter; 그런데 위와 같이 작성하게 되면 오류가 발생한다. 이유는 함수에 사용한 setState를 찾을 수가 없기 때문인데, 이 때 함수 바인딩을 통해서 함수..
[React] 클래스형 컴포넌트, 함수형 컴포넌트
2022. 3. 18. 21:42
공부/JavaScript
클래스형 컴포넌트 클래스형 컴포넌트 이후에 더 편한 함수형 컴포넌트가 나왔지만, 클래스형은 라이프사이클 사용이 용이하다고 한다. import React, {Component} from 'react'; class App extends Component { //class가 필요하고 component로 상속 받는다. render() { //render 메소드가 필요하다. return ( hello world! ) } } 함수형 컴포넌트 클래스형 이후에 나왔고, 초기 세팅도 함수형으로 되어있다. 클래스형보다 사용하기 편리하고, 초기엔 라이프사이클 사용에 제한이 있었지만 리액트 훅으로 보완이 가능하다고 한다. import React from 'react'; import './App.css'; function Ap..