FE 썸네일형 리스트형 04) 컴포넌트 자세히 알기- map() 1. map()함수 1-1) map()함수란 - 배열의 함수로 사용 - 배열의 각 원소에 특정 함수를 적용하고, 그 함수의 반환값들을 다시 배열 형태로 반환 - 반환 값 : 리액트 컴포넌트를 반환 1-2) map()함수 사용하기 방법1 - ILikeThat.map( box => ()) } 분석 * {ILikeThat.map()} : ILikeThat배열의 각 원소를 특정 함수에 적용해서 배열 형식으로 반환하겠다. 배열 형식 반환이므로 {}I * box => () : 배열의 각 원소를 box에 담아서 ()함수에 적용하겠다. * : Friends 컴포넌트를 실행하겠다. name,picture props로 각각 box의 name, image를 사용하겠다. 1-2) map()함수 사용하기 방법 2 - {ILik.. 더보기 03) 리액트 개념 익히기 1. 리액트 앱 실행 복습하기 - npm start의 터미널 명령을 종료하면 리액트 앱 실행이 종료되므로, "localHost에서 연결을 거부했습니다."에러 발생 -> 리액트 공부 시엔 터미널이 종료되지 않도록 유의 2. 컴포넌트 2-1) 컴포넌트 정의하기 2-2) 컴포넌트 사용하기 - 리액트는 을 App.js의 컴포넌트로 인식 - ReactDOM.render() : App() 컴포넌트가 반환하는 것을 id = 'root'인 엘리먼트에서 그려줌 - id가 'root'인 엘리먼트는 index.html에서 정의함 2-3) 정리 1. 리액트는 컴포넌트와 함께 동작 2. 리액트 앱은 모두 컴포넌트로 구성됨 3. JSX 3-1) JSX란? - 컴포넌트 생성 시 사용되는 문법 - 자바 스크립트와 html의 조합 3.. 더보기 02-4) 리액트 동작 원리 알아보기 1. 이전 단원에서 리액트의 역할 App.js, index.js를 받아와서 해석 후, 해석한 결과물을 index.html에 끼워넣음 -> index.html의 사이에 프로젝트 폴더의 해석본(App.js, index.js의 해석본)을 넣는 역할 2. 실습을 통해 이해하기 1) index.js 살펴보기 -App.js파일에 작성한 코드를(), index.html id가 root인 엘리멘트에(getElementById('root')), 넣어줌(ReactDOM.render) 2) index.html 수정해 보기 - index.html의 를 로 변경 후 npm start 실행 시 오류 발생 - 오류를 수정하려면 index.js의 'root'를 'potato'로 변경하면 됨 더보기 02-3) 리액트 앱 살펴보고 수정하기 1. Public 폴더 살펴보기 - favicon.ico : 파비콘, 사이트의 제목에 사용되는 아이콘 - index.html : 기본 내용 (main) 2.Src 폴더 편집하기 - 안쓰는 파일 삭제하기 (App.css, App.test.js, index.css, logo.svg,serviceWorker.js, setupTests.js) - index.js 편집 import React from 'react'; import ReaactDOM from 'react-dom'; import App from './App'; ReactDOM.render ( document.getElementById('root') ); - App.js 파일 편집 import React from 'react'; function App(.. 더보기 02-1) 슈퍼빠른 create-react-app / 02-2) github에 리액트 앱 업로드 02-1. 슈퍼빠른 create-react-app 1. boiler plate - 개발을 바로 시작할 수 있도록 만든 기초환경 - ex.create-react-app : 리액트 개발을 바로 시작할 수 있도록 프로젝트 구조,설정 작업 등을 자동으로 진행해주는 도구 2. create-react-app으로 리액트 환경 설정하기 npx create-react-app movie_app_2021 3. 파일 수정하기(VS Code에서 파일 수정) 1) ReadMe.md # Movie App 2021 React JS Fundamentals Course 2021 2) package.json script 키값 수정 - script key : 일종의 명령어(start, build, test, eject) - test,eje.. 더보기 이전 1 다음
