강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 반복문을 돌릴때 key값을 필수로 입력해줘야한다. 성능최적화의 문제 따라서 key값은 단순히 index값이 아닌 유니크한 값이어야한다. i + 1과 같이 예제로 쓴 것도 좋지않다고한다. 추후에 성능최적화와 관련된 공부를 해야겠다. (수정 없이 추가만 단순히 할 경우 index만 넣어도 된다고한다) return ( {test.map((v, i) => { return ( ); })} );
React 기초 학습 5.클래스를 Hooks로 바꿔보자 (Zerocho님 강의 학습 후기)
강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 전체적은 Example.js의 코드를 하나하나 뜯으면서 Hooks로 변경해보겠다. const React = require('react'); const { Component } = React; class Example extends Component{ state = { value : '' } onSubmit = () => { // ... }; onChange = () => { // ... }; inputEl; onRefInput = (c) => { this.inputEl = c; }; render(){ return( {this.state..
React 기초 학습 4.파일 수정 후 자동으로 빌드되게하자! (Zerocho님 강의 학습 의식의 흐름대로 노트 정리)
강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 여기서 필요한건 react-hot-loader, webpack-dev-server 모듈이다. webpack-dev-server 모듈은 webpack.config.json을 읽어 빌드하고 서버로 유지해주는 역할이라고 한다. 로컬에서 서버를 돌릴 수 있다. react-hot-loader는 실시간으로 변경된 것을 확인할 수 있게 해준다. 모듈 install // cmd npm i -D react-hot-loader npm i -D webpack-dev-server 제로초님 강의에 서버가 공포감을 줄 수 있다고 한다. 나역시도 그랬던 것 같다..
강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 일단 index.html 파일이 필요하다. (webpack.config.js에서 entry에 적었던 파일들을 output으로 출력했을 때, 이 파일을 로드할 index.html!) 프로젝트 루트에 index.html을 생성한다. // react에서 DOM을 생성하여 넣어줄 태그! app.js에서 id값으로 접근하고 있다. // webpack.config.js에서 output에 경로를 작성한 파일 입력 그리고 html에서 처음으로 로드할 app.js 파일이 필요하다. 이 파일은 entry. 프로젝트 루트에 app.js 생성한다. // i..