전체 글301 import & export import 외부 스크립트 또는 외부 모듈의 export된 함수, 객체를 가져오는데 사용됩니다. import는 모든 브라우저에서 기본으로 제공되지 있지 않기 때문에, Traceur Compiler, Babel, Rollup, Webpack과 같은 별도의 트랜스파일러와 함께 사용되어야 합니다. https://beomy.tistory.com/22 1. 문법 import name form "module-name"; import * as name from "module-name"; import { member } from "module-name"; import { member as alias } from "module-name"; import { member1, member2 } from "module-name.. 2020. 9. 2. 리엑트 TIP! 1. 컴포넌트 자동 import하는 방법. 우선 불러오고자 하는 컴포넌트를 부모 컴포넌트 안에서 입력!! 그리고 ctrl + space를 누르면 연결고리 모양이 나온다. 클릭하면 상단에 자동 임포트됨. 2020. 8. 31. 프로젝트 시작 전 환경 세팅(create-react-app) window키 + R : 커맨드창 단축키 1. 프로젝트 폴더 생성 2. 생성된 폴더 상단에 주소창에 "cmd."입력 3. npx create-react-app 프로젝트 폴더명(선택) 4. 깃허브에서 repository생성 5. 생성 후 "git remote add orgin https://github.com/깃허브아이디/reository명.git" 복사 6. VSC에서 프로젝트 폴더를 연다. 새터미널을 열어 붙혀넣기. 7. 필요없는 파일 삭제(App.css / test.js / index.css / logo.svg / serviceWorker.js / setup Text.js) 8. index.js에서 아래와 같이 수정하기. 2020. 8. 31. props & state 1. props와 state는 "객체"이다. ㄴ구조분해 할당 시 const { a, b } = props; 또는 this.state;로 표기할 수 있다. 2020. 8. 31. React Hooks React가 가지고 있는 세가지 문제점. 1. Wrapping Hell 2. 너무 큰 컴포넌트 3. Class / this / bind React Hooks란... - 기존에 class형태로 관리되던 컴포넌트를 function을 통해 만들 수 있게 해주는 API이다. React Hook를 사용하는 이유... - 가독성 useState() = state관리 useEffect() = lifecycle관리 재사용성(함수의 재사용성) React Hook의 장점: 1. useState로 state관리 ① useState를 import하여 직접 함수를 사용. ② state를 변경하거나 선언할때 this와 constructor를 사용하는 것과 다르게 함수 안에 기본값을 넣고 객체를 바로 받 아서 사용할 수 있게 되어.. 2020. 8. 31. 컴포넌트의 종류: functional 특징: 1. class 컴포넌트처럼 this. 를 사용하지 않기 때문에 가독성이 좋다. 2. props, state가 바뀔때 마다 함수 블록안의 코드가 전부 재실행된다. (반면 class 컴포넌트는 render함수만 재실행된다.) 코드블록 안에서 설정한 값 또한 이전 값을 기억하지 못하기 때문에 초기값이 설정된 상태로 실행된다. 하지만 리액트 Hook useState를 사용함으로써 리액트는 이전값을 메모리에 저장해 활용할 수 있게된다. 3. 파라미터 = state에 의존적이다. const SimpleHabit = (props) => { const [ count, setCount ] = useState(0); const handleIncrement = () => { setCount( count + 1 );.. 2020. 8. 28. 이전 1 ··· 44 45 46 47 48 49 50 51 다음
