無제

🟡 useReducer복잡한 상태를 체계적으로 관리하기 위한 React Hook.useState는 간단한 상태를 관리할 때 사용하며, 여러 상태가 서로 연관되거나 상태 변경 로직이 복잡한 경우에는 useReducer를 사용하는 것이 좋다. ◼️ 필요 이유 useState는 간단한 상태 관리에는 적합하지만 다음과 같은 상황에서는 코드가 복잡해질 수 있다. 1️⃣ 여러 상태가 서로 연관된 경우 여러 개의 상태가 함께 변경되어야 한다면 useState를 여러 번 사용해야 한다.const [title, setTitle] = useState("");const [content, setContent] = useState("");const [author, setAuthor] = useState(""); 상태가 많아..

🟡 Context API 여러 컴포넌트에서 공통으로 사용하는 데이터를 전역으로 공유할 수 있도록 해주는 React의 내장 기능. ◼️ Props Drilling의 문제점기본적으로 React는 부모에서 자식으로 props를 통해 데이터를 전달하지만, 컴포넌트 구조가 깊어질수록 불필요하게 여러 컴포넌트를 거쳐 데이터를 전달해야 하는 문제가 발생한다. 데이터를 사용하지 않는 중간 컴포넌트까지 props를 계속 전달하는 현상을 Props Drilling이라고 한다. Context API는 이러한 Props Drilling 문제를 해결하기 위해 사용된다. (데이터 소유) ↓ Props 전달 (데이터 전달) ↓ Props 전달 (데이터 전달) ↓ Props 전달 (데이터 사용)코드 복잡성 데이터를 전달하..

🟡 Styled ComponentsReact에서 CSS를 JavaScript 파일 안에 작성할 수 있도록 해주는 CSS-in-JS 라이브러리. ◼️ 일반 인라인 스타일과의 차이 1️⃣ 인라인 스타일 const ReactButton = (props) => { const style = { color: "white", backgroundColor: "purple", }; return {props.children};};JavaScript 객체 형태로 스타일을 작성한다.CSS 속성명을 camelCase(backgroundColor)로 작성해야 한다.의사 클래스(:hover)나 미디어 쿼리 등을 사용할 수 없다.스타일이 많아질수록 코드가 복잡해진다. 2️⃣ Styled Components i..

🟡 React Router (react-router-dom) React Router는 React 애플리케이션에서 클라이언트 사이드 라우팅(Client-side Routing)을 구현하기 위한 라이브러리. react-router-dom은 이를 웹 브라우저 환경에서 사용할 수 있도록 제공하는 패키지. ◼️ 주요 특징 1️⃣ URL에 따른 화면 렌더링 (Routing) URL 경로에 따라 서로 다른 React 컴포넌트를 화면에 표시할 수 있다.} />} /> 예를 들어 /about, /products와 같은 경로에 접근하면 설정된 컴포넌트를 렌더링한다. 2️⃣ 동적 URL 처리 (URL Parameters) URL에 값을 포함하여 하나의 컴포넌트로 여러 페이지를 처리할 수 있다. } />/product..

🔎 React에서 map() 함수 사용하기map()은 배열의 각 요소를 순회하며 새로운 배열을 반환하는 JavaScript 배열 메서드. ◼️ 기본 사용법 배열의 각 요소를 하나씩 꺼내 JSX를 반환하면 React가 화면에 렌더링한다. function App() { const names = ["갓대희", "김대희", "한대희"]; return ( {names.map((name) => ( {name} ))} );}중괄호({})를 연다.JSX 안에서 JavaScript 코드를 사용하기 위해 {}를 작성한다.반복할 배열 이름을 작성한다.반복할 데이터가 들어 있는 배열을 선택한다.map() 메서드를 호출한다.배열의 각 요소를 순회하며 JSX를 반환한다.화..

