하얀성의 개발 메타인지

아래와 같은 함수가 있을 때 원하는 명령만을 수행한 뒤, 함수를 종료하기 위함. const handleSubmit = () => { if(state.author.length { if(state.author.length

https://elecch.tistory.com/553 useState와 불변성()[객체의 일부속성만을 업데이트 : ...()를 자주 사용] useState : 자주 바뀌는 데이터에 사용 let [state에 보관했던자료 변수 , state 변경을 도와주는 함수] = useState('') // useState 안에는 [변수, 함수] 상태로 남아 있음. 왜 state를 써야 하는가? ㅡ> 데이터 값 elecch.tistory.com 위의 링크 예시를 보면 스프레드 연산자로 기존 객체값을 들고오고, 극 객체전체의 일부만을 수정하는 방식으로 setState함수가 쓰인다. 아래 코드 또한 state를 통해서 두 state 변수를 한개의 객체로 묶어 준 후에 같이 객체 일부만을 바꿔주는 식으로 사용하고 있다. ..

아래와 같이 코드가 있다고 하자. 그렇다면 useState에 저장된 array는 값이 바뀔 때마다 재랜더링 되니까 array 초기값인 [0,0,0,0....]으로 돌아갈까? const array = new Array(글제목1.length).fill(0) let [good, setGood] = useState(array) return ( { 글제목1.map((x,i) => ( { 글제목1[i] }{ let copy = [...good] copy[i] += 1 setGood(copy)}}>👍{good[i]} 2월 17일 발행 )) } 답은 아니다. 이게 차이나는 부분만 재랜더링 해준다는 가상돔 때문에 계속 새 값이 state에 계속 랜더링 되기 때문이다. 초기값만 0으로 채워진 배열을 참고할뿐, state값..

[...배열명] useState 함수는 새로운 상태로 리로드 해주는 것과 같다. splice : 기존 배열 수정 + 반환값 출력. 반환값: 제거한 요소를 담은 새로운 배열. 하나의 요소만 제거한 경우 길이가 1인 배열을 반환합니다. 아무 값도 제거하지 않았으면 빈 배열을 반환합니다. 제거한 요소를 담을 공간이 없다면 제거만하고 제거한 내용은 출력은 못함. 아래 예시처럼 원본 수정만 원할 경우 변수할당을 하지 않으면 된다. let copy = [...글제목1].splice(0,1,"여자 코트 추천") // 원본 대신 제거한 값만 출력하는 예시 let copy = [...글제목1] ; copy.splice(0,1,"여자 코트 추천") // 바뀐 원본만 출력하는 예시 slice : 기존 배열 수정x + 반환값..

() => 함수명() 문법 사용이유 onClick 같은 이벤트 핸들러에 직접onClick={ setGood(good + 1)} 과 같은 함수 호출을 넣게 되면, 컴포넌트가 렌더링될 때마다 해당 함수가 실행됩니다. 즉, 사용자의 상호작용과 무관하게 함수가 불필요하게 호출되는 문제가 발생합니다. 반면, onClick={ () => {setGood(good + 1)}}와 같이 익명 함수를 사용하면, 실제로 사용자가 클릭했을 때만 함수가 실행됩니다. 이 방식은 실제 사용자의 동작에 의해서만 상태 변경 함수가 호출되게 하여, 불필요한 함수 호출을 방지하고, 의도한 대로 사용자 상호작용에만 반응하게 합니다. 또한, 이 방법을 사용하면 필요한 경우 이벤트 객체나 추가 매개변수를 함수에 전달할 수 있는 유연성도 제공합..

useState : 자주 바뀌는 데이터에 사용 let [state에 보관했던자료 변수 , state 변경을 도와주는 함수] = useState('') // useState 안에는 [변수, 함수] 상태로 남아 있음. 왜 state를 써야 하는가? ㅡ> 데이터 값 변동시 자동으로 html에 반영되게 만들고 싶어서. 원시 타입 (Primitive Types): 숫자, 문자열, 불리언과 같은 원시 타입의 경우, useState를 사용하여 상태를 업데이트하면 새로운 값이 생성됩니다. 원시 타입은 불변성을 가지므로, 값이 변경될 때마다 새로운 값이 생성됩니다. 참조 타입: 참조 타입의 경우 useState를 사용하여 상태를 관리할 때 원본 데이터를 직접 수정하는 것이 아니라, 새로운 데이터 구조를 생성하여 상태를 ..

onChange={}와 onSubmit={}는 HTML 태그에 이벤트 핸들러를 추가하는 React의 방식입니다. 각각 특정 이벤트가 발생할 때 실행되는 JavaScript 함수를 지정하는 역할을 합니다. onChange={}: 이 핸들러는 주로 , 및 태그에서 사용됩니다. 사용자가 입력 필드의 내용을 변경할 때마다 onChange 이벤트가 발생합니다. 이를 통해 사용자 입력을 실시간으로 추적하고, 상태를 업데이트하거나 검증 로직을 실행할 수 있습니다. 예시: 사용자가 텍스트 필드에 입력할 때마다 상태를 업데이트하는 함수를 호출할 수 있습니다. setTextInput(e.target.value)} /> onSubmit={}: 이 핸들러는 주로 태그에서 사용됩니다. 사용자가 폼을 제출할 때, 즉 '제출' 버..

state는 React 컴포넌트에서 상태 관리를 위해 사용되는 특별한 객체이며, setState는 이 객체와 직접적으로 연관되어 있습니다. setState의 동작 방식: State 객체에 접근: setState는 컴포넌트의 현재 state에 접근합니다. 이 메소드는 컴포넌트의 state 속성에 정의된 객체를 대상으로 작동합니다. 상태 변경: setState에 전달된 객체 또는 함수는 현재의 state를 변경합니다. 변경 사항은 기존 state에 병합됩니다. 즉, setState에 제공된 객체의 필드만 업데이트되며, 나머지 부분은 그대로 유지됩니다. 특별한 메소드: setState는 React 클래스 컴포넌트에 내장된 메소드입니다. 이 메소드는 state 객체와 직접적으로 연결되어 있으며, 다른 일반 객체..

React State란? 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체. (State가 변경되면 컴포넌트는 리랜더링된다. 또한 State는 컴포넌트 안에서 관리된다.) react는 가상돔을 통해 차이가 나는 부분만 반영하는 알고리즘을 사용한다. 이 차이나는 부분을 감지하는 법이 props , key, state 등을 이용한 것이라 할 수 있다. 변수로 선언된 데이터는 React 컴포넌트의 상태 관리에 직접적으로 사용되지 않는다.(변수 설명은 아래에) 바로 아래의 코드를 보자. 클래스의 변수로 todoData를 정의 했다. 안에는 데이터가 들어가 있다. 하지만 이 변수 안의 데이터 값에 접근해서 바꾸더라도 컴포넌트가 자동으로 업데이트되지 않는다. handleClick 함수에서 todoDa..

선언형(declaration) 함수를 map() 내부에서 직접 사용하는 것은 일반적으로 권장되지 않습니다. 선언형 함수는 별도의 블록({}) 안에 정의되고 이름을 가지며, 이러한 함수를 map() 같은 고차 함수의 인자로 바로 넣는 것은 문법적으로 부적합할 수 있습니다. 출력 x {}로 감싸면 안됨 {this.todoData.map((data) => { {data.title} x })} 정상 출력 ()로 감싸서 출력 {this.todoData.map((data) => ( {data.title} x ))}