반응형 Project23 7 - 리액트 기초 개념: 컴포넌트, JSX 1 - 컴포넌트 1. App.js 파일로 컴포넌트 정의 알아보기 App.js 파일 열고 App()함수와 App()함수가 반환하는 값 보기 App() 함수가 정의된 것이고, Hello를 반환 이 과정이 App컴포넌트 정의라 한다. 2.index.js 파일로 컴포넌트 사용 알아보기 index.js 파일 실행하고 이라는 부분 보기. 을 ReactDOM.render() 함수의 첫 번째 인자로 전달하면 App 컴포넌트가 반환하는 것을 화면에 그릴 수 있다. App 컴포넌트가 그려질 위치는 ReactDOM.render() 함수 두 번째 인자로 전달하면 된다. 함수를 해석해보면 'App 컴포넌트는 아이디가 root인 엘리먼트에 그려질 것이다' root인 엘리먼트는 index.html에 있다. 리액트는 컴포넌트와 함께.. 2020. 12. 8. 6 - 리액트 동작 원리 앞선 코드에서 App.js 에서 쓴 Hello!!! 코드가 어떻게 public 폴더에 있는 index.html에 중간에 나올수 있는가. 1. index.js 살펴보기 * src에 있는 index.js를 열어본다. ReactDOM.render(, document.getElementById('root')); 코드를 해석한다면, 뒤에서 부터 id가 'root'인 엘리먼트에 컴포넌트를 ReactDOM.render에 그린다 라고 보면 된다. *public에 있는 index.html 수정해보기 수정전 코드 수정후 코드 id가 root 이었던걸 potato로 바꾸면 앱이 실행되지 않는다. cmd에서 npm start로 리액트 다시 실행. 인터넷창에 이러한 오류가 뜸. 이유는 src에 있는 index.js 에 Reac.. 2020. 12. 2. 5 - 폴더 정리 및 수정 1. vs코드에서 src폴더 정리 선택된 두 파일 빼고 다 삭제. 위처럼 두개만 남기고 정리. 2. index.js 파일 수정 빨간줄 쳐진것들 삭제하기. 단! 표시한 쉼표는 지우면 안됨. ※코드가 위와 다를수 있지만 상관없이 남길 코드만 남기면 된다. 최종적으로 이렇게 만들어 주면 됨. 4. App.js 파일 수정(1) 빨간줄 전부 삭제. 노란색으로 표시한 세미콜론 지우면 안됨. 코드 1번줄 위에 import React from 'react'; 코드를 빼먹음(있을 경우는 상관없음) 빨간 테두리로 표시한 코드를 넣어줌(이미 있을 경우는 상관없음) 위처럼 정리되면 완료. 5. 리액트 앱 다시 실행 cmd에서 npm start 실행해보면 화면에 아무것도 안나타남. 이유는 App.js 파일에 있는 코드를 삭제했.. 2020. 12. 2. 4. 깃허브에 업로드 1. cmd에서 git init 입력 실행하면 현재 폴더에 저장소(repository)를 새롭게 초기화 함. (Initialized empty Git repository in 경로 또는 Reinitialized existing Git repository in 경로) 두 메시지가 뜨면 성공. 2. GitHub 사이트에서 repository 생성 repository name과 Description 입력하고 public 선택후 create repository 클릭 3. 리액트 앱 업로드하기 cmd에 명령어를 입력해야하는데 손으로 하지말고 깃허브 저장소에 있는 명령어 복붙하기. 해당 명령어를 붙여넣고 다음 명령어들을 적는다. git add . git commit -m "02-2 깃허브에 리액트 앱 업로드하기" .. 2020. 12. 2. 이전 1 2 3 4 5 6 다음 반응형
