React(3)
-
React 기초 개념
How to view? src의 js파일들을 public의 index.html에 끼워서 출력 React는 최종으로 단 하나의 컴포넌트를 그림 컴포넌트의 이름은 대문자로 시작 여러 컴포넌트를 제작하기 위해선 map()을 이용 map() = 배열의 모든 원소마다 특정작업 함수를 적용하고, 그 결과를 반환 단, 출력값 != 반환값 JSX = JS와 html을 조합한 문법 props= 컴포넌트 간 전달하는 데이터 (재사용성) 문자열 외 데이터는 '{값}' 형식으로 전달 동적 데이터 전달X state= 클래스형 컴포넌트에서 사용가능 동적 데이터 전달O 함수형 컴포넌트 클래스형 컴포넌트 class App extends React.Component { render() } return문이 JSX 반환 render()함..
2020.07.19 -
URL의 html코드를 가져와 출력
function httpGet(theUrl) { var xmlHttp = new XMLHttpRequest(); // 3번째 매개변수: true || false xmlHttp.open("GET", theUrl, false); xmlHttp.send(null); return xmlHttp.responseText; } function App() { const url = "https://developer.mozilla.org/ko/docs/Web/HTTP/CORS"; const gethtml = httpGet(url); console.log(gethtml); return ( {gethtml} ); } Console과 웹페이지에서 html코드를 확인할 수 있다.
2020.07.17 -
React 앱 생성하기
필요한 도구들 Node.js npm (Node Package Manager) npx (최신버전의 NP를 설치하기 위해) 비주얼 스튜디오 코드 (VSCode) 깃 (github) 위 뿐만 아니라 모든 브라우저에서 React언어를 이해하기 위한 컴파일 도구가 필요하다. 그 예로 웹팩, 바벨 등이 있다. 하지만 이런 번거로운 과정을 도와주는 Boiler Plate가 있다. 여기서 Boiler Plate는 개발을 바로 시작할 수 있도록 만든 기초 환경을 말한다. create-react-app가 프로젝트 구조 작업, 설정 작업 등을 자동으로 진행해줄 것이다. 필요한 도구를 모두 설치하였다면, cmd창을 열어서 제대로 설치되었는지 확인한다. $ node -v $ npm -v $ npx -v $ git --versi..
2020.07.16