함수형 컴포넌트의 구조와 동작 방식(feat. 클로저) React의 함수형 컴포넌트는 클로저 개념과 깊은 관련이 있습니다. 이 글에서는 클로저가 무엇인지 알아보고, 함수형 컴포넌트에서 클로저가 어떻게 활용되는지 살펴보겠습니다.클로저클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Scope)의 조합이다."선언된 어휘적 환경"이라는 것은, 변수가 코드 내부 어디에서 선언됐는지를 말하는 것호출되는 방식에 따라 동적으로 결정되는 this와 다르게, 코드가 작성된 순간에 정적으로 결정된다.함수가 정의된 시점의 렉시컬 스코프(변수 환경)를 기억하고, 그 범위 안의 변수들에 접근할 수 있는 함수를 의미function add() { const a = 10; //a 변수의 유효 범위는 add 전체 funct..

왜 리액트인가? 리액트는 어떤 환경에서 등장했으며, 왜 많은 개발자들에게 선호하고 사용하는지에 대해 정리해보겠습니다.모던 리액트 딥다이브를 참고하여 내용을 확장하고, 보완하여 작성한 글입니다.리액트의 특징 1: 명시적인 상태 관리리액트는 단방향 바인딩만 지원합니다. 리액트의 상태 변화는 '단방향'으로, 그리고 '명시적'으로 이루어지기 때문에 상태가 변화했다면 그 상태 변화를 명시적으로 일으키는 함수만 찾으면 됩니다.function App() { const [text, setText] = React.useState(""); return ( setText(e.target.value)} // 이벤트를 통해 명시적으로 상태를 변경 /> {text} {/* 모델 데이터가 뷰..

Canvas로 그림 그리기 기능 구현: 이슈와 해결 과정 Canvas를 활용해서 그림 그리는 기능을 구현해 보았습니다. 이 과정에서 발생했던 이슈들을 정리해보고자 합니다. 📍 Canvas란 무엇인가?Canvas는 HTML5의 일부로 도입된 강력한 그래픽 인터페이스입니다. HTML 문서에 태그를 사용하여 그래픽 영역을 만들 수 있으며, 이 영역에서 JavaScript를 사용해 동적으로 그림을 그리거나 애니메이션을 생성할 수 있습니다. Canvas는 래스터 그래픽을 다루기 위한 도구로, 픽셀 단위로 그래픽을 조작하는 데 매우 유용합니다.래스터 그래픽래스터 그래픽은 픽셀, 즉 작은 점들의 집합으로 이루어진 이미지 형식을 말합니다. 각 픽셀은 고유한 색상 정보를 가지고 있으며, 이 픽셀들이 모여 전체 이미지..