전체 글

(리액트를 다루는 기술) 8장 Hooks

Hooks Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공 useState useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줌. App.js; import React from "react"; import Counter from "./Counter"; const App = () => { return ( ); }; export default App; Counter.js; import React, { useState } from "react"; const Counter = () => { const [value, setValue..

(리액트를 다루는 기술) 6장 컴포넌트 반복

컴포넌트 반복 자바스크립트 배열의 map()함수 문법 array.map(callback, [thisArg]) callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 3가지 currentValue : 현재 처리하고 있는 요소 index : 현재 요소의 index 값 array : 현재 처리하고 있는 원본 배열 var numbers=[1,2,3,4,5]; number.map(function(c,i,a){ console.log(c,i,a)}) 1 0 [1, 2, 3, 4, 5] 2 1 [1, 2, 3, 4, 5] 3 2 [1, 2, 3, 4, 5] 4 3 [1, 2, 3, 4, 5] 5 4 [1, 2, 3, 4, 5] 데이터 배열을 컴포넌트 배열로 변환 import React from "react..

(리액트를 다루는 기술) 5장 ref-dom에 이름 달기

5장. ref:DOM에 이름 달기 ref: HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 내부에서 DOM에 이름을 다는 방법 예제 자바스크립에서는 이벤트나 스타일 주려면 id나 class 지정 해야하지만 리액트는 굳이 그렇게 하지 않아도 됨 App.js; import React, { Component } from "react"; import ValidationSample from "./ValidationSample"; class App extends Component { render() { return ; } } export default App; import React, { Component } from "react"; import "./ValidationSample.css"; cla..

(리액트를 다루는 기술) 4장 이벤트 핸들링

Event 사용자가 웹 브라우저에서 DOM요소들과 상호 작용하는 것을 이벤트라고 한다. 리액트의 이벤트 시스템 이벤트를 사용할 때 주의 사항 이벤트 이름은 카멜 표기법으로 작성(HTML의 onclick->리액트에서는 onClick) 리액트에서는 이벤트에 실행할 함수 형태의 객체를 전달 # 렌더링 부분 외부에서 만들어 전달해도 됨 const Say = () => { const [message,setMessage]=useState(''); const onClickEnter=()=>setMessage('안녕하세요') return ( 입장 {message} ); }; # 함수 형태 바로 전달해도 됨 const Say = () => { const [message,setMessage]=..

(리액트를 다루는 기술) 3장 Component

Component UI를 독립적이고 재사용 가능하도록 나눈 조각 props 컴포넌트 속성을 설정할 때 사용하는 요소 props 값은 해당 컴포넌트를 불러와 부모 컴포넌트에서 설정 MyComponent.jsx import React from 'react'; const MyComponent = props => { return ( 안녕하세요, 제 이름은 {props.name} 입니다 ); }; export default MyComponent; App.js import React,{Component} from 'react' import './App.css' import MyComponent from './MyComponent' class App exten..

(리액트를 다루는 기술) 2장 JSX

JSX 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼음 function App() { return ( Hello react ); } export default App; 위처럼 작성된 코드는 아래와 같이 변환 funcion App(){ return React.createElement("div",null, "Hello", React.createElement("b",null,"react)) } 감싸인 요소 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다 ./src/App.js SyntaxError: C:\Users\User\react\hello-react\src\App.js: Unterminated regular expression (6:21) 4 | function App() ..

7. 파이썬 엑셀 파일 읽고 쓰기

파이썬 엑셀 파일 읽고 쓰기 1. 엑셀 파일 읽기 -엑셀 파일 읽기 import openpyxl #data_only=Ture로 해줘야 수식이 아닌 값으로 받아온다. load_wb=openpyxl.load_workbook("C:\Users\nye\PycharmProjects\chatbot\test.xlsx", data_only=True) #시트이름 불러오기 load_ws=load_wb['2020'] #셀 주소로 값 출력 print(load_ws['F4'].value) #셀 좌표로 값 출력 print(load_ws.cell(6,4).value) -지정한 셀 값 출력 print('\n-----지정한 셀 출력-----') get_cells = load_ws['A..

6. 파이썬 예외(python exception)

예외 처리 ##1. 기본 형태 try : ... except [오류 사항 [as 오류 메시지 변수]] : ... finally: ... try 구문 안에 오류 발생 가능성이 있는 코드를 사용 만약 try 구문 안에 들어 있는 코드에서 예외가 발생하면 그 즉시 except 구문으로 코드 흐름이 점프 except 구문에는 예외가 발생했을 때 예외 처리를 할 수 있는 코드가 있다 finally 구문은 try 구문 수행 도중 예외 발생 여부와 상관없이 항상 실행(리소스 해제를 위해 많이 사용) 리소스 해제가 필요 없는 경우에는 finally 구문을 생략할 수 있다 2. 예제 try : a = [1, 2] print(a[3]) 4 / 0 except Exception as e: print(e) finally: p..

5. 파이썬 모듈(python module)

모듈 1. 모듈 : 여러가지 함수나 클래스 등을 기능이나 목적별로 모아놓은 파일 모듈화된 기능은 재사용하기 쉽기 때문에 중복 코드 문제도 해결 모듈의 이름을 보고 해당 모듈의 기능을 유추할 수 있어야 좋은 모듈 예제 calc.py def add(a,b) : return a+b def sub(a,b) : return a-b def mul(a,b) : return a*b def div(a,b) : return a/b* 다른 경로에 있다면 import 할 때 경로를 지정 해줘야 한다(파일명 뒤 .py 붙이면 안된다) >>> import calc >>> calc.add(4,3) 7 >>> calc.sub(10,5) 5 2. 모듈에서 불러올 함수를 직접 지정하는 방법(모듈 이름을 붙이지 않는다) 사용할 모듈 함수..