React 기초

1. React Event Listener 이벤트리스너 설명 onClick 마우스 클릭 이벤트를 처리합니다. onChange 인풋 필드나 셀렉트 박스와 같은 폼 요소 값이 변경될 때 발생합니다. onSubmit 폼이 제출될 때 발생합니다. onFocus 요소가 포커스를 받았을 때 발생합니다. onBlur 요소가 포커스를 잃었을 때 발생합니다. onKeyDown 키보드의 키를 누르는 이벤트를 처리합니다. onKeyUp 키보드의 키를 떼는 이벤트를 처리합니다. onScroll 스크롤 이벤트를 … 더 읽기

1. 영상 2. create-react-app으로 리액트 앱 만들기 탐색기를 열고 recipe-app 폴더를 만든다. VScode 를 실행후 recipe-app 폴더를 편집창으로 드래그드랍하여 루트폴더로 연다. VScode 에서 ctrl + J ( command + J )를 눌러 터미널을 실행한다. 아래의 명령어를 터미널에 입력한다명령어는 npm 모듈에 내장되어 있는 보일러플레이트( boilerplate )를 사용하여 리액트앱을 현재 폴더에 설치한다는 내용이다. npx create-react-app . 3. README 수정하기 안에 있는 … 더 읽기

1. 리액트 props 1.1. 데이터의 동적출력 리액트에서 컴포넌트를 생성하는 문법을 JSX(JavaScript XML: Javascript에 XML을 추가한 확장한 문법) 라고 합니다. jsx 에는 {} 기호 안에 자바스크립트 를 작성하면 자바스크립트 코드를 실행할수 있습니다. MemberItem 컴포넌트에서 사용하고 있는 데이터를 자바스크립트의 표현식으로 변경하여 작성해보겠습니다 1.1.1. 작성 components/MemberItem.js 를 수정합니다. //MemberItem.js import "./MemberItem.css"; const MemberItem = () => { const member = … 더 읽기

프롬프트 vite로 현재 폴더에 React 프로젝트를 생성해줘. 상태관리 라이브러리 없이, 타입스크립트도 사용하지 않고, 자바스크립트 기반의 최소 설정으로 시작하고 싶어. figma Plugin 설치 https://www.figma.com/community/plugin/1301565000406306598 피그마 디자인 → devmode → codia 로 코드 생성 오토레이아웃 활용 https://tud2z3bian80o43m9p4fu3.codia.website/

https://junghan92.medium.com/번역-리액트-렌더링의-미래-5b7251bda66d

1. 리액트컴포넌트 1.1. 리액트 앱 구조 1.1.1. 이미지 리소스 주소 수업에 사용할 이미지 파일의 주소 입니다. http://qwerew.cafe24.com/images/pet-1.jpg http://qwerew.cafe24.com/images/pet-2.jpg http://qwerew.cafe24.com/images/pet-3.jpg http://qwerew.cafe24.com/images/pet-4.jpg http://qwerew.cafe24.com/images/pet-5.jpg http://qwerew.cafe24.com/images/pet-6.jpg http://qwerew.cafe24.com/images/pet-7.jpg http://qwerew.cafe24.com/images/pet-8.jpg 1.1.2. 리액트 앱의 폴더 구성 리액트 앱의 폴더와 파일의 구성과 역할을 알아봅시다. react-test/ |-**node_modules**/ # 의존성 파일을 담은 폴더 |- **src**/ |- **App.js** # 최상위 컴포넌트 |- **index.js** # 앱 진입점 … 더 읽기

리액트 공식문서 불필요한 파일 삭제 – src 폴더에서 불필요한 파일들(.sh, .fcss, index.css 등) 삭제 – 이미지 파일들과 관련 에셋 파일들 제거 – 프로젝트 구조를 간소화하여 필수 파일만 남김 오류 메시지 해석 및 해결 방법 – 터미널의 오류 메시지에서 파란색 파일명 확인 (Ctrl+클릭으로 해당 위치로 이동) – 파일이 없는데 불러오려는 import 구문 제거 – 삭제된 이미지 … 더 읽기

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) — … 더 읽기