Rainyjune Blog

Input Tag 활용 Input tag(input, textarea, select, ...) 사용시 tag 내 값을 다루기 위해 event handler를 사용한다. onChange 이벤트를 사용하는 예제는 아래와 같다. let [inputTagValue, setInputTagValue] = useState(''); // inputTagValue state 정의 ... // e : EventArg // e.Target : 이벤트 호출자. 여기에선 input tag // e.Target.Value : 이벤트 호출자의 값. 여기서는 input tag에 기록된 value { setInputTagValue(e.Target.Value); } }/> 이벤트 버블링 위와 같이 HTML이 정의된 경우 span을 cl..

JavaScript에서의 map() Array에서 map method는 array 요소만큼 반복하여 map method 영역에 기술된 callback 함수를 반복한다. map method 예제 let arrTest = [1, 2, 3]; let newValue = 4; // map은 arrTest 내용을 반복탐색하며 callback 함수를 호출한다. // parameter는 2개를 첫 번째 parameter는 arrTest의 값, 두 번째 parameter는 현재 반복문 실행 Index를 나타낸다. arrTest.map( (val, arrIdx) => { console.log(`value:${val}, Index:${arrIdx}`); // value:1, idx:0 // value:2, idx:1 //..

setState state의 내용을 변경하는 함수 변경 시 변경 전 state와 변경될 state를 비교하고, 같으면 동작하지 않는다. Array/Object let [arr, setArr] = [1, 2, 3]; arr은 [1, 2, 3] 배열의 위치를 가리킨다. (c의 포인터처럼) arr의 내용을 바꾸려면? setArr( 변경될 state ) 만약 arr의 첫 번째 값인 1을 5로 바꾸고 싶다면? Array/Object의 값 변경 Array/Object는 값 변경시 원본은 유지하는 것이 좋다. 따라서 변경시 copy본을 만들고 새 state를 구성한다. let copy = arr; copy[0] = 5; setArr(copy); // => 변경되지 않는다. 위와 같이 코드를 작성하면 변경되지 않는다...