전체 글78 [리액트] useState useState는 상태를 관리하는 훅이며, state는 useState를 통해 관리되는 실제 데이터다. 리액트 훅 : 클래스 컴포넌트의 기능을 함수 컴포넌트에서도 사용할 수 있도록 만든 메서드다- 이름 앞에 use 접두사가 붙는다.- 함수 컴포넌트 내부에서만 호출할 수 있다.- 조건문이나 반복문에서 호출할 수 없다.- 필요하다면 직접 커스텀 훅을 만들 수 있다.useState리액트에서 상태(state)를 관리하는 데 사용하는 훅(Hook)으로, 함수형 컴포넌트에서 상태를 추가할 수 있게 해준다. 초기 상태 값을 인자로 받으며, 배열을 반환한다.배열의 첫 번째 요소는 현재 상태 값이고, 두 번째 요소는 상태를 업데이트하는 함수다.const [state, setState] = useState(initial.. 2025. 9. 9. [리액트] State state란?state(상태) State는 컴포넌트의 현재 상태를 저장하는 동적인 변수다.컴포넌트의 state가 변경되면 해당 컴포넌트가 자동으로 리렌더링된다.💡 리렌더링( rerendering ) 발생 조건 자신이 관리하는 state의 값이 변경될 때부모로부터 전달받은 props가 변경될 때부모 컴포넌트가 리렌더링될 때 불필요한 리렌더링이 많아지면 성능이 저하되므로, 관련 없는 컴포넌트들은 따로 분리하는 것이 좋다. 리액트에서는 useState() 훅을 사용하여 state를 생성하고 업데이트할 수 있다.💡props와 state의 차이props : 부모 → 자식으로 전달되는 변경 불가능한(Read-only) 데이터 state : 컴포넌트 내부에서 관리하는 변경 가능한 데이터 state의 특징sta.. 2025. 9. 9. [리액트] 합성이벤트(SyntheticEvent) Event이벤트란 웹 페이지 내에서 발생하는 사용자의 모든 행동을 의미한다.클릭, 키보드 입력, 마우스 움직임, 폼 제출 등이 모두 이벤트에 해당한다. Event Handling이벤트 핸들링은 발생한 이벤트를 감지하고 그에 맞는 적절한 동작을 수행하는 과정이다.React에서는 JSX 문법을 통해 이벤트 핸들러를 쉽게 등록할 수 있다. 합성 이벤트(SyntheticEvent)의 특징React는 브라우저의 네이티브 이벤트를 직접 사용하지 않고 합성 이벤트라는 통합된 이벤트 객체를 제공한다.이는 모든 브라우저에서 동일한 API를 사용할 수 있도록 해주는 React만의 특별한 시스템이다. Cross Browser 호환성 해결합성 이벤트는 브라우저별로 다른 이벤트 스펙을 하나로 통일하여 Cross Browsing.. 2025. 9. 9. [리액트] props propsReact에서 props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방식이다.(단반향)형제 컴포넌트끼리는 props를 주고받지 못한다. 구조분해 할당을 사용하여 props를 받아올 수 있으며, 기본값도 설정할 수 있다 컴포넌트 간의 데이터 흐름을 단방향으로 유지할 수 있으며, props는 컴포넌트의 재사용성을 높이는 중요한 역할을 한다. 구조분해 할당배열이나 객체의 값을 개별 변수로 쉽게 추출할 수 있게 해주는 JavaScript ES6 문법이다.React에서 props나 state를 다룰 때 매우 유용하게 사용된다.// 기존 방식const colors = ['red', 'green', 'blue'];const first = colors[0];const second = colors[1.. 2025. 9. 9. [리액트] Component React로 만든 웹 서비스를 React App 또는 React Application이라고 부른다.HTML 태그를 반환하는 함수를 컴포넌트라고 하며, 함수선언식이나 화살표함수로 작성할 수 있다컴포넌트(Component)리액트에서 컴포넌트(Component)는 UI를 구성하는 기본 단위로, 재사용이 가능한 코드 덩어리다.HTML 태그를 반환하는 함수를 컴포넌트라고 하며, 함수선언식이나 화살표함수로 작성할 수 있다 예를 들어, 버튼, 네비게이션 바, 카드 UI 같은 것들이 각각 하나의 컴포넌트가 될 수 있다. 즉, 리액트의 컴포넌트는 결국 "JSX를 반환하는 함수"라고 볼 수 있다.리액트에서는 함수형 컴포넌트와 클래스형 컴포넌트가 있는데,React 16.8 이후로는 함수형 컴포넌트가 주로 사용되며, 클래스형.. 2025. 9. 9. [리액트]JSX 사용 규칙 ! JSX (JavaScript XML) 란?JSX는 JavaScript Extensions로, 자바스크립트를 확장한 문법이다.자바스크립트와 HTML을 혼용할 수 있다.JSX의 기본 규칙JSX 요소는 하나의 부모 요소로 감싸야 한다.중괄호 { } 안에는 자바스크립트 표현식만 넣을 수 있다JSX 내부에서는 if문을 사용할 수 없으며, 삼항 연산자를 사용해야 한다.undefined를 렌더링하지 않도록 주의해야 한다.style 속성은 객체 형태로 전달해야 하며, CSS 속성은 camelCase로 작성해야 한다.HTML의 class 속성 대신 className을 사용해야 한다.1. 감싸인 요소JSX에서 여러 개의 요소를 반환할 경우, 반드시 하나의 부모 요소로 감싸야 한다.Virtual Dom에서 컴포넌트 변화를 .. 2025. 9. 9. React ? 리액트(JS)란?리액트는 컴포넌트를 기반으로 UI를 표현한다.컴포넌트 단위로 모듈화가 가능하며, 각 컴포넌트는 독립적인 state를 가진다.리액트의 가장 큰 장점은 화면 업데이트 구현이 쉽다는 점이다.( 업데이트란 사용자의 행동(클릭, 드래그 등)에 따라 웹페이지가 스스로 모습을 바꾸며 상호작용하는 것을 말한다.)선언형 프로그래밍 방식을 사용해 과정 대신 목적을 간결하게 명시할 수 있다.UI를 더 인터랙티브하게 만들기 위한 JavaScript 라이브러리컴포넌트 기반 개발을 가능하게 해줌가상 DOM(Virtual DOM)을 사용하여 성능을 최적화단방향 데이터 흐름(One-way Data Flow)을 가짐📌 리액트와 바닐라 JS의 차이바닐라 JS - HTML작성 후 JS로 조작리액트 JS - JS가 요소를.. 2025. 9. 9. API API(Application Programming Interface)응용프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스애플리케이션 간의 소통을 위한 약속된 접점 📍인터페이스(interface)인터페이스는 상호간의 소통을 위해 만들어진 접점이나 방법을 의미사람과 사람사람과 사물 : 사람(사용자)이 스마트키(인터페이스)를 통해 자동차(사물)의 문을 여는 것 사물과 사물📍인터페이스의 종류UI (User Interface)정의: 사용자가 시스템과 소통하기 위한 접점예시: 버튼, 메뉴, 터치스크린, 키보드 등관계: 사람 ↔ 컴퓨터API (Application Programming Interface)정의: 응용프로그램에서 소통하기 위한 접점목적: 애플.. 2025. 9. 5. [JS] 로딩 최적화: script 태그 위치와 defer/async script 태그는 어디에 넣어야 할까전통적으로는 태그 직전에 넣는 것이 정석이었지만,HTML5에서 도입된 defer와 async 속성으로 인해 선택의 폭이 넓어졌다.HTML 파싱(Parsing) 과정브라우저는 HTML 문서를 위에서부터 순차적으로 읽어나가면서 DOM 트리를 구성한다.이 과정에서 *구형 브라우저를 지원해야 한다면 여전히 직전 배치가 안전한 선택이다. 장점빠른 초기 렌더링: HTML 요소들이 먼저 화면에 표시된다DOM 준비 완료: 모든 DOM 요소가 생성된 후 스크립트가 실행된다호환성: 모든 브라우저에서 동일하게 작동한다.(구형 브라우저까지)직관적: 이해하기 쉽고 예측 가능하다단점늦은 스크립트 다운로드: HTML 파싱이 완료된 후에야 스크립트 다운로드가 시작된다.전체 로딩 시간 증가:.. 2025. 9. 5. 이전 1 2 3 4 ··· 9 다음
