1. useContext로 전역 상태 관리 1.1. Context가 필요한 이유 리액트에서 데이터는 보통 부모 → 자식 방향으로 Props를 통해 전달한다. 그런데 컴포넌트가 깊게 중첩되어 있으면, 중간에 있는 컴포넌트들이 직접 쓰지도 않는 데이터를 계속 받아서 아래로 넘겨줘야 한다. 이 문제를 Prop Drilling(프롭 드릴링) 이라고 한다. Context를 사용하면 중간 컴포넌트를 거치지 않고, 필요한 컴포넌트가 직접 데이터를 꺼내 쓸 … 더 읽기
1. Inline Style(인라인 스타일) — 태그 안에 직접 쓰기 1.1 개념 HTML(에이치티엠엘)에서 style="color:red" 처럼 태그 안에 스타일을 직접 쓰는 방식이다. 리액트에서는 문자열이 아닌 객체(Object, 오브젝트) 형태로 작성한다. 리액트는 JavaScript(자바스크립트)를 기반으로 동작한다. JSX(제이에스엑스) 안에서 스타일을 표현할 때는 JS 문법을 따르기 때문에, `background-color` 처럼 하이픈(`-`)이 들어간 속성은 `backgroundColor` 처럼 카멜케이스(camelCase) 로 바꿔서 써야 한다. 1.2 기본 예제 … 더 읽기
1. Props (속성) 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법. 1.1. Props의 개념 Props는 Properties(속성)의 줄임말로, 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용하는 방법이다. None: 컴포넌트를 함수라고 생각하면, Props는 그 함수에 전달하는 매개변수(파라미터)다. // 일반 자바스크립트 함수 function greet(name) { // name은 매개변수 return 안녕, ${name}!; } greet("철수"); // "철수"는 인자 // React 컴포넌트 … 더 읽기
React Router 공식사이트 1. 라우터 이해 1.1. 라우터란 네트워크에서 데이터를 목적지까지 연결하는 장치다. 리액트에서는 URL 주소에 따라 다른 컴포넌트를 보여주는 역할을 한다. 1.2. 라우팅이란 데이터의 최단·최적 경로를 찾는 과정이다. 1.3. MPA란 MPA(Multi Page Application) — 여러 HTML 페이지를 각각 만들어 연결하는 방식이다. 페이지 이동 시 전체 페이지가 새로 로드된다. 1.4. SPA란 SPA(Single Page Application) — … 더 읽기
1강. React 개발 환경 이해 React 19와 Vite를 기반으로 개발 환경을 구축하고 기본 개념을 이해한다. 1. 웹 개발의 변화와 React SPA (Single Page Application)의 등장 과거의 웹은 페이지를 이동할 때마다 서버로부터 새로운 HTML을 받아오는 MPA(Multi Page Application) 방식이었다. 이는 화면 깜빡임이 발생하고 사용자 경험이 저하되는 단점이 있다. React는 SPA 방식을 채택한다. 하나의 HTML 페이지(index.html)만 로드하고, … 더 읽기
React(리액트) 학습 전 필수 JavaScript(자바스크립트) 문법 1. 변수 선언 var 대신 let과 const를 사용합니다. React에서는 주로 const를 사용합니다. // let: 재할당 가능한 변수 let age = 20; age = 21; // 값 변경 가능 console.log(age); // 21 출력 // const: 재할당 불가능한 상수 const name = '철수'; // name = '영희'; // 오류 발생! const는 … 더 읽기
1. React 소스 코드 수정, 배포 및 렌더링 React 앱이 어떻게 화면에 그려지는지 이해하고, 코드를 직접 수정하며 배포까지 경험한다. 1.1. App 컴포넌트 렌더링 과정 React 앱이 브라우저에 표시되기까지의 흐름을 정확히 이해해야 한다. 흐름은 index.html에서 시작된다. 1.1.1. 1단계: index.html 진입 브라우저는 가장 먼저 index.html을 읽는다. 이 파일에는 <div id="root"></div>라는 텅 빈 공간이 있다. 1.1.2. 2단계: main.jsx … 더 읽기
1. Scaffolding React Project 프로젝트 폴더를 최상위로 연다. 필요 없는 파일 삭제 (이미지에 표시된 파일을 삭제) 코드수정 – 표시된 부분을 삭제 App.tsx 코드 추가수정→표시된 부분 삭제 하고 코드작성 function App() { return <h1>HI</h1>; } export default App; 앱 실행 하기 npm run dev 터미널에 응답이 출력되면서 local 주소가 확인되면 브라우저 주소창에 해당 링크로 이동하여 렌더링 … 더 읽기