초코딩(chocoding)

1. 저장 공간 State 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화 Ref의 변화 -> No 렌더링 -> 변수들의 값이 유지 State의 변화 -> 렌더링 -> 그래도 Ref의 값은 유지 => 렌더링 시에 변경되지 말아야 할 값을 다룰 때 편리하다. 2. DOM요소에 접근 손쉽게 input에 접근 가능 - useRef의 장점 컴포넌트의 값이 바뀔 때마다 렌더링이 발생된다면 성능적인 측면에서 좋지 않다. 이때 자주 바뀌는 값을 useState()가 아닌 useRef를 통해 받는다면 성능적인 부분에서 더 뛰어나게 구현할 수 있다. Ref와 Var의 값을 올리고 랜더링 했을 때 Var의 값은 초기화되고 Ref의 값은 그대로 유지되는 것을 볼 수 있다. 이유는 아래와 같다. - 변..

마운트 : 컴포넌트가 처음 실행됐을 때 언마운트 : 컴포넌트가 종료될 때 업데이트 : 특정 props의 값이 변할 때 => 첫번째 파라미터에는 콜백함수를, 두번째 파라미터에는 의존값이 들어있는 배열(Dependency Array)를 넣는다. 두번째 파라미터는 생략 가능 1. 랜더링 될 때마다 실행 import { useEffect } from "react"; useEffect (() => { // ... 코드 작성 }); 2. 화면에 첫 랜더링 될 때, value 값이 바뀔 때 실행 import { useEffect } from "react"; useEffect(() => { // ...코드 작성 }, [배열]); 배열(Dependency Array)을 비우면, 컴포넌트가 처음 ..

이벤트리스너란? 이벤트 리스너는 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다. 이벤트 리스너를 이용하면 특정 DOM에 위에 말한 Javascript 이벤트가 발생할 때 특정 함수를 호출한다. 이벤트 리스너 등록하기 => DOM객체.addEventListener(이벤트명, 실행할 함수명) DOCTYPE html> Document function showDiv(change) { document.getElementById("div").innerHTML = change; } 버튼을 누르거라

* function => 긴 코드를 깔끔하게 한 단어로 축약 가능 function myfunc() { } 함수 이름은 함수를 만든 이유를 반영하여 작명! 주의할점! HTML 코드를 변경할 시에 해당 HTML 코드보다 JS코드가 더 앞에 있을 시에 에러가 발생하게 된다. (=> 'innerHTML' of null ....) *parameter => 함수 업그레이드!!! function myfunc(myParameter) { return (1 + myParameter); } 파라미터의 장점은? => 하나의 함수로 다양한 기능을 만들 수 있다. 그러면 코드가 줄어들겠군!!