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

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** # 앱 진입점 … 더 읽기

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

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

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