전체 글349 React(11) bind()함수 이해하기 함수.bind(this될변수); React에서 바인딩은 컴포넌트 - 이벤트메소드 사이를 연결하는 방법이다 call, apply, bind는 첫번째 매개 변수로 this 값을 명시적으로 지정할 수 있다는 공통점이 있다. bind는 ‘함수를 반환’한다는 독특한 특징이 있다. bind()는 렌더 함수 안에서 컴포넌트인 자기자신 this를 가리킨다. bind()를 사용 후 다시 한번 호출을 해줘야 함수 속 this를 원하는 객체로 지정한 후 값을 얻을 수 있다. var obj = {name:'james'}; // obj 변수정의해주고 function bindTest(){ // bindTest 라는 함수정의 console.log(this.name); } bindTest(); // this가 뭔지 몰라 undefi.. 2021. 1. 4. React(10) 이벤트 만들기 (bind, setState) 오늘할일 - props & state & event 이용해 WEB 링크를 클릭하면 welcome모드가 나오도록 만들기 Subject.js - 타이틀에 링크걸기 **코드보기(복사용 첨부 / 더보기클릭) 더보기 import React, { Component } from 'react'; class Subject extends Component { render() { console.log('Subject render'); return( {this.props.title} {this.props.sub} ); } } export default Subject; App.js - state 추가하기 "state를 바꾸면 js가 다시 실행되며 웹페이지가 리로드된다. 모든 js파일의 render함수가 다 실행됨. 다시 말하면.. 2021. 1. 4. React 실행 오류 out of memory / Render process gone 가끔 코딩하다 무한루프의 굴레에 빠질 때가 있었다. 과거의 나는 현재의 나를 배신하지 않듯 무한루프의 위험성을 간과한 과거의 나는 오늘의 나를 배신하지 않았다. 웹브라우저 실행하자마자 이런 창이 나옴 (이때 Out of Memory에서 힌트를 얻었어야..) 크롬개발자도구 콘솔을 켜보니 그럼그렇지 ... 무한구글링하다 무한루프 가능성을 깨닫고 다시 돌아와 디테일하게 리뷰해봄 세미콜론 포함, i수식 add up 했다. (i를 이제 놓아주자) 2021. 1. 4. React(9) State로 내용구현하기 props가 사용자가 직접 component를 만날수있는 최전방이라면, state는 컴포넌트 내부에서 관리되는 내용이다. (사용자가 알필요도 없고 만날일도 없다.) props와 state를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리해서 양 쪽이 각자의 자리에서 역할을 하게 만드는 것이다. 오늘할일 - App 클래스의 하위 컴포넌트인 와 의 props와 state를 나누어 보자 App.js 1. constructor()를 선언한다. 컴포넌트가 실행될 때 constructor 함수가 제일 먼저 실행되어 state를 미리 기억해놓는다. 2. 뒤이어 바로 render()의 내용을 변경해준다. 요런형식으로 state가 들어갈 구멍을 뚫어놓는다. 하드코딩할때 쓰는 props=" " 대신에 stat.. 2021. 1. 2. React(8) Component파일 분리하기 Component를 파일로 분리해보자. 큰 규모의 프로젝트일 때 수백개의 Component 관리를 쉽게 할 수 있기 때문이다. 1. src에 컴포넌츠를 담을 components 폴더 만들기 & 그안에 각 컴포넌츠 이름으로 js파일 만들기 2. 컴포넌츠 클래스들을 각 파일에 담기 components 폴더의 하위 파일로 만들어 클래스 자체를 넣어놓는다. - 맨위에 선언 → import React, {Component} from 'react'; - 맨아래에 선언 → export default Subject; (Subject 클래스를 외부에서 가져다 쓸 수 있도록 선언해준다.) 3. 상위 컴포넌츠에 import해서 맘껏 사용하기 상위 컴포넌츠인 App.js에서는 import Subject from "./comp.. 2021. 1. 1. React(7) props로 컴포넌트에게 값 전달하기 "아들아 내 데이터를 받아서 잘 쓰거라" 기존 컴포넌트만 사용시 → 구조를 이리저리 많이 건드려야 한다. (보수공사 필요) prop속성을 사용시 → 구조를 최대한 적게 건드리면서도 값을 손쉽게 변경할 수 있다. (효율적임) props은 속성이며 부모에서 → 자식 컴포넌트로 값을 전달할 수 있다. (읽기 전용 ONLY) props 사용법 1. 상위 컴포넌트에서 props를 정의하기 형식으로 HTML의 attribute를 정의하듯이 하위 컴포넌트의 속성처럼 사용하면 된다. 2. 하위 컴포넌트에서 사용하기 하위 컴포넌트에서 {this.props.이름} 을 태그 안에 낑겨넣어 사용하기 (함수형 컴포넌트라면 {props파라미터.이름}으로 사용) 실행화면 웹브라우저 오픈할때는 Visual Studio 터미널에서 n.. 2020. 12. 31. 이전 1 ··· 54 55 56 57 58 59 다음 반응형
