분류 전체보기346 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. React(6) Component만들기 컴포넌트를 만드는 코드를 배워보자. (강의 후 내가 이해한 component의 기능은 숨겨진 내용이 압축되어 들어있는 사용자정의 태그를 만드는 기능이다. 그래서 사용자정의 태그만 적어놓으면 js파일의 클래스타입으로 저장된 세부내용들이 소환된다.) 1. pure.html이라는 샘플페이지를 만들고 리액트로 똑같은 내용의 index.html를 만들어보자. 2. App.js 파일에서 Component라는 클래스를 상속받는 사용자정의 클래스를 만든다. → 후에 html에서 사용자 정의 태그로 사용됨 - render라는 메소드가 있다. → 원래 클래스 안의 함수는 function이 붙지만 react에서는 붙지않음 - return 안에는 압축된 내용 넣기. 컴포넌트를 만들때는 하나의 최상위 태그만 사용해야 한다. 3.. 2020. 12. 31. React(5) 빌드하기 빌드를 하는 이유 웹페이지를 열때마다 용량이 크다면 성능이 떨어진다. 그래서 빌드를 통해 정리하여 용량을 줄인 버전으로 배포한다. 크롬의 새로고침에서 마우스 우클릭을 해보자. empty cache and hard reload을 선택하면 무겁게 리로드된다. 리액트가 개발의 편의성을 위해 기능을 추가해놨기 때문이다. create-react-app은 파일 자체가 무겁다. 빌드하기 1. Visual Studio 터미널에서 npm run build 하고 엔터를 치면 build라는 디렉터리가 새로 생긴다. 2. 파일디렉토리를 보면 빌드에서도 index.html이 있다. 근데 좀 다르다. 공백등의 불필요한 정보 등을 알아서 지워버려 용량을 줄이긴 버젼이기 때문이다. 3. 서버를 다운받는다. (실제로 서비스할 때는 빌.. 2020. 12. 30. React(4) CSS 코딩하기 - index.html의 스타일을 변경하려면 index.css를 사용한다. - index.css 실행결과 - App.js의 요소들의 스타일을 변경하려면 App.css를 사용한다. App.js안에 들어있는 리액트의 컴포넌트가 로드됬을 때 App.css도 함께 로드된다. - App.css 실행결과 2020. 12. 29. 이전 1 ··· 35 36 37 38 39 다음 반응형
