김도리의 개발자로서 성장기

Hooks 리액트 v16.8에 새로 도입된 기능 useState 함수형 컴포넌트에서도 상태 관리를 할 수 있게 해줌 1. 배열 비구조화 할당 배열 안에 들어있는 값을 쉽게 추출할 수 있도록 해주는 문법 const array = [1, 2]; const one = array[0]; const two = array[1]; 다음 코드는 array 안에 있는 값을 one과 two에 담아주는 코드이다. 이를 배열 비구조화 할당을 사용하면 const array = [1, 2]; const [one, two] = array; 이렇게 표현할 수 있다. 2. useState 사용하기 import { useState } from 'react'; import 구문을 통해 불러오며 아래와 같이 사용한다. const [valu..

useState 동작원리 함수형 컴포넌트에서는 useState를 통해 상태값을 변경할 수 있다. const [state, setState] = useState(초기값); setState라는 함수를 setter로서 사용한다. 여기서 한가지 오해하는 개념은 setState 함수를 호출하면 state라는 변수의 값이 변경된다는 것이다. => 이것은 잘못된 개념이다. state는 const로 선언되어 있으므로 상태값 변경 불가하다. setState로 상태값을 변경하면 useState 함수 밖에 선언되어있는 어느 전역변수인 value 값을 변경해준 것이지 state라는 변수 자체의 상태값을 변경해준 것이 아니다. 여기서 Closure 개념이 사용된다. Closure는 다수의 명령 흐름들을 하나의 Closure로 ..