JayGo 개발 연습장

useState에 대해서useState 구현 내용을 살펴보기 전에, 구현해야 할 훅에 대해 간단하게 정리해 봤다.리액트에는 상태가 변경되면 화면을 리렌더링 해주는 '선언적 UI 방식'이 사용된다. 그리고, 이를 위해 리액트는 자신이 관리해야 할 상태가 어떤 것인지를 알아야 한다.컴포넌트 내부에서 선언된 일반 변수는 리액트가 관리하는 상태로 등록되지 않았기 때문에 리액트가 변화를 추적하지 못하고, 값의 변화에 대한 리렌더링 동작을 처리해주지 못한다. 이런 상황에서 useState가 사용된다. useState는 리액트가 변화를 추적할 상태를 생성할 때 사용된다.import { useState } from 'react'const App = () => { const [count, setCount] = useS..

지난 포스트에서 리액트의 createElement 함수의 동작을 커스텀하게 만들어서 적용하기 위한 기본 환경 설정에 대해 살펴봤다. 간단하게 요약해 보면 다음과 같다.Vite로 프로젝트를 빌드한다(바닐라 타입스크립트 프로젝트).tsconfig.json에 "jsx": "preserve"로 설정해서 타입스크립트 트랜스파일러가 JSX 구문을 트랜스파일링하지 못하게 막는다."jsxFactory"와 "jsxFragmentFactory" 속성에 이후에 JSX 구문 분석 시 사용될 함수를 정의해서 이후에 변환될 값을 기준으로 타입 검사를 수행할 수 있게 설정한다.JSX 구문 분석 함수의 타입을 src/types/jsx.d.ts에 정의해두고, tsconfig.json 파일에 "types": ["./src/types/j..

제어 컴포넌트가 왜 필요할까?'상태가 변경되면 화면(UI)을 업데이트한다'는 것은 리액트의 핵심 컨셉 중 하나다.아래는 간단한 카운터 앱의 예시다. Counter 컴포넌트에 정의된 count가 button 태그의 onClick에 등록된 이벤트 핸들러 콜백 함수 setCount의 동작에 맞게 count를 변경하면 DOM이 리렌더링된다. 당연하게도 상태의 변경도 없고, 부모로부터 전달받은 props의 변경도 없으며, 부모 컴포넌트가 리렌더링 되지 않은 App 컴포넌트는 리렌더링 대상이 아니다. 따라서 App 컴포넌트의 h1 태그는 리렌더링되지 않는다.import { useState } from 'react';import './App.css';function Counter() { const [count, s..

XML이란?JSX는 JavaScript XML(Extensible Markup Language)의 줄임말이다. 그렇다면 XML은 무엇인가?(개발 공부를 하다 보면 항상 이러한 재귀적 물음이 드는 상황이 자주 생기는 것 같다. 아무래도 지식이 아직 많이 모자라서 그런가 보다).XML은 데이터를 저장하고 전달하는 데 있어 확장 가능하고 유연한 문법을 제공하는 마크업 언어이다. 유사한 언어론 HTML이 있는데, HTML은 웹 페이지의 구조와 콘텐츠를 표시한다면, XML은 특정한 데이터를 표현하고 전송하기 위한 형식 언어라는 점에선 차이가 있다. 또한, HTML은 어느 정도 정해진 태그들을 활용해 웹의 구조를 표현한다면, XML은 사용자 정의 태그를 사용할 수 있다는 특징도 있다.아래는 XML을 사용해서 책에 ..

Virtual DOM(가상 돔)이란?Virtual DOM이란 직역한 대로 '가상의 돔'이다. 이러한 정의를 보면 당연하게도 'DOM은 무엇인가?'라는 물음이 따를 것이다.웹 페이지는 하나의 문서다. .docx 확장자 문서를 워드 프로그램이 실행하고, .hwp 확장자 문서를 한글 프로그램이 실행하는 것처럼, .html 또는 .xml 확장자의 문서를 브라우저가 해석하고 화면에 보여준다. 브라우저가 해석하는 문서는 사용자와의 인터랙션에 특화되어 있다는 점과, 서버와의 통신이 가능하다는 점 때문에 일반 문서와 다르게 느껴질 수 있다. 하지만, 사실 모든 웹 페이지의 실체는 문서이다.특별히 브라우저는 HTML 또는 XML로 작성된 문서에 자바스크립트 언어가 접근하여 조작할 수 있도록 객체로 변환(파싱)해주는데, ..