FE27 React props, 조건부렌더링 21.02.04 1. props props는 propertyies를 뜻한다. JS에서 변수를 넘겨받고싶을 때 사용한다. 1-1. 기본 사용법 App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; Hello.js import React from 'react'; function Hello(props) { return 안녕하세요 {props.name} } export default Hello; 1-2. default props props의 default를 설정할 수 있다. App.js import Hello from "./Hello"; import React f.. 2021. 2. 4. React 시작하기, JSX, JSX기본규칙 21.02.03 1. 환경 설치 Node.js설치, Yarn 설치(선택사항, npm 사용 가능) 터미널로 react폴더를 만들 폴더로 들어가서 'npx create-react-app 생성할react폴더이름' 입력 폴더가 만들어지면 그 폴더로 들어가서 터미널창에 yarn start or npm start 입력 2. 컴포넌트 만들기 리액트에서 컴포넌트는 클래스 또는 함수의 형태로 만들 수 있다. src아래에 파일을 만든다. 리액트 컴포넌트를 만들 때는 import React from 'react';를 꼭 써주어야 한다. 최하단에 export default 함수명or클래스명; 을 써주면 컴포넨트를 내보낼 수 있고 다른 컴포넌트에서 사용할 수 있다. * 리액트에서는 xml형태의 값을 반환할 수 있다. 이것을 J.. 2021. 2. 3. JavaScript onload, fetch, promise (feat.과제) 21.01.29(+21.02.01) 1. onload const domArrayLike = document.getElementsByClassName("root"); const root = domArrayLike[0]; 위의 두 줄의 코드를 작성한 후 root를 alert했을 때 undefined가 나왔다. 이유는 head에 script를 추가했기 때문이다. 문서파일보다 script가 먼저 load되었고, 그 상태에서 DOM에 접근했기 때문에 root가 undefined였던 것이다. 이것을 해결하려면 document.onload 메소드를 써주어야 해결 가능하다. onload 메소드는 DOM트리 분석 후 모든 자원을 다 받고, 렌더링까지 완료된 후에 load하게 한다. 2. fetch() Request나 R.. 2021. 1. 29. JavaScript 유사배열, DOM, instanceof(feat. 과제) 21.01.28(+21.02.01) 1. 유사배열 유사배열의 조건 1) length가 필요해야 한다. 2) 인덱스가 1씩 증가해야 한다. 유사배열의 예 : dom, arguments... 유사배열을 사용하는 이유 1) 함수의 반환값으로 배열을 돌려주고 싶을 떄 2) 배열에 있는 기능을 제공하고 싶지 않거나 없는 기능을 추가하고 싶을 때 유사배열은 진짜 배열과 달리 메소드를 쓸 수 없다. Array.isArray() 메소드로 배열과 유사배열을 구분할 수 있다. call함수, apply함수를 이용하면 일반 배열처럼 메소드를 이용할 수 있다. 또는 Array.from()을 이용해도 된다. (ES6 추가) 2. DOM이란 Document Object Model의 약어이다. 웹 브라우저가 HTML페이지를 인식하는.. 2021. 1. 29. JavaScript 함수, this, 프로토타입, window Object 21.01.25(+21.01.27) 1. 함수 자바 스크립트에서 함수는 일급 객체이다. 생성자로 쓰이는 함수도 객체이다. 객체는 프로퍼티를 가질 수 있다. 일급객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 일반적으로 적용 가능한 연산을 보통 매개변수로 넘기기, 수정하기, 변수에 대입하기, 리턴값으로 넘기기 등이 있다. 일반적으로 해당되지 않는 경우는 배열, 문자열이다. 클로저 : 내부함수가 외부함수의 전역변수를 기억하는 상태 2. this 자기자신의 객체를 가리키는 예약어이다. function func () {} 가 선언되어 있을 때 var a = func() {}; -> this는 window를 가리키고 있으며, a를 출력하면 undefined가 출력된다. var .. 2021. 1. 25. JavaScript 데이터형, 연산자, 배열함수, 객체 2021.01.21 변수 선언 var a; 연산자 사용 == : 동등 연산자. 값이 일치하면 true, 아니면 false === : 일치 연산자. 값과 데이터형이 모두 일치하면 true, 아니면 false. 일치 연산자를 쓰는 것이 강력하게 권고됨 * null과 undefined의 차이점 null : 프로그래머가 의도적으로 값을 넣지 않은 상태. 데이터타입 - null undefined : 프그래머가 의도하지 않았는데 값이 없는 상태. 데이터타입 - undefinded 입출력함수 prompt(''); alert(); false로 간주되는 데이터형 null, NaN, undefined, ''(빈문자열), 값이 할당되지 않은 변수 화면에 문구 띄우기 document.write('coding everybody.. 2021. 1. 21. 이전 1 2 3 4 5 다음
