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

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 드디어 4에 들어왔다(한참 남았지만^^;) render 의 return 안에서는 for문과 if를 사용하면 안좋다.(못쓰는 건 아니지만 지저분해지기 때문에 안티패터이될수있다) if문을 보통 삼항연산자로 쓰거나 논리연산자로 사용한다. jsx에서는 아무것도 없다가 null이다. render(){ return( { this.satate.result.length === 0 ? null : 조건 } { this.state.result.lengt !== 0 && 조건 } ); 리액트에서는 jsx의 가독성이 중요하기 때문에 함수로 뺄 수 있다. r..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 리액트에서 돔을 컨트롤할때 ref를 사용하여 접근한다. Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다. 리액트는 대체로 돔을 컨트롤 하지 않아야하는데, input에 focus하는 작업등을 위해서 사용할 수 있다. *바람직한 사용 사례는 포커스, 텍스트 선택영역, 미디어 재생을 관리, 애니메이션 직접적 실행, 서드파티 DOM 라이브러리를 React와 사용할때라고한다. jQuery에서는 아래와 같이 작업을 한다. var input = $('.is-input'); input.focus()..

강의 유튜브 주소 : 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( {/* 이렇게 쓴다!! */} );