강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn react는 setState로 state관리를 한다. 불변성을 지켜야하기때문에 아래와 같이 사용했는데 this.setState({ value : this.state.value }); 리액트 로직이 기존 state와 새로운 state를 비교하여 재 렌더링하기 때문에 참조형인 array, object 같은 경우에는 주의해야한다. 이때 배열에 push하게 되면 기존 참조된 배열에 push가 되기 때문에 기존 state와 새로운 state는 같아진다. 따라서 아래와 같이 새로운 배열을 set해줘야한다. this.setState({ array ..
강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 부모컴포넌트에서 props를 getNumber라고 명명해서 넘기면 자식컴포넌트에서 this.props.{명명한 이름} 으로 받으면 된다. // 부모컴포넌트 // Test 컴포넌트 {this.props.getNumber} 간단한 경우 props를 전달해 사용할 수 있지만 복잡해질 경우 관리가 어렵다고 한다. 그래서 사용하는 것이 context나 redux 같은 것들. 앞으로의 강의에서 나오겠지. jsx에서의 주석은 return( {/* 이렇게 쓴다!! */} );
강의 유튜브 주소 : 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..