전체 글

제어 컴포넌트와 비제어 컴포넌트내부 변수 역할을 하는 State & 파라미터 역할을 하는 Props & React 독립적 RefReact Hook 은 함수 컴포넌트를 사용하여 개발하고 함수형 프로그래밍 패러다임을 도입했다.따라서 하나의 컴포넌트를 하나의 함수로 생각한다면, State & Props & Ref 세 가지를 모두 이해하기가 훨씬 쉽다.  1. State: 내부 변수 (제어 컴포넌트)State는 컴포넌트의 내부 상태를 나타내는 변수로, React에서 직접 관리하는 변수이다.State 변경 시 리렌더링 발생: React는 state가 변경될 때 해당 컴포넌트를 다시 렌더링하여 UI를 최신 상태로 유지한다.내부 변수의 의미:State는 컴포넌트 내부에서만 관리되며, 다른 컴포넌트에서는 직접 접근할 ..

React 개발 환경 설정1. Vite를 통한 React 앱 설정과거에는 CRA(Create-React-App)을 사용해 React앱을 생성했으나, 현재는 Deprecated 되었다. React 공식 홈페이지에서 CRA 대신 CNA(Create-Next-App)을 추천하지만, 아직 Next.js 실습단계가 아니기 때문에 Vite로 React 앱을 설정할 예정이다. 1-1. Vite로 프로젝트를 설정하는 명령어npm create vite@latest react-tutorial -- --template react 1-2. Node 버전 관리 및 nvm 설치1. nvm 설치 명령어curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh ..

"컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다.const element = Hello, world!;"위에 희한한 태그 문법은 문자열도, HTML도 아닙니다." React는 라이브러리지만, 프레임워크와 유사하게 다양한 기능을 제공한다. 그 중에서도 JSX 문법, 단방향 데이터 바인딩, Virtual DOM(VDOM), 렌더 사이클이 React의 주요 특징이다. JSX 문법JSX는 JavaScript XML 또는 JavaScript Syntax Extension으로 불린다. JSX는 JavaScript와 XML(또는 HTML)요소를 결합한 문법으로, React에서 컴포넌트를 정의하는 방법이다. 일반적으로 JavaScript 코드 내에서 HTML 요소를 작성하는 방식이기 때문에 마크업과..

웹 프론트엔드 자바스크립트 프레임워크, React자바스크립트의 복잡한 생태계 자바스크립트 그 자체로는 프레임워크가 아닌 언어에 불과하다. 웹 개발의 목적에 따라 수많은 라이브러리와 프레임워크가 등장하게 되었고, 서로 최고라고 주장하는 다양한 기술들이 매번 새롭게 출현하고있다.React.js도 이러한 배경에서 등장한 웹 프론트엔드 라이브러리이다. 특히, React는 프론트엔드 개발에서 매우 중요한 위치를 차지하며, 사실상 Java처럼 프론트엔드 개발에 표준처럼 사용되고 있다. 웹 어플리케이션 구조시작에 앞서 이전에 포스팅한 글을 참고하자. (예전 작성 글이라 가독성이 별로 안좋아서 이 글에서 다시 정리)https://1000sang-dev.tistory.com/13 프론트 웹 개발의 필수 개념: 자바스크립..

"하나의 이벤트가 다수의 DOM 변경" 웹 프론트엔드 개발에서 Rerendering웹 페이지의 렌더링은 사용자가 보는 화면을 바꾸는 작업이다. 사용자가 버튼을 누르거나 페이지를 이동할 때, 웹 페이지의 화면이 어떻게 변경될까 ? 1. Javascript를 통한 HTML(DOM) 직접 조작자바스크립트를 사용하면 HTML의 DOM을 직접 조작하여 페이지의 다양한 요소를 제어할 수 있다.이를 통해 화면에 다양한 변화를 줄 수 있다.자바스크립트는 DOM을 조작하여 화면을 동적으로 변경한다. 화면의 특정 이벤트를 감지하고, 이벤트에 반응하여 페이지의 요소들을 직접 조작할 수 있다. 하지만 Javascript를 통해 직접 DOM을 변경하면 여러 단점들이 있다.HTML(DOM) 요소 하나하나씩 직접 조작을 가해야한다..

JavaScript 비동기 처리자바스크립트 비동기 처리자바스크립트는 싱글 스레드 기반의 언어로, 한 번에 하나의 작업만 처리할 수 있다. 하지만 비동기 처리 방식을 통해 병렬 작업이 가능해 보이게 만들 수 있다. 주로 I/O 작업(네트워크 요청, 파일 읽기 등)이나 타이머와 같은 시간이 오래 걸리는 작업에서 사용된다.  동기적(Synchronous) 처리 : 하나의 작업이 완료될 때까지 다음 작업을 시작하지 않는 방식. 즉 작업이 순차적으로 진행된다. console.log("Start");for (let i = 0; i 위 코드는 `for`루프가 끝날 때 까지 다른 작업이 실행되지 않고 기다린다. 즉, "End"가 출력되기 전까지 모든 작업이 멈춘 상태로 대기하게 된다. CPU를 독점하기 때문에, 긴 작..

필드 + 메서드객체 = 필드 + 메서드 (프로퍼티 집합)자바스크립트에서 객체는 필드(데이터)와 메서드(동작)를 포함한 프로퍼티들의 집합으로 정의된다.HTML (DOM) 객체: 요소(Element = 객체) = 속성(Attribute = 프로퍼티) + Content요소: ``속성: ``메서드 표현법: Default & Shorten자바스크립트에서 객체의 메서드는 두 가지 방식으로 정의할 수 있다. 1.  Default(기본) 표현법var person = { name: "CheonSang", sayName: function() } console.log(this.name); }};`sayName` 메서드는 `function` 키워드를 사용하여 정의된다.2. Shorten(간략) 표현법 (ES..

면접 단골 질문"this"면접 단골 질문 중 하나인 "함수 내 `this`와 메서드 내 `this`의 차이"에 대해 설명하면서 JS에서 `this` 바인딩 방식에 대해 조금 더 깊이 살펴보겠다. 자바스크립트 함수는 크게 일반 함수와 화살표 함수로 나눌 수 있으며, 이 둘은 `this` 바인딩 방식에서 큰 차이가 있다.일반 함수는 함수로도 사용될 수 있고, 메서드로도 사용될 수 있다.일반 함수 표현식 내 `this`: 동적 바인딩 (Dynamic  Scope)일반 함수의 `this`는 함수가 호출될 때의 컨텍스트에 따라 결정된다.즉, 동적 바인딩이 이루어지며 함수가 호출된 객체에 따라 `this`가 달라진다. 함수: 전역에서 호출된 함수 내 `this` → 무지성 window(global)function ..