Babel3 리액트 공부 - 3일차 전에 만들었던 구구단을 webpack으로 빌드할 것이다. 1. npm init 으로 package.json을 만들어 준다. 2. babel-loader , @babel/core 등 필요한 모듈들을 설치해준다. ( npm i -D로 개발용으로 설치 ) 3. webpack.config.js 에 웹팩을 어떻게 빌드할 것인지 작성해준다. 4. 작성했던 js 파일을 jsx 파일로 옮겨준다. ( node module system (require)을 사용 ) 5. npx webpack | npm run 명령어로 빌드 6. index.html 만들어서 실행하기 webpack.config.js 구성요소 간단 정리 1. Entry : 시작하는 파일들 2. Output : 결과가 어떻게 될지 3. Loaders(module.. 2021. 2. 23. 리액트 공부 - 2일차 Class Component VS Hooks Component JSX 에서 HTML 속성 class 는 못쓰고, className 으로 써야함. label의 속성 for은 htmlFor로 써야함. hooks에서 state를 class Component같이 한꺼번에 안쓰는 이유 setState에서 일일이 state 하나하나를 모두 바꿔줘야 해서 hooks에서는 state는 나누어서 작성함. (Javascript 구조 분해 할당 표현식으로 선언) ex) const [val,setVal] = React.useState('초기값'); webpack - 개발 실제로 할 때, 컴포넌트 여러 개 합쳐서 하나의 스크립트 파일로 만들어주는 것 create-react-app 쓰기 전, 세팅을 해보면서 이 세팅을 자동화 해.. 2021. 2. 22. 리액트 공부 - 1일차 소문자로 시작한다 - html 태그 대문자로 시작한다 - Component JS 파일에서 JSX (JS + XML)를 쓰기위해선 babel 을 써야한다 JSX 에서 단일 태그는 항상 닫아 주어야 한다. state - 변할 수 있는 값이나 변하게 될 여지가 있는 값 ( 컴포넌트 ) state 변경 시킬 때는 항상 setState() 메소드 이용 ex) input 태그의 value 값이 state인 경우에 onChange 이벤트를 이용, 리턴 값으로 setState() 메소드를 이용해 변경해 주어야 한다. this.setState({ value: e.target.value})} /> 내가 만든 클래스 메소드는 화살표 함수를 쓰자. 일반 함수를 사용하려면 this.function = this.function... 2021. 2. 19. 이전 1 다음
