전체 글

immer: 불변성 객체로 인한 리렌더링 이슈 해결 객체 State 업데이트하기 – ReactThe library for web and native user interfacesko.react.dev 패스워트 컴포넌트 내 useRef 통한 input 태그 타입 변경을 렌더링 없이 적용 한 후 유효성 검증 상태들을 객체로 단일화 하였더니 아래와 같은 문제 발생import { useRef, useState } from 'react'import '@/App.css'function UsernameInput() { return ( Username : )}function PasswordInput() { const [valid, setValid] = useState({ maximum..

Ref: 외부변수 -> 비제어 컴포넌트비제어 컴포넌트: 리액트가 인지하지 못한 변수이기에 Ref 내부 값이 변경 시 리렌더링 X 리액트 리렌더링을 발생시키지 않고 변경 가능한 값을 담는 참조(reference) 생성Ref(외부 변수)를 리액트가 인지할 수 없기에 Ref값의 변동과 리렌더링은 전혀 상관이 없다.라는 의미에서 Ref를 통해 값을 관리하는 컴포넌트를 비제어 컴포넌트라고 부른다.Reference(useRef로 생성한)를 HTML 요소에 연결Reference(useRef로 생성한)는 값을 저장하는 용도로도 사용될 수 있지만 Reference는 기본적으로 리액트에서 DOM 조작을 위해 사용`reference.current` 출력: DOM`document.getElementById` 출력 = DOMf..

React Hook 은 함수 컴포넌트를 사용하여 개발하고 함수형 프로그래밍 패러다임을 도입하였다. 따라서 하나의 컴포넌트를 하나의 함수로 생각한다면, State & Props & Ref 세 가지 모두 이해하기가 훨씬 쉽다. state: 내부 변수 제어 컴포넌트: React 가 인지하고 있는 변수이기에 State 변경 시 리렌더링 일어남내부변수의 의미: 값이 변경되면 컴포넌트 리렌더가 발생함props: 파라미터Ref: 외부 변수 비제어 컴포넌트: React가 인지하지 못한 변수이기에 Ref변경 시 렌더링 X외부 변수의 의미: 값이 변경되어도 컴포넌트 리렌더가 발생하지 않음State: 내부 변수제어 컴포넌트: React 가 인지하고 있는 변수이기에 State 변경 시 리렌더링 일어남State: 단방향 바인딩..

Props: 파라미터값을 부모 컴포넌트가 자식 컴포넌트에게 넘겨줄때 props로 전달자식 컴포넌트에게 넘겨줄 props값 일반적인 예시부모 컴포넌트의 State부모 컴포넌트이 State를 변경할 수 있는 SetState [State Lifting]State Lifting(상태 끌어올리기): 자식 컴포넌트가 부모 컴포넌트의 State를 SetState로 변경 state Liftring을 위해 매번 State, SetState 2개씩 보내주어야할까? SetState 사용법 2가지SetState(새로운 상태값)SetState(새로운 상태값 생성 함수)function ButtonComponent( /* props → object destructure */ { className, onClick, children..

왜 setState에 대한 글만 따로 빼서 설명하게 되었는가평소에 짜던 모든 코드가 동기로 작동해서 비동기로 동작하는 setState의 동작 원리가 이해가 가질 않았다. 공식 문서 + 블로그 를 참고하면서 공부한 내용을 정리해보고자 한다. setState(nextState, callback?)리액트 공식 문서 중 일부setState를 호출해서 React 컴포넌트이 state를 변경한다.setState는 컴포는트 state에 대한 변경 사항을 큐에 넣는다. 이 컴포넌트와 그 자식이 새로운 state로 다시 렌더링해야 한다는 것을 React에게 알려준다. 이것이 상호작용에 반응하여 사용자 인터페이스를 업데이트하는 주요 방법 setState를 사용해서 state를 업데이트해야 사용자와 상호작용할 수 있다는 말..

React Hook의 도입Model-View 그리고 Controllerview(HTML): 화면에 보이는 것, 화면 (렌더링) -> return해서 우리 눈에 보이게 되는 것Model(JS): 브라우저 메모리에 있는 데이터 (데이터) -> stateController(JS): Model(값)을 변경하는 함수 (이벤트(~=데이터) 핸들러) -> `useState()`단방향 바인딩의 의미: 함수형 컴포넌트 그리고 Hook함수형 컴포넌트바인딩 = View와 Model싱크 = "화면에 보이는 것, 화면" 과 "브라우저 메모리에 있는 데이터"를 일치시키는 것React는 과거 클래스 컴포넌트를 기반으로 개발했었으나, 이젠 함수 컴포넌트를 지배적으로 사용단방향 바인딩이라는 특성에 맞춰 Model -> view를 함수..

JSX 문법주석: `{/ /}`XML이기에 명시적으로 닫는 태그 필수: `/>`JSX:(JavaScript Xml, Java Syntax eXtension): JSX는 겉으로만 보면 JS와 XML의 짬뽕HTML or XML + JS + CSS 모두 하나의 .jsx 파일 내 존재import { useState } from 'react'import './App.css'function App() { const [count, setCount] = useState(0) return ( Vite + React setCount((count) => count + 1)}>count is {count} Edit src/App.jsx and save..

✅ 객체 = 필드 + 메서드 (프로퍼티 집합)[HTML에서의 객체]HTML(DOM) 객체 명칭: 요소(Element = 객체) = 속성(Attribute = 프로퍼티) + Content요소: ``속성: ``✅ 객체 내에서 메서드 표현법[1. Default 버전]//1.var person = { name: "Aaron", sayName: function() { console.log(this.name); }};//2.class Person { name = "Aaron"; sayName = function() { console.log(this.name); }}; [2. Shorten 간략 버전]var person = { name: "Aaron", ..

자바스크립트 엔진은 자바스크립트 파일을 실행한다고 생각하지만 사실 함수를 실행하고, 파일은 main함수인격따라서 자바스크립트 엔진의 자바스크립트 파일 구동 방식은 자바스크립트 함수 구동 방식과 동일하다. 이에 자바스크립트 엔진의 자바스크립 함수 구동 방식에 대해 아래 간단히 2개의 Phase로 나누어 진행Creation(Pre-parsing) Phase: 실행에 앞서 어떤 변수와 함수가 정의되어있는지 먼저 분석Execution Phase: 그리고나서야 변수에 값을 할당하고, 함수는 실행✅자바스크립트 엔진 구성: stack + heapJS 엔진 구성 포스팅 글✅ 자바스크립트 엔진 내 함수 동작 원리JS엔진은 Stack + Head 두개만 기억 = 자바스크립트 함수 동작 원리 이해도 마찬가지로 두개만 기억함..