𝐠𝐠𝐚𝐨𝐧𝐠.𝐳𝐢𝐩🗂️

React로 프로젝트를 진행하다보면 빠질 수 없는 React Hook❗ 복습도 할 겸 하나씩 정리해보려고 한당ㅎㅎ 1. useState란?컴포넌트의 상태를 간편하게 생성하고 업데이트 해주는 도구를 제공해준다. useState란 "컴포넌트의 상태를 간편하게 생성하고 업데이트 해주는 도구를 제공해주는 것이다.const [state, setState] = useState(초기값);/* 숫자형 */const [state, setState] = useState(0);/* 문자형 */const [state, setState] = useState('');/* Array */const [state, setState] = useState([]);/* object */const [state, setState] = use..

📑이벤트 핸들링 (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): 키보드 버튼..

📑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 ( }> } /> } /> ..

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