🟡 Hash URL (Fragment Identifier)URL에서 # 뒤에 오는 부분을 해시(Hash) 또는 프래그먼트 식별자(Fragment Identifier, Fragment) 라고 한다. ◼️ 원래 용도 (앵커 이동)Hash는 원래 HTML 문서 내부의 특정 위치로 이동하기 위해 만들어졌다.3장3장으로 이동https://example.com/page.html#chapter3위 URL에 접속하면 브라우저는 id="chapter3"인 요소까지 자동으로 스크롤한다. SPA가 등장하면서 이 기능을 라우팅 용도로 활용하게 된 것이다. ◼️ 주요 특징 1️⃣ 서버에 새로운 페이지를 요청하지 않음 (Client-Side Routing) URL의 해시(#) 부분만 변경되면 브라우저는 서버에 새로운 HTML..

🟡 StateReact 컴포넌트 내부에서 유지 및 변경 가능한 데이터를 관리하는 객체.컴포넌트의 '기억 장치' 역할을 하며, 사용자 상호작용이나 네트워크 응답 등에 따라 동적으로 변하는 값들을 저장한다. ◼️ 주요 특징 변경 시 자동 리렌더링: State 값이 변경되면 React는 해당 컴포넌트를 자동으로 다시 렌더링(Re-rendering)한다. 화면을 실시간으로 업데이트하는 핵심 메커니즘이다.컴포넌트 내부 관리: 외부(부모)로부터 전달받는 Props와 달리, State는 해당 컴포넌트 내부에서 직접 생성하고 관리한다.불변성(Immutability) 유지: State는 직접 수정해서는 안 되며, 반드시 React가 제공하는 상태 변경 함수(Setter)를 통해서만 업데이트해야 한다. ◼️ 구조us..

🟡 Event웹 페이지 내에서 발생하는 사용자의 행동(버튼 클릭, 키보드 입력, 마우스 이동 등)이나 시스템의 변화(페이지 로딩 완료 등)를 의미한다.React는 이러한 이벤트 발생 시 특정 로직을 실행하는 이벤트 핸들러(Event Handler) 함수를 연결하여 사용자와 상호작용한다. ◼️ 주요 특징// HTML 방식Click// React 방식ClickCamelCase 명명 규칙: 표준 HTML의 이벤트 속성은 소문자(onclick, onchange)를 사용하지만, React JSX에서는 카멜 케이스(CamelCase) 문법을 사용하여 onClick, onChange로 작성해야 한다.함수 형태의 값 전달: HTML에서는 이벤트 속성에 문자열 형식(onclick="activate()" 등)으로 코드..

🟡 Propsproperties의 줄임말로, 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달할 때 사용하는 객체이다.컴포넌트 간의 통신을 가능하게 하며, 컴포넌트의 동적 렌더링을 구현하는 기반이 된다. ◼️ 주요 특징단방향 데이터 흐름: 데이터는 반드시 부모에서 자식 방향으로만 흐른다. (하향식 흐름)읽기 전용 (불변성): 자식 컴포넌트는 전달받은 Props를 직접 수정할 수 없으며, 오직 읽기만 가능하다.다양한 데이터 타입 지원: 문자열, 숫자뿐만 아니라 객체, 배열, 함수(이벤트 핸들러 등)까지 모두 전달할 수 있다. ◼️ 컴포넌트 재사용 Props의 가장 큰 목적은 컴포넌트의 재사용성 극대화이다.하나의 고정된 컴포넌트 틀에 부모가 서로 다른 데이터를 주입하여 여러 개의 독립된 UI를 효율적으로 ..

🟡 Component React는 사용자 인터페이스(UI)를 독립적이고 재사용 가능한 단위인 컴포넌트로 나누어 개발하며, 이를 조합하여 하나의 화면을 구성한다. 각 컴포넌트는 자체 UI와 기능을 가지며 다른 컴포넌트와 독립적으로 동작한다. ◼️ 주요 특징UI 구성: 화면의 특정 영역을 담당하여 시각적 요소를 형성한다.재사용성: 동일한 코드를 여러 위치에서 재사용할 수 있어 중복을 줄인다.유지보수성: 기능별로 코드가 분리되어 있어 수정과 관리가 용이하다.독립성: 각 컴포넌트가 독립적으로 작동하므로 변경 사항이 다른 영역에 미치는 영향을 최소화한다. ◼️ 컴포넌트의 종류 🔹 함수형 컴포넌트 (Functional Component)JavaScript 함수로 작성하는 컴포넌트이다. React Hooks를..