[React] state, 사용자 입력 관리하기, useRef, 리액트 훅

목 차StateState로 사용자 입력 관리하기통합 이벤트 핸들러로 사용자 입력 관리하기useRef리액트 훅리액트 개론 🔷 State현재 가지고 있는 형태나 모양을 정의변화할 수 있는 동적인 값하나의 컴포넌트는 여러개의 State를 가질 수 있음state의 첫항은 지정한 값, 두번째항은 값을 변경할 함수state를 사용하지 않고 직접 js로 지정하고 변경한다면, 값은 변경될 수 있다.그러나 컴포넌트에 리렌더링이 일어나지않아 화면에 반영되지 않는다.왜냐 컴포넌트는 state를 통해서만 리렌더링이 일어나기 때문!이때 아래의 코드에서는 light의 상태가 변할때뿐만 아니라, count의 상태가 변할때도 리렌더링이 된다.이렇게 컴포넌트들은 딱 3가지 상황에서만 리렌더링이 일어난다!자신이 관리하는 state값이..

• format_list_bulleted Study Notes/React
• · 2025. 4. 7.
• textsms

[React] 컴포넌트, JSX, Props, 이벤트 처리하기

목 차React의 기술적인 특징React앱 생성하기컴포넌트JSX란?Props - 컴포넌트에 값 전달하기이벤트 처리하기리액트 개론 ✅React의 기술적인 특징컴포넌트를 기반으로 UI를 표현한다컴포넌트: 우리말로 "구성요소"유지보수 차원에서 굉장히 용이하다.화면 업데이트 구현이 쉽다업데이트: 사용자의 행동(클릭, 드래그)에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용 하는 것선언형 프로그래밍: 목적만 깔끔하게 명시하여 코드가 간결함 = 리액트↔ 명령형 프로그래밍: 모든 과정을 하나하나 다 설명하여 코드가 길고 복잡함 = 자바스크립트화면 업데이트가 빠르게 처리된다브라우저의 렌더링 과정 (Critical Rendering Path)JavaScript가 DOM을 수정하면 업데이트가 발생한다주의! Layout, ..

• format_list_bulleted Study Notes/React
• · 2025. 4. 7.
• textsms

[React] 리액트를 위한 Node.js

목 차Node.js란모듈 시스템 이해하기Node.js 라이브러리 사용하기Node.js 📌 Node.js 란React.js / Next.js / Svelte 등은 모두 Node.js기반으로 작동한다.Node.js는 웹 브라우저가 아닌 환경에서도 JavaScript 를 실행 시켜주는 JavaScript 실행환경(Run Time)이다.패키지: Node.js에서 사용하는 프로그램의 단위   =프로젝트매번 node 파일경로/파일이름.js 로 실행하기는 번거로운 법.간단히 하고 싶다면 package.json파일에 start를 추가하여 npm run start로 시작하면 된다.{  "name": "section03",  "version": "1.0.0",  "description": "실습용",  "main": "..

• format_list_bulleted Study Notes/React
• · 2025. 4. 7.
• textsms

[React ] 리액트를 위한 JS 문법 훑기: falsy값, 구조분해할당, 원시&객체, 배열 메서드, 동기와 비동기

목 차JS 기본JS의 특수한 연산자JS의 함수JS 객체JS 배열JS 심화truthy & falsy구조분해할당spread 연산자 & rest 매개변수원시타입 vs 객체타입 : 얕은복사와 깊은복사반복문으로 배열과 객체 순회하기: for...of / for...in 등배열 메서드1: 요소 조작배열 메서드2: 순회와 탐색배열 메서드3: 배열 변형Date 객체와 날짜동기와 비동기콜백함수promiseasync/await리액트를 학습하기에 앞서, 기본적으로 알아야 할 JS 문법을 빠르게 훑는다. 실습해보기강의를 들으며 실습한 미션과 챌린지를 모아놓은 레포지토리https://github.com/Yeom-Seung-Ah/onebite-react-challenge.git GitHub - Yeom-Seung-Ah/onebi..

• format_list_bulleted Study Notes/React
• · 2025. 4. 7.
• textsms

[JavaScript] 스코프 핵심 정리: 렉시컬스코프, 정적 스코프

스코프(scope, 유효범위)는 모든 프로그래밍 언어의 기본적이며 중요한 개념입니다.특히 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있으므로 반드시 알아둬야 합니다! 1. 스코프란?스코프는 코딩을 하다보면 언제나 경험할 수 있습니다.예를 들어, 함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있고 함수 몸체 외부에서는 참조할 수 없습니다.이것은 매개변수를 참조할 수 있는 유효범위, 즉 매개변수의 스코프가 함수 몸체 내부로 한정되기 때문입니다. 이렇듯이 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됩니다. 이를 스코프라 합니다. ✅ 즉, 스코프는 식별자가 유효한 범위를 말합니다! 이때,..

• format_list_bulleted Study Notes/JavaScript
• · 2025. 3. 6.
• textsms

[JavaScript] 원시 값과 객체의 비교

[JavaScript] 데이터 타입: number, undefined, null 등자바스크립트의 모든 값은 데이터 값을 가지며, ES6은 7개의 데이터 타입을 제공합니다.구분데이터 타입설명원시 타입숫자 타입 number숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재문자kenco.tistory.com 자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, 불리언, null, undefined, 심벌, 객체 타입)은 크게 원시 타입(primitive type)과 객체 타입(object/reference type)으로 구분할 수 있습니다. 데이터 타입을 괜히 이렇게 구분하는 것은 아닙니다.원시 타입과 객체 타입은 크게 세 가지 측면에서 다릅니다. 원시 값은 변경 불가능한 값입니다. 객체 값은 변경 ..

• format_list_bulleted Study Notes/JavaScript
• · 2025. 2. 21.
• textsms