ASAC 웹 풀스택

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 두개만 기억 = 자바스크립트 함수 동작 원리 이해도 마찬가지로 두개만 기억함..

자바스크립트 버전: ECMAScript(ES)자바스크립트에도 여타 프로그래밍 언어와 같은 버전이 존재자바스크립트 버전: 자바스크립트도 자바나 다른 언어와 같이 ECMAScript으로 매년 새 표준이 등장자바와 달리 프로그램 실행을 위한 엔진 버전이 유저들이 쓰는 웹 브라우저마다 달라 Transpiler 필요자바스크립트 변수 선언 방법변수 선언은 자바스크립트 버전인 ECMAScript 6 (2015) 이전에는 `var` 하나의 방법으로만 선언 ECMAScript 6 버전 이후로 변수 선언은 `let` 과 `const` 로 선언할 수 있다.`let`: 가변 변수 선언 시`const`: 불변 변수 선언 시var, let, const 비교 정리 재선언재할당스코프`var`oo함수`let`x: 방어o: 가변 변수블..

자바스크립트는 함수형 프로그래밍 패러다임을 추구하며, 추가로 객체지향 프로그래밍 패러다임도 지원 자바스크립트의 핵심은 함수(함수형 프로그래밍 패러다임) 와 객체(객체지향 프로그래밍 패러다임)이다.자바스크립트 개발자가 제대로 개발하기 위해서는 함수형 프로그래밍에 대해 완전히 이해해야한다.물론 자바스크립트 개발자도 객체지향을 완전히 이해해야한다. (우테코 자바스크립트 과제에서 객체지향 강조)일급함수함수를 변수, 파라미터, 반환으로 사용될 수 있다.순수 함수Thread-Safe: No Side Effects ⊂ 참조 투명성순수 함수 특징참조 투명성(Referentially Trannsparent) : 함수가 외부 상태에 의존하지 않는다.같은 파라미터에 같은 반환값부수 효과 없음(No Side-Effects):..