본문 바로가기

분류 전체보기333

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.
React 실행오류 - npm ERR! code ENOENT(errno -4058) Updated 21/07/30 문제상황 " npm ERR! code ENOENT(errno -4058) " React를 실행하기 위해 visual studio 터미널창에 npm run start를 입력하니 4058로 시작하는 에러가 나왔다. path를 살펴보니 설치시 지정한 경로와 달랐다. package.json파일이 없다고 한다. 문제해결 1. 다시 install 과정을 되짚어봄 (지난 포스팅참조) 2. instal 로 잘못 입력했네 -_- 일단 install 자체가 잘못되었다. 다시 설치하기 - 원래 react-app 폴더에 프로젝트가 들어가야 한다. cd react-app 으로 현재 path를 react-app 으로 바꿔주자 C:\Users\Saebal ↓ C:\Users\Saebal\react-a.. 2020. 12. 29.
React(1) 개발환경 설치하기(node.js) 리액트를 사용할 준비를 끝내보자. 1. 웹사이트에서 node.js 다운로드하기 nodejs.org/en/ 2. 다운로드 받은 Node.js 설치하기 3. window + r 를 눌러 cmd 창 소환 후 명령어 npm -v 를 입력해 설치된 버전 확인하기 (띄어쓰기 주의) 4. create-react-app 설치하기 cmd에 명령어를 입력한다. (띄어쓰기 신경쓰기) 잘설치되었나 확인해보자. 5. create-react-app을 이용해 디렉터리 설정하기 1) 바탕화면에 react-app이라는 폴더를 하나 만든다. 2) cmd를 켜고 cd 명령어를 사용하여 react-app 디렉토리를 만든다. 이 포스팅은 개발환경 세팅방법 중 직접 다운받아 사용하는 방법이다. 2020. 12. 29.
반응형

티스토리툴바