sohyeon kim

💡 로그인/회원가입 시의 input 값 관리, useState VS useRef form 제작에 들어가고 input 의 값을 어떻게 관리할지 고민이 들었다.useState 로 관리하면 리렌더링이 매번 일어나지만, 값을 입력할 때 즉시 유효성 검사가 가능하다.useRef 로 관리하면 값이 변해도 리렌더링이 일어나지 않는다. 우선, 매번 리렌더링이 일어나는 것은 불필요하다 생각해 useRef 로 값을 받아오기로 했다. const idRef = useRef(null); const handleBlur = () => { // 포커스 아웃 시 실행 if (idRef.current && idRef.current.value !== "") { console.log(idRef.current.value)..

💡제어 컴포넌트 useState 와 비제어 컴포넌트 useRef 를 비교해보자!제어 컴포넌트React 에 의해 값이 제어되는 입력 폼 엘리먼트사용자의 입력을 기반으로 state 를 관리하고 업데이트한다.모든 input 이 변경될 때 마다 리렌더링import React, { useState } from 'react';function MyInput() { const [inputValue, setInputValue] = useState(null); const handleChange = (e) => { setInputValue(e.target.value); }; return handleChange(e)} value={inputValue} />;} 비제어 컴포넌트React 에서 값이 제어되지 않는..

💡 특정멤버에게 편지를 작성하고, 멤버 페이지마다 그 멤버의 편지함을 볼 수 있는 사이트 😇 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..

💡 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..

[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..

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 🎀를 바꿔야 한다!!! 💡 이름..