프로그래밍 공부 노트

React Hooks는 리액트에서 새로 도입된 기능으로 class형 컴포넌트가 아닌 함수형 컴포넌트에서도 상태를 관리할 수 있도록 업데이트 되었다. 뿐만아니라 렌더링 직후 작업을 하는 componentDidMount와 같은 기능을 함수형 컴포넌트에서도 사용할 수 있게 해주었다. 즉 기존에  클래스형 컴포넌트에서만 가능하던  생명주기를 hooks를 이용하여 함수형 컴포넌트에서도 사용할 수 있게 되었다. # useState useState을 사용하여 함수형 컴포넌트에서도 클래스형 컴포넌트처럼 상태를 지닐 수 있게 되었다. import React , { useState } from 'react' const Counter = () => { const [ value , setValue ] = useState ( 0 ); const onPlusHandler = () => { setValue ( value + 1 ); } const onMinusHandler = () => { setValue ( value - 1 ); } return ( < div > < p > 카운터 < b > { value } </ b ></ p > < button onClick = { onPlusHandler } > plus </ button > < button onClick = { onMinusHandler } > minus </ button > </ div > ) } export default Counter useState을 사용하기 위해서는 useState를 import 해야 한다. 그리고 state 역할을 대신하는 다음의 코드를 보자. const [ v

constructor(props){super(props)} 작성이유 React에서  1. 컴포넌트를 생성하거나  2. state 값을 초기화하거나 3.메서드를 바인딩할 때  사용한다. 메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 React 컴포넌트에는 생성자를 구현하지 않아도 된다.  여기에서 super는 부모클래스 생성자를 가르킨다. 리액트에서는 React.Component를 가리킨다. super(props) 선언전까지 constructor내에서는 this를 사용할 수 없다.  1번 사진 기존에는 state값을 초기화 하기위해서 1번 사진과 같이 작성했는데 클래스필드 문법을 지원하면서  2번 사진 2번 사진과 같이 작성할 수 있게되면서 메서드를 바인딩 하는경우가 아니라면 더 이상 constructor(props){super(props)}를 사용하지 않아도 된다. es6에서 화살표함수의 특성 때문에 더 이상 this를 직접 바인딩해주지 않아도 된다. .