👨💻 FrontEnd/🔵 리액트 [React] 썸네일형 리스트형 React의 setState 업데이트가 꼬일 때, 함수형 업데이트를 써야 하는 이유 React 에서 상태(state) 를 업데이트 할 때 setCounter(count + 1); 로 상태를 업데이트 할 수 있지만, setCounter((current) => current + 1); 처럼 함수형 업데이트를 사용하는 것을 더 권장한다. 왜냐하면 이 방식이 더 상태를 업데이트할 때 안전한 방식이기 때문이다.setCounter(counter + 1); 보다 setCounter((current) => current + 1); 이 더 안전한 이유는 React 의 상태 업데이트 방식 때문이다. 1. 비동기적인 상태 업데이트 React에서 useState의 setState 함수는 비동기적으로 실행된다.즉, 여러 개의 setCounter 호출이 있을 때, 예상과 다르게 이전 값이 덮어 씌워질 가능성이 .. 더보기 [ react ] 로컬스토리지 활용 : 사용자 아이디 기억하기(remember ID) Remember Me 로그인 // 아이디 저장 체크박스 활성화 const handleRememberId = () => { console.log("check 발생"); // 로컬스토리지에 LS_KEY_SAVE_ID_FLAG 라는 키값으로 아이디 기억 버튼의 상태를 저장 // 체크 -> true 언체크 -> false // 기본 값이 false localStorage.setItem(LS_KEY_SAVE_ID_FLAG, !saveIDFlag); // 상태 변경해서 저장 setSaveIDFlag(!saveIDFlag); }; // 컴포넌트가 처음 마운트 될 때만 실행되도록 빈 배열을 두번째 인자로 넘김 useEffect(() => { // 로컬스.. 더보기 [ React ] 공식문서 읽고 틱택톡 예제 따라해보기 📌 이 글은 리액트 공식 문서를 읽으며 이해를 목적으로 작성한 글입니다. 1. 사각형을 클릭하면 사각형 안의 값이 'X'로 변경됨. (useState 사용)- 각 작은사각형들은 각각의 독립적인 상태관리 변수를 갖고 있다. import { useState } from "react";function Square() { const [value, setValue] = useState(null); function handleClick() { setValue("X"); console.log("click!"); } return ( {value} );}export default function Board() { return ( .. 더보기 [React] 리액트 공식문서 보고 useState, component 이해하기 MyButton이라는 컴포넌트를 생성한 뒤 MyApp이라는 곳에서 컴포넌트를 각각 두개 호출해본다. MyButton안에는 버튼을 클릭할 때 마다 카운트가 올라가는 변수가 존재한다. import { useState } from 'react';export default function MyApp(){ // 같은 컴포넌트를 여러번 렌러링해도 각각 고유의 상태를 갖게 된다. 같은 컴포넌트를 사용하지만 다른 값을 가짐. return( Counters that update separately );}// component function MyButton(){ // useState 로 상태 관리 const [count, setCount] = useState(0).. 더보기 이전 1 다음
