주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 리액트 최적화를 알기 위해서는 렌더링되는 부분을 이해해야한다. class함수는 render부분이 리렌더링되고 함수컴포넌트는 전체가 리렌더링이 된다. import React, { Component } from 'react'; class Test extends Component{ state = { counter : 0 }; onClick = () => { this.setState({}); }; render(){ return ( 클릭 ); } } Test코드에서 버튼을 클릭하면 리렌더링이 될까?? onClick 함수에서 setState하고 ..

강의 유튜브 주소 : 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 ( ); })} );