gaongg님의 개발 블로그

📑이벤트 핸들링 (Event Handling)이벤트가 발생했을 때 그것을 처리하는 것 (ex) 버튼 클릭 시 경고창 노출카멜케이스로 작성된다. (ex) onClick, onChange 📍자주 쓰이는 이벤트 타입📌 Form 이벤트onClick (click event) : Element의 마우스나 키보드가 클릭 된 경우 발생onChange (change event): Element의 내용이 변경된 경우 발생onSubmit (submit event): Form의 데이터가 전송될 때 발생📌 Keyboard 이벤트onKeyDown (keydown event): 키보드 버튼이 눌린 경우 발생 ( 값 입력 전에 발생하고 특수키(ctrl, alt)에만 동작) onKeyUp( ketup event): 키보드 버튼..

📑Props?Props(Property)란 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성상위 컴포넌트가 하위 컴포넌트에 값을 전달하기 때문에 단방향 데이터 흐름을 갖는다.📍Props 타입props의 자료형은 자바스크립트의 자료형을 모두 사용 가능하다.  🔑 문자열 타입 프로퍼티 -프로퍼티 타입이 문자열인 경우, 프로퍼티 값을 표현할 때는 큰 따옴표("")를 사용한다. 🔑 문자열 이외 타입의 프로퍼티 -프로퍼티 타입 이외의 프로퍼티 값은 중괄호{}를 사용한다. { alert('알림창'); }} //함수 /> 📍Props 사용하기1. 상위 컴포넌트에서 Props 지정하여 넘기기아래 코드에서 App 컴포넌트는 Button 컴포넌트를 포함하고 있으며 props 값을 지정해준다."tex..

📑TSX란?TypeScript 와 JSX를 함께 사용하는 파일 형식이다. .tsx 확장자를 사용하며, TypeScript 코드에서 JSX 문법을 사용할 수 있도록 지원한다. React 프로젝트에서 TypeScript를 도입할 때, TypeScript의 타입 검사 기능과 함께 JSX 문법을 활용하기 위해 사용한다.  📍주의사항1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다.자바스크립트 표현식이란 삼항 연산자나 변수의 이름처럼 특정 값으로 평가될 수 있는 코드를 의미한다.중괄호 안에 중괄호를 추가하여 if문이나 for문과 같은 제어문을 작성하면 오류가 발생한다. (if문이나 for문은 한줄로 평가될 수 있는 값이 아니기 때문이다!)const Main = () => { const number..

📑서버 레벨 컴포넌트애플리케이션의 서버 부분에서 렌더링되는 컴포넌트이다.대부분의 컴포넌트가 서버에서 렌더링되고, 작은 인터랙티브 UI 요소만 클라이언트에서 렌더링되는 방식이다.📍특징1. 초기 화면 로드가 빠르다클라이언트에서 요청이 들어오면 서버가 해당 컴포넌트를 렌더링하여 HTML을 생성하는데 이때 서버는 데이터 베이스, 외부 API등에서 데이터를 가져와 컴포넌트와 함께 렌더링하여 이를 완성된 HTML 로 변환하여 브라우저에 전송한다.2. 페이지 로드 시간 단축서버에서 렌더링된 HTML을 직접 제공하므로 클라이언트는 Javascript 번들을 다운로드하고 컴포넌트를 렌더링하는 과정이 생략되며 서버에서 완성된 HTML을 전달받으면 브라우저는 즉시 DOM에 렌더링하여 사용자에게 화면을 보여준다.✅장점1...

📑OriginOrigin은 "출처"를 나타내며 특정 리소스가 소속된 위치를 정의할 때 사용된다.  📍출처를 구성하는 3가지 요소프로토콜(Protocol) -  [https / http]도메인(Hostname) -  [example.com]포트(Port) - (HTTP = 80 / HTTPS = 443)이 3가지가 모두 일치해야 동일한 Origin이 된다. 📑SOP (Same-Origin Policy)사용자의 데이터를 보호하고, 악성 스크립트가 다른 출처의 데이터를 무단으로 조작하는 것을 방지하기 위한 보안 메커니즘으로 동일한 Origin에 속하는 리소스만 서로 접근할 수 있도록 제한한다.Origin의 개념을 기반으로 작동하며 SOP는 요청을 보낼 때 요청하는 리소스의 Origin을 검사하여 해당 O..

📑 중첩라우팅(nested routes)특정 경로에 대해 부모-자식 관계를 설정하여 하위 경로를 부모 경로 내부에 포함히킬 수 있게 해주는 기능부모 컴포넌트가 기본 레이아웃을 렌더링하고, 자식 컴포넌트가 해당 레이아웃의 특정 위치에 표시되는 방식import { BrowserRouter, Routes, Route } from 'react-router-dom';import Dashboard from './Dashboard';import Profile from './Profile';import Settings from './Settings';function App() { return ( }> } /> } /> ..

