일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 회고
- 브루트포스
- three.js
- 토이 프로젝트
- 백준
- 자료 구조
- 시뮬레이션
- REACT
- 엔트리포인트
- 해시를 사용한 집합과 맵
- styled-components
- Next.js
- 티스토리챌린지
- 수학
- 세그먼트 트리
- 프론트엔드
- react-three/fiber
- 기본 문법
- HTML5
- 자바스크립트
- 구현
- State
- 모던 자바스크립트 튜토리얼
- 자바
- poiemaweb
- JavaScript
- js
- 코딩일기
- 오블완
- 개발 회고
- Today
- Total
목록State (2)
코딩하는 고릴라

1. state 변경 함수 동작 원리 좌측 처럼 let copy = title로 하면 수정이 이루어지지 않는다. state 변경함수는 사용시 [기존 state] === [신규 state]의 검사를 우선적으로 수행 이 값이 true를 반환하게 된다면, state 변경을 하지 않는다. title[0]의 값을 'newTitle'로 바꾼다 하더라도 위 조건에 true를 반환해 변경이 이루어지지 않는데 이는 변수가 배열의 주소를 저장하고 있기 때문이다. copy와 title이 같은 주소를 가리키고 있으므로 항상 같은 값을 가지게 된다. JS의 spread operator(...)을 이용하면 배열의 괄호를 벗겨주는 느낌의 동작을 하게 된다. ...[1,2,3]은 1, 2, 3이 남게 되고, 오른쪽 코드에서의 [....

1. useState 임포트 import { useState } from 'react' 2. state 선언 - title : state를 사용할 때 쓸 변수명 - setTitle : state의 상태를 바꿀 때 사용 - JS의 destructuring 문법을 활용함 - 위 사진처럼 코드가 짜여져 있을 때, destructuring에 의해 a에 1, b에 3이 저장 3. state를 사용하는 이유 - state에 변동사항이 발생하면 html이 자동으로 재 렌더링해 갱신된 값이 화면에 출력 - 자주 변하는 값을 state에 저장하면 용이함 - vue의 ref() 같은 느낌이 있다. 4. state 변경하는 방법 - destructuring으로 꺼낸 state 변경 함수를 사용 5. 버튼 눌렀을 때 함수를 ..