React128 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. React(3) 리액트에서 javaScript 사용하기 이미 만들어진 샘플 웹에서 수정하는 식으로 React로 JavaScript내용을 변경해보자 1. Visual Studio에서 React-app폴더를 연다. 2. public-index.html 을 살펴보자. (id="root"인 태그 안에 내용이 들어갈거다.) 3. index.js의 내용을 살펴보자 render()라는 함수의 인자로 과 document.getElementById('root')가 온다. 4. App.js의 내용을 살펴보자 여기서 render()의 정의가 나온다. 실제로 html문서에 들어갈 core가 담겨있음 실행화면 App.js에서 적은 텍스트가 뜬다. 2020. 12. 29. React(2) Visual Studio로 테스트하기 VS로 리액트 앱 테스트 실행 1. VS화면 상단 메뉴에서 view-appearance-show panel 2. npm start run 치고 엔터치면 리액트가 실행된다. (이때 경로확인한다.) 3. 성공적으로 실행되면 웹브라우저가 자동으로 열린다. 리액트가 제대로 돌아가고 있다는 것을 보여준다. 끌 때는 ctrl + c를 누르면 꺼진다. 2020. 12. 29. 이전 1 ··· 11 12 13 14 15 다음 반응형
