전체 글 (76) 썸네일형 리스트형 [TIL] 함수형 업데이트 기존 setState 업데이트 방법 button onClick={() => { setNumber(number + 1); }} 이렇게만 하던걸 함수형으로 업데이트하는 방식을 쓰면 { setNumber((currentNum) => { return currentNum + 1; }) }}> 이 방법은 // 배치 업데이트 setNumber(number + 1); // 함수형 업데이트 setNumber((currentNumber) => currentNumber + 1); 배치형 업데이트는 명령을 모아서 한번만! 실행한다. 함수형은 순차적으로 각각 한번씩 실행한다. 인자부분에 현재의 State를 가져오고, 바뀐 State를 반환한다. 왜 이렇게 만들었는지? 리액트 환경안에서 잦은건 성능에 이슈가 있는것이다. [TIL] useState 컴포넌트에서 동적인 값을 상태(state)라고 부른다. 리액트에는 useState라는 함수가 있는데 이것을 사용하면 컴포넌트에서 상태를 관리할 수 있다. useState를 사용하기 위해 App.js 최상단에 import 해준다.. import { useState } from 'react'; useState 변수 선언 방법 const [state, setState] = useState(초기값); input에 무언가 입력하고 코드를 실행하려면 onChange 아니면 onInput 이벤트 핸들러를 부착하면 된다. 여기서 onChange는 input창에 무언가를 입력할때마다 안에있는 코드를 실행한다. const InputArea = () => { // toDos를 변환시켜주는 setToDos const [toD.. [TIL] React 기본 용어 SPA란? 'Single Page Application' 으로 리액트가 SPA의 형식이다. 페이지가 하나라는 뜻으로 하나의 페이지안에 자바스크립가 필요한 페이지나 정보만 동적으로 그려준다. JSX란? JSX(JavaScript XML)는 JavaScript의 확장 문법으로, React에서 UI를 작성할 때 주로 사용된다. JSX는 HTML과 유사한 구문을 가지고 있어 React 컴포넌트의 가독성을 높이고 작성을 간편하게 한다. JSX에서 중괄호를 사용해 JavaScript 표현식을 삽입할 수 있다. 이를 통해 동적인 값이나 변수를 JSX에 포함시킬 수 있다. const btn = alert('Clicked!')}>Click me; Element(엘리먼트) React 앱의 가장 작은 단위로 React 엘리.. 이전 1 ··· 9 10 11 12 13 14 15 ··· 26 다음