프로그래밍 언어 | 컴퓨터 관련16 [React, JavaScript] 이벤트 핸들러에서 최신 상태 값 읽기 자바스크립트 그리고 이에 기반한 리액트에서 뷰 컴포넌트(HTML 요소)에 이벤트 핸들러 함수를 추가하면 함수의 실행 루틴뿐 만 아니라 이벤트 핸들러 등록 시점의 상태값까지 한꺼번에 가져온다. 예를 통해 살펴보자. let value = 0; function onClickButtonHandler(){ console.log('onClickButtonHandler().value:', value); value = value + 1; } Button 1 Button 2 위와 같은 코드에서 과 를 차례대로 한 번씩 클릭하면 0, 1의 값이 차례로 디버그 콘솔에 표시되어야 할 것 같은데 실제로는 0, 0의 값이 표시된다. 즉, 글로벌 변수인 value 값이 update되는 것이 아니라 각 버튼에 등록된 이벤트 핸들러가.. 2023. 2. 6. [React] React에서 setInterval 함수 사용하기 이 글의 원문은 아래와 같습니다. 원문의 내용이 길고 영어로 되어있어 정리하여 한글로 옮겼습니다. https://overreacted.io/making-setinterval-declarative-with-react-hooks/ Making setInterval Declarative with React Hooks How I learned to stop worrying and love refs. overreacted.io ● 컴포넌트 렌더링과 setInterval( ) 함수 리액트를 보통 Redux와 함께 사용합니다. 리액트는 렌더링이 일어날 때 마다 effect hook의 내용을 새로 실행(적용)시킵니다. 이와 같은 방식은 렌더링이 새로 일어날 때 마다 새로운 API(예, 이벤트 리스너)를 코드에 다시 적.. 2023. 1. 2. [JavaScript] mutable and immutable object mutable의 사전적인 의미는 '변화 가능한'이다. 프로그래밍 쪽에 있는 사람이라면 mutable, immutable이라는 말을 가끔 듣는다. 이번 기회에 나도 정리해 보려고 한다. 자바스크립트 기준으로 const 키워드로 정의되는 변수들은 immutable, 즉 '변경 불가능한' 변수다. 그리고 let 키워드로 정의되는 변수들이 mutable, 즉 '변경 가능한' 변수들이다. O.K. 어렵지 않다. · immutable: 값의 변경을 허락하지 않는 변수들이다. 예, const 키워드로 선언된 변수들.· mutable: 값의 변경을 허용하는 변수들이다. 예, let 키워드로 선언된 변수들. 이제 이야기를 객체(object)로 조금 확장시켜보자. 아래와 같이 자바스크립트 객체를 const 키워드를 이용해.. 2022. 12. 15. [SQL] SQL PROCEDURE 사용해보기 데이터 사이언티스트, 웹 백엔드 개발자, 마케터 등 데이터를 직접 다루는 일을 하는 경우 SQL을 사용할 일이 많다. 업무를 보다 보면 웬지 언젠가 했었던 작업을 파라미터만 변경해서 하고 있다는 느낌이 올 때가 있다. 예를 들면 아래와 같은 경우를 생각해보자. 1. 계량경제학 교과목을 수강한 수학과 학생들의 이수 학점을 알고 싶다. 2. 데이터마이닝 교과목을 수강한 경영학과 학생들의 이수 학점을 알고 싶다. 3. ... 작업에 필요한 SQL들을 어딘가에 메모해 두었다가 차례로 입력하여 결과를 얻는 것도 방법이 될 수 있다. 하지만 결과를 얻기 위해 테이블을 여러개 참조해야 하는 경우라면 SQL 프로시저Procedure를 한 번 사용해 보자. 작업에 필요한 SQL 명령어 세트를 체계적으로 관리할 수 있고 .. 2022. 5. 29. 이전 1 2 3 4 다음