React (3) 썸네일형 리스트형 3. 컴퍼넌트 분리 App.js 파일로 다른 ・・・・・.js 파일 불러오기 1. "rcc"단축키를 사용할 수 있는 확장프로그램을 설치한다. Extensions에서 Es7+ React/Redux/React-Native snippets 2. "rcc" + Enter 로 import-export 코드를 작성한다. " 'rcc' + 'Enter' "만으로 쉽게 코드를 입력할 수 있다. 3. 불러들일(import할) App.js 파일로 불러오는 코드를 작성한다. import 파일명 from '파일 위치' ; 4. 내보낼(export할) Component.js 파일에 코드를 작성한다. 마찬가지로 " 'rcc' + 'Enter' " 단축키로 쉽게 코드 작성 가능 3. 불러들일(import할) App.js 파일로 불러오는 코드를 작성한다.. 2. React의 JSX 표현식 자바스크립트의 확장 문법으로 자바스크립트의 공식적인 문법은 아니다. 브라우저에서 실행하기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 자바스크립트에서 HTML을 작성하듯이 비슷하게 작성할 수 있도록 해 주는 것이 JSX의 가장 큰 장점이자, 이를 사용하는 이유이다. 1. 리액트를 설치한 후 src 폴더의 App.js 파일을 살펴보면 함수형 컴퍼넌트로 구성되어 있다. App이라는 컴퍼넌트가 생성되어 있으며 function 키워드를 사용하였기에 함수형 컴퍼넌트라 불린다. 코드들이 마치 HTML코드 같지만 다르다. 이것이 JSX 문법이다. React에는 클래스 컴퍼넌트와 함수형 컴퍼넌트로 나뉘는데, 함수형 컴퍼넌트를 권장한다. 2. 하나의 컴퍼넌트에는 반드시 하나.. React install(리액트 설치) window - "win" + "R" --> cmd 화면 오픈 mac os - 터미널 오픈 1. 설치할 파일 경로를 입력한다. ex) "e:"(e드라이브) "d:"(d드라이브) "cd Documents"(문서 파일) 등 등 2. react 폴더를 생성한다. ex) mkdir react("react"라는 이름을 가진 폴더 생성) 3. react 폴더 안으로 이동한다. ex) cd react("react"폴더 안으로 이동) 4. react 폴더 안에 리액트를 설치한다. ex) npx create-react-app my-app("react"폴더 안에 라는 react설치 후"my-app"이름을 가진 폴더 생성) 5. my-app 폴더 안으로 이동한다. ex) cd my-app("my-app"폴더 안으로 이동) .. 이전 1 다음