📍useRefuseRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 컴포넌트의 렌더링과 관련된 사이드 이펙트와 관계 없이 값이 유지한다특정 DOM 요소에 접근이 가능하며 불필요한 재렌더링을 하지 않는다는 장점이 있다. import React, { useRef } from 'react';function MyComponent() { const inputRef = useRef(null); // 초기값으로 null을 설정 const focusInput = () => { inputRef.current.focus(); // input 요소에 포커스를 맞춤 }; return ( Focus Input ..

📑React Hook 이란??리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리다.함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하다.📑Hook의 규칙📍최상위에서만 Hook을 호출해야 한다.호출되는 순서에 의존하기 때문에 조건문이나 반복문 안에서 실행하게 될 경우 해당 부분을 건너뛰는 일이 발생할 수 있어 오류가 발생할 수 있다.📍리액트 함수 내에서만 Hook을 호출해야한다.일반적인 js 함수에서는 호출하면 안되며 함수형 컴포넌트나 커스텀 훅에서는 호출이 가능하다.📑자주 사용하는 Hook 📍useStateuseState는 상태를 관리하는 훅으로 아래와 같은 특징이 있다.함수형 컴포넌트 안에 s..

📑 컴포넌트 분리의 이유1. React에서의 컴포넌트는 다양한 역할을 한다. -UI를 표현 /  동작하는 로직 /  또는 두가지 역할을 모두 담은 컴포넌트를 담을 수 있다.2. 재사용할 수 있는 최소 UI 단위임에도 불구하고, 웹의 복잡도와 해당 컴포넌트에서 수행하려고 하는 역할에 따라 복잡해질 수 있다.3. 따라서 '관심사의 분리' 원칙에 따라 컴포넌트를 분리해서 관리해야 한다. 📍관심사의 분리  - 복잡한 코드를 비슷한 기능을 하는 코드끼리 별도로 관리하는 것  - 프로그램을 구별된 '개개의 관심사를 해결하는 부분'으로 분리하는 디자인의 원칙  - 컴포넌트 별로 관심사를 분리하면 확장성과 재사용성을 높일 수 있다.📑 컴포넌트 분리 기준단일 책임 원칙: 각 컴포넌트는 하나의 명확한 역할을 수행해야..

1. forEach와 map"배열을 이용한다"배열을 순회하고 각 요소에 대한 작업을 수행하는데 사용되는 2가지 메서드 📍forEach배열의 각 요소에 대해 주어진 함수를 실행각 요소에 대해 콜백 함수를 호출 / 해당요소, 인덱스, 배열 자체에 대한 인수를 전달반환값이 없고 반복 작업을 위해 주로 사용됨const array = [1, 2, 3, 4, 5];array.forEach(function(element, index, array) { console.log(element);});//결과값 12345 📍map배열의 각 요소에 대해 주어진 함수를 호출콜백 함수의 반환 값을 포함한 새로운 배열을 생성기존 배열의 요소를 변경하지 않고 새로운 배열을 반환하기 때문에 변형된 배열을 생성하는데 주로 사용됨co..