입문

1. 이벤트 처리 사용자의 행동(클릭, 입력, 마우스 이동 등)에 반응하는 인터랙티브한 웹사이트를 만들기 위해 React의 이벤트 시스템을 깊이 있게 학습한다. 1.1. React 이벤트 시스템 이해하기 1.1.1. 이벤트란? 이벤트(Event)는 사용자가 웹페이지에서 취하는 행동을 의미한다. 버튼 클릭, 키보드 입력, 마우스 이동 등 모든 상호작용이 이벤트다. • → 초인종이 울린다(반응) • → TV 채널이 바뀐다(반응) • → 무언가 … 더 읽기

1. useContext로 전역 상태 관리 1.1. Context가 필요한 이유 리액트에서 데이터는 보통 부모 → 자식 방향으로 Props를 통해 전달한다. 그런데 컴포넌트가 깊게 중첩되어 있으면, 중간에 있는 컴포넌트들이 직접 쓰지도 않는 데이터를 계속 받아서 아래로 넘겨줘야 한다. 이 문제를 Prop Drilling(프롭 드릴링) 이라고 한다. Context를 사용하면 중간 컴포넌트를 거치지 않고, 필요한 컴포넌트가 직접 데이터를 꺼내 쓸 … 더 읽기

1. Inline Style — 태그 안에 직접 쓰기 1.1 개념 HTML에서 style=”color:red” 처럼 태그 안에 스타일을 직접 쓰는 방식이다. 리액트에서는 문자열이 아닌 객체 형태로 작성한다. 왜 객체로 써야 하나요? 리액트는 JavaScript를 기반으로 동작한다. JSX 안에서 스타일을 표현할 때는 JS 문법을 따르기 때문에, background-color 처럼 하이픈(-)이 들어간 속성은 backgroundColor 처럼 카멜케이스 로 바꿔서 써야 한다. 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) — … 더 읽기

React(리액트) 학습 전 필수 JavaScript(자바스크립트) 문법 1. 변수 선언 var 대신 let과 const를 사용합니다. React에서는 주로 const를 사용합니다. // let: 재할당 가능한 변수 let age = 20; age = 21; // 값 변경 가능 console.log(age); // 21 출력 // const: 재할당 불가능한 상수 const name = '철수'; // name = '영희'; // 오류 발생! const는 … 더 읽기

1. JSX 문법과 컴포넌트 React의 핵심인 컴포넌트를 만드는 법과, 이를 위해 사용하는 JSX 문법을 완벽히 익힌다. 1.1. 컴포넌트와 JSX의 관계 1.1.1. 컴포넌트란? 컴포넌트(Component)는 React에서 UI를 만드는 기본 단위다. 레고 블록처럼 작은 부품들을 조립해서 전체 화면을 만든다고 생각하면 된다. 자바스크립트 함수: React 컴포넌트는 그냥 자바스크립트 함수다 UI 반환: 이 함수는 화면에 그릴 내용을 반환한다 재사용 가능: … 더 읽기