본문 바로가기
728x90
반응형

전체 글 보기164

7. Hooks useState 기본 sate 사용 예제 - App.js import Counter from './Counter'; const App = () => { return ; }; export default App; - Counter.js import {useState} from 'react'; const Counter = () =>{ const [value, setValue] = useState(0); return( 현재 카운터 값은 {value} 입니다. setValue(value + 1)}> +1 setValue(value - 1)}> -1 ) } export default Counter; 여러개의 state 사용하기 -App.js import Info from './Info'; const App = ().. 2022. 3. 6.
6. component의 lifecycle method 모든 컴포넌트의 수명은 렌더링 되기 전인 준비 과정 ~ 페이지에서 사라질 때 까지이다. lifecycle method는 class형 컴포넌트에서만 사용할 수 있고 함수형 컴포넌트에서는 hook을 사용한다. lifecycle method 종류 - will 접두사가 붙은 메서드 : 어떤 작업을 작동하기 전에 실행 - did 접두사가 붙은 메서드 : 어떤 작업을 작동한 후에 실행 lifecycle - mount : 페이지에 컴포넌트가 나타남, DOM이 생성되고 웹에 나타난다 constructor : 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드 render : 우리가 준비한 UI를 렌더링 c.. 2022. 3. 6.
5. 반복적으로 Component 사용하기 예제 1 - App.js import { Component } from 'react'; import './App.css'; import IterationSample from './IterationSample'; class App extends Component { render(){ return( ); } } export default App; 아래와 같이 반복되는 배열이 있다고 할 때, map을 사용해서 코드를 배열로 작성할 수 있다. - IterationSample.js const IterationSample = () =>{ return( // 반복적으로 li생성 눈사람 얼음 눈 바람 ) } export default IterationSample; const IterationSample = () =>{.. 2022. 3. 5.
4. ref:DOM에 이름 달기 일반 HTML에서 DOM요소에 이름을 달 때는 id를 사용하는데 리액트 프로젝트 내부에서도 ref를 통해 DOM에 이름을 달 수 있다. 리액트 컴포넌트에서 id를 사용하지 않는 이유는 컴포넌트를 반복적으로 사용하기 때문에 중복 id를 가진 dom이 여러 개 생기는 것을 방지하기 위해서이다. ref는 특히 'DOM을 꼭 직접적으로 건드려야 할 때' 사용해야 한다. 우선 state로 다음 기능을 구현해보자. - App.js import './App.css'; import ValidationSample from './ValidationSample'; function App() { return }; export default App; - ValidationSample.js import React, { Compo.. 2022. 3. 5.
3. 이벤트 핸들링 Event 사용 시 주의사항 - 이름은 카멜 표기법으로 작성한다 ex ) onClick - 이벤트에 실행할 함수 형태의 값을 전달한다 - DOM 요소에만 이벤트를 설정할 수 있다 ( div, button, input, form, span 의 DOM요소에는 이벤트 설정 가능 / 직접 만든 컴포넌트에는 자체 설정 불가능 ) -- MyComponent에 onClick을 설정하면 함수를 실행하는게 아니라, props를 MyComponent에 실행해준다 -- 그래서 전달받은 props를 컴포넌트 내부의 DOM이벤트로 설정한다 -- 이벤트 종류 : Clipboard, Touch, Composition, UI, Keyboard, Wheel, Focus, Media, Form, Image, Mouse, Animatio.. 2022. 3. 5.
2. 컴포넌트 여러 곳에서 한 객체가 반복적으로 사용될 때, component화 한다. Component without Props - App.js import './App.css'; import FirstComponent from './FirstComponent'; function App() { return }; export default App; - FirstComponent.js const FirstComponent = () =>{ return component } export default FirstComponent; 만약 App.js(parent)에서 FirstComponent.js(child)로 변수(props)를 전달한다면 이를 child가 반영하여 parent로 다시 전달해줄 수 있다. Component .. 2022. 3. 4.
1. React 시작하기 일하면서 react.js 를 사용할 기회가 생겼는데 기본적 개념 학습이 필요하다고 생각되어 [리액트를 다루는 기술]과 기타 자료를 통해 학습하고자 한다. - node.js , npm 설치 완료 - vsCode 환경 2022. 3. 4.
11. 가상메모리 가상메모리(virtual memory system) 실제 각 프로세스마다 충분한 메모리를 할당하기에는 메모리 크기가 한계가 있기 때문에 가상 메모리는 여러 프로세스 동시 실행 시스템에서 반드시 필요하다. ex ) 메모리가 4gb라고 할 때 한 프로세스가 한번에 4GB를 전부 사용하지 않기 때문에 일부만 메모리에 올려둔다. 이 때 실제 메모리 주소를 물리 주소라고 하고, 프로세스가 참조하는 주소를 가상 주소라고 한다. 가상주소와 물리주소를 계속 변환하다보니 시간이 오래걸려서 주소를 변환해주는 하드웨어 장치인 MMU(Memory Management Unit)를 사용한다. : cpu -> virtual address -> mmu - physical address -> memory 페이징 시스템 페이징 : 크기.. 2022. 3. 4.
[MongoDB - Python] Python으로 mongoDB에 데이터 쓰고 읽기 1. python에서 mongoDB용 library를 설치한다. python -m pip install pymongo 확인해보기 from pymongo import MongoClient from pymongo.cursor import CursorType host = "localhost" port = "27017" mongo = MongoClient(host, int(port)) print(mongo) 2. python에서 mongoDB CRUD를 위한 Class를 작성한다. class DBHandler: def __init__(self): host = "localhost" port = "27017" self.client = MongoClient(host, int(port)) def insert_item_.. 2022. 2. 15.
[MongoDB] MongoDB 설치하기 1. MongoDB 다운로드 https://www.mongodb.com/try/download/community MongoDB Community Download Download the Community version of MongoDB's non-relational database server from MongoDB's download center. www.mongodb.com 2. 설치 한 뒤 - 설치 시 mongoDB Compass(UI)도 같이 설치하면 편하다(자동 설치됨) 3. cmd 창에서 해당 폴더로 이동 후 data folder 생성 cd C:/Program Files/MongoDB/Server/5.0/bin mkdir C:/data/db mongod 차례로 입력하면 여러가지 설정 및 저장된.. 2022. 2. 15.
728x90
반응형

티스토리툴바