목록useState (4)

aotoyae

[React] 내배캠 팬레터 프로젝트(1) : useState 잘 설정하기..

💡 특정멤버에게 편지를 작성하고, 멤버 페이지마다 그 멤버의 편지함을 볼 수 있는 사이트 😇 state 변경이 헷갈려 한참을 헤맨.. function Form({ memberId, letters, setLetters }) { const [nickName, setNickName] = useState(""); const [content, setContent] = useState(""); const [member, setMember] = useState(memberId); useEffect(() => { setMember(memberId); }, [memberId]); // memberId 가 바뀌면 set const addLetter = (e) => { e.preventDefault(); if (!nickN..
Project 2024. 2. 8. 12:41
[React] useState(3) : 함수형 업데이트

💡 useState 의 기존 업데이트와 함수형 업데이트의 차이를 알아보자 💡 기존 업데이트 import "./App.css"; import { useState } from "react"; function App() { const [number, setNumber] = useState(0); return ( Number State : {number} { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }} > + ); } export default App; 기존 업데이트는 온클릭에 setNumber 를 세번 입력해도 숫자가 1 씩 오른다. ➡️ 마지막 setNumber 만 적용된다. (모아서 하나만 실행) 마지막 setNumber ..
React 2024. 1. 24. 16:10
[React] useState(2) : 참조형 데이터 값 리렌더링

[JS] 데이터의 불변성 : 원시 데이터, 참조형 데이터 💡 데이터의 불변성에 대해 알아보자 원시 데이터 : 숫자, 문자, 불리언.. 원시 데이터들은 같은 값을 저장하면 그 값의 같은 주소를 적어둔다. number1 = @111 ➡️ @111 = 1 number2 = @111 ➡️ @111 = 1 참 aotoyae.tistory.com 데이터 불변성 때문에 생기는 문제..! import { useState } from "react"; function App() { const [obj, setObj] = useState({ name: "미나토", age: 20, }); const reName = () => { obj.name = "요리"; setObj(obj); {/*setObj 에 새 값을 할당*/} c..
React 2024. 1. 23. 21:29
[React] useState(1) : 카운트앱, input 값 받아오기

state 잘 쓰는 그날까지.. 🥲 💡 카운트를 세보자 import { useState } from "react"; function App() { const [count, setCount] = useState(0); const countFunction = () => { setCount(count + 1); }; return ( {count} Click ); } export default App; setCount 의 초기값을 0 으로 설정하고, 버튼 클릭 시 count 에 + 1 한 값을 set 해준다. ❗️리액트는 state 가 바뀌어야 화면을 다시 렌더링 한다. count 가 아니라 setCount 를 바꿔야 한다!!! count 아무리 바꿔도 안되고 🎀 setCount 🎀를 바꿔야 한다!!! 💡 이름..
React 2024. 1. 23. 20:28
이전 Prev 1 Next 다음