input 을 관리할때 onChange 와 value 를 통해 사용하고 useState 를 통해 관리한다.더 관리하기 좋은 형태는 없을까?무슨 고민이야? 아래 코드는 간단한 todo 리스트의 입력부분이다.import React, { useState } from "react";import "../../styles/index.css";import TodoFormButton from "./buttons/TodoFormButton";const TodoForm = ({ setTodos }) => { const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const addTodoHandler = (e) => { ..

리엑트를 사용하는 이유에는 여러가지가 있다.그중에서 가상 DOM 은 큰 특징이다.DOM 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다.DOM 은 애플리케이션 전체 UI 를 나타내고 트리 구조로 표현된다.여기에는 Web Document 에 있는 각 UI 요소에 대한 노드가 포함된다.웹 개발자가 자바스크립트를 통해 컨텐츠를 수정할 수 있기 때문에 유용하다.또한 구조화된 형식으로 되어 있어 특정 대상을 선택할 수 있고 모든 코드 작업이 쉬워지기 때문에 도움이된다. DOM 의 문제점은? DOM 은 트리 구조로 되어 있어 이해하기 쉽지만, 노드의 수가 많아질 수록 느려지고, DOM 업데이트에 잦은 오류를 발생시킬 수 있다.또 최근 웹은 SPA 를 사용한다. 하나의 웹 페이지를 어플리케이션처..

리엑트의 가장 중요한 특징이라고 하면 불변성일 것이다. 아래의 궁금증을 가지며 글을 작성해본다.리엑트는 왜 불변성을 가질까?불변성을 지켜 어떤 이점을 가져갈 수 있고, 그에 따른 단점이 무엇일까?불변성 불변성은 메모리에 있는 값을 변경할 수 없는 것을 말한다.하지만 우리는 변수의 값을 곧 잘 변경했었다. 편의상 변경이라고는 하지만 내부적으로는 변하지 않는다.변수는 기존 값을 참조하고, 변수의 값을 변경시 새로운 값이 생성되고 변수는 새로 생성된 값을 참조하게 된다. 아무런 참조가 없는 값은 가비지 콜렉터가 처리하게 된다.  원시 데이터(string, number, boolean, null, undefined, Symbol) : 불변성이 있다. 원시 데이터는 수정시, 메모리에 저장된 값..

데이터 바인딩은 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것을 말한다. 즉 사용자 인터페이스와 데이터 모델간의 동기화이다. 이에 두가지 주요 방법이 존재한다. 1. 단방향 데이터 바인딩 단방향 데이터 바인딩에서는 데이터가 한 방향으로만 흐른다. 즉 모델에서 뷰로의 데이터 흐름만 존재하고, 뷰에서 모델로의 직접적인 업데이트는 발생하지 않는다. 사용자 인터페이스는 데이터 모델의 상태를 읽기 전용으로 표시하는데 이는 데이터 모델의 변경이 뷰를 갱신할 수 있지만 뷰의 변경이 직접적으로 모델을 갱신하지 않는다. 대표적인 프레임워크는 React 이다. 쉽게말해 HTML 에 바인딩한 데이터를 JS 에서 수정할 경우 화면에는 반영되지만, 화면에서 직접 해당 엘리먼트의 값을 바꿨을때 JS 의 데..

개발자는 항상 적절하며 근거있는 선택을 해야한다. 프론트의 프레임워크는 크게 Angular, React, Vue 가 있다. 현재 대부분의 학원들은 프론트엔드는 React 로 가르치고 있다. 이 글은 왜 리엑트를 사용해야하는가 에 대한 궁금증으로 작성한다. 각 프레임워크는 구성 요소 기반이고 UI 기능을 빠르게 생성할 수 있다. 그러나 모두 구조와 아키텍처가 다르다. 1. Angular Angular 는 TS 를 기반으로 하는 프레임워크이다. 평소 좋아하는 백엔드 프레임워크인 Nest.js 가 Angular 에 영감을 받아 만들어졌다. 이는 MVC(Model-View-Controller) 프레임워크이다. 각 Angular 애플리케이션에는 적어도 하나의 루트 구성 요소와 하나의 루트 모듈이 존재한다. Ang..