본문 바로가기
728x90
반응형

분류 전체보기229

[REACT] HOOK - useEffect useEffect 사이드 이펙트를 수행하기 위한 훅 사이드 이펙트는 사전적으로 부작용이라는 뜻으로, 리액트에서 말하는 사이드 이펙트는 그냥 효과 혹은 영향을 뜻한다. 예를 들면, 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 등의 작업을 의미 이런 작업을 이펙트라고 부르는 이유는 이 작업들이 다른 컴포넌트에 영향을 미칠 수 있으며 랜더링 중에는 작업이 완료될 수 없기 때문에 렌더링이 끝난 이후에 실행되어야 하는 작업들 useEffect는 클래스 컴포넌트에서 제공하는 생명주기 함수인 componentDidMount(), componentDidUpdate() 그리고 componentWillUnmount() 와 동일한 기능을 하나로 통합하여 제공한다. 그래서 useEffect() 훅만으로 생명 주기 .. 2022. 12. 23.
[REACT] HOOK - useState useState 가장 대표적이고 많이 사용되는 HOOK state를 사용하기 위한 훅 함수 컴포넌트에서는 기본적으로 state를 제공하지 않기 때문에 클래스 컴포넌트처럼 state를 사용하고 싶다면 useState() 훅을 사용 함 형식 const [변수명, set함수명] = useState(초기값); EX import React, { useState } from 'react'; function Counter(props){ var count = 0; return( 총 {count}번 클릭했습니다. count++}>클릭 ) } export default Counter; Counter 컴포넌트는 버튼을 클릭하면 하나씩 증가 하지만 재랜더링이 일어나지 않아 새로운 카운트 값이 화면에 표시되지 않는다. 이런 경.. 2022. 12. 23.
[REACT] HOOK HOOK이란 컴포넌트에는 클래스 컴포넌트와 함수 컴포넌트가 있다. 클래스 컴포넌트에는 state라는 랜더링에 필요한 데이터를 관리한다. 함수 컴포넌트는 클래스 컴포넌트와는 다르게 코드도 굉장히 간결하지만, 별도로 state를 정의해서 사용하거나 컴포넌트의 생명주기에 맞춰 어떤 코드가 실행되도록 할 수 없다. 따라서 함수 컴포넌트에 이런 기능을 지원하기 위해 나온 것이 HOOK HOOK을 사용하면 함수 컴포넌트도 클래스 컴포넌트의 기능을 모두 동일하게 구현 가능하다. HOOK은 갈고리라는 뜻으로 보통 프로그래밍에서는 원래 존재하는 어떤 기능에 마치 갈고리를 거는 것처럼 끼어 들어가 같이 수행되는 것을 의미 한다. HOOK의 이름은 모두 use로 시작한다. HOOK의 종류 useState 가장 대표적이고 많.. 2022. 12. 23.
[REACT] JSX JSX란? JavaScript를 확장한 문법으로 XML/HTML을 합친 것이다. JSX의 X는 extension의 X를 의미함 예) const element = Hello, World! JSX의 역할 JSX는 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거치게 됨. 그렇기 때문에 실제로 JSX로 코드를 작성해도 최종적으로는 자바스크립트 코드가나오게 됨 JSX 코드를 자바스크립트 코드로 변환하는 역할을 하는 것이 바로 리액트의 createElement() 라는 함수. JSX의 장점 코드가 간결하고 가독성이 향상됨 Ex JSX를 사용했을 때 import React from "react"; function Book(props){ return( {`이 책의 이름은 ${props.name}입니.. 2022. 12. 21.
[JavaScript] function 선언적 함수 function 함수명 () { } const 함수명 = function () { } 2022. 12. 20.
[JavaScript] array 배열 배열선언 const array = [273, 'String', true, function () { }, {}, [273, 103]] 이런식으로 [] 안에 선언 push push하면 맨 뒷부분에 추가 된다. 배열.push(요소) 인덱스를 지정해서 삽입하기 비어있는 값은 empty로 출력된다. splice 배열.splice(인덱스, 제거할 요소의 개수) indexOf 요소의 위치값 확인 const itemsB = ['사과', '배', '바나나'] const index = itemsB.indexOf('바나나') index itemsB.splice(index, 1) itemsB itemsB.indexOf('바나나') 바나나는 배열에 없으므로 -1을 출력한다. ◦배열의 특정 위치에 요소 추가 배열.splice(인.. 2022. 12. 20.
[Python] 사전 cabinet = {3:"유재석", 100:"조세호"} #이런식으로 해당키의 값을 가져올 수 있다. print(cabinet[3]) print(cabinet[100]) #이렇게도 가져올 수 있다. print(cabinet.get(3)) #키가 있을 시 해당 값을 출력, 없으면 설정 문구를 출력함 print(cabinet.get(5, "없으면 이 글을 출력")) #get()과 []의 차이는 무엇일까 #get()은 없는 키 선택시 None출력 print(cabinet.get(5)) #[]는 에러 print(cabinet[5]) 값 존재유무 확인 print(3 in cabinet) print(5 in cabinet) 추가, 삭제 cabinet = {"A-10":"유재석", "B-10":"조세호"} print(.. 2022. 12. 18.
[Python] 리스트 리스트 삽입과 삭제 #리스트 subway = ["유재석", "조세호", "박명수"] print(subway) #리스트에서의 순서 print(subway.index("조세호")) #리스트에 추가 subway.append("하하") print(subway) #원하는 위치에 추가 subway.insert(1, "정형돈") print(subway) #리스트 삭제(맨 뒷 열부터 삭제됨) subway.pop() print(subway) 리스트의 정렬과 삭제 #리스트 정렬 numlist = [3,7,5,8,6,9,1] numlist.sort() print(numlist) #순서 뒤집기 numlist.reverse() print(numlist) #리스트 삭제 numlist.clear() print(numlist) 리스.. 2022. 12. 18.
[Python] 문자열 포맷 파이썬에서 문자열끼리 연결하는 방법에는 여러가지가 있다. EX01. + 와 , print("사과" + "딸기" + "레몬") print("사과", "딸기", "레몬") ,는 공간이 자동으로 띄워서 더해진다. EX02. % print("나는 %d살입니다." %20) print("나는 %s를 좋아합니다." %"영화") print("Apple 는 %c로 시작해요." %"A") 참고로, %s 스트링 값으로 찍으면 숫자나 char형을 모두 출력할 수 있다. 여러 글자를 찍을 수도 있다. print("나는 %s와 %s을 좋아합니다." %("영화", "음악")) EX03. {} print("나는 {}를 좋아합니다.".format("영화")) print("나는 {}와 {}을 좋아합니다.".format("영화", "음악.. 2022. 12. 17.
[Python] 문자열처리함수 : index와 find의 차이 lower(), upper() 소문자, 대문자 출력 python = "Python IS Amazing" #소문자 출력 print(python.lower()) #대문자 출력 print(python.upper()) #0번째 글자가 대문자인지 확인 print(python[0].isupper()) #0번째 글자가 소문자인지 확인 print(python[0].islower()) len() 글자 길이 확인(공백포함) python = "Python IS Amazing" print(len(python)) replace() 글자 대체 python = "Python IS Amazing" #글자의 일부분만 다른 글자로 대체 print(python.replace("Python", "JAVA")) index() 글자의 위치값 .. 2022. 12. 17.
[Python] 슬라이싱 프로그래밍을 하다보면 문자의 몇번째열만 떼와서 사용하고 싶을 떄가 있다. 파이썬은 이 방법이 상당히 간편한 편. jumin = "990101-1234567" 이런 주민번호가 있다고 치자. 성별의 정보를 알 수 있는 뒷줄 첫번째 글자를 가져오고 싶을 때는 이렇게 쓴다. print("성별 : " + jumin[7]) 8번째 글자인데 왜 7이어야 하는가? 첫번째 자리를 0번부터 세기 때문이다. 그럼 생년 월일을 각각 출력하고 싶을 때는? print("년 : " + jumin[0:2]) print("월 : " + jumin[2:4]) print("일 : " + jumin[4:6]) jumin[0:2] 이런식으로 작성하면 0번부터 2번의 앞자리까지 출력한다. 그럼 몇번째부터 앞에나 뒤에 문자열을 모두 출력하고 싶.. 2022. 12. 17.
[Python] random 함수 사용전 필수 from random import * random from random import * #0.0~1.0 미만의 임의값 생성 print(random()) #0.0~10.0 미만의 임의값 생성 print(random() * 10) #0~10 미만의 임의의 정수값 생성 print(int(random() * 10)) print(int(random() * 10)) #0~10 이하의 임의의 정수값 생성 print(int(random() * 10) + 1) print(int(random() * 10) + 1) print(int(random() * 10) + 1) print(int(random() * 10) + 1) 하지만 위와 같이 print(int(random() * 10) + 1) 이런 식으로 사용을.. 2022. 12. 17.
[Python] 숫자처리 함수 절대값 출력 print(abs(-5)) print(abs(5)) 최대, 최소 출력 print(max(5, 12)) print(max(1, 5, 12, 8, 14)) print(min(5, 12)) print(min(5, 12, 8)) print(min(5, 12, 8, 4)) 반올림 print(round(3.14)) print(round(3.99)) 내림, 올림, 제곱근 math 라이브러리를 import 해주어야 사용 가능하다. from math import * print(floor(4.99)) #내림 print(ceil(4.99)) #올림 print(sqrt(16)) #제곱근 2022. 12. 17.
[Python] 연산자 : 승, 나머지, 몫 더하기 빼기, 비교연산자는 다른 언어들과 비슷하니 제외한다. print(2**3) #2의 3승 = 8 print(5%3) #5를 3으로 나눈 나머지 print(5//3) #5를 3으로 나눈몫 print(1 != 3) print(not(1 != 3)) print((3 > 0) and (3 0) & (3 0 ) or (3 > 5)) print((3 > 0 ) | (3 > 5)) print(5 > 4 > 3) print(5 > 4 > 7) 2022. 12. 17.
[REACT] Hooks Hook 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이다. Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다. React 버전 16.8부터 새로 추가된 요소. 참고자료 https://ko.reactjs.org/docs/hooks-overview.html 2022. 12. 15.
[REACT] Hooks : useEffect useEffect 리액트 컴포넌트가 랜더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 HOOK함수 import { useState, useEffect } from "react"; const Info=()=>{ const [name, setName] = useState(''); const [nickname, setNickname] = useState(''); useEffect(()=>{ console.log('랜더링이 완료 되었습니다.'); console.log({ name, nickname }) }) const onChangeName = (e) =>{ setName(e.target.value); } const onChangeNickname = (e) =>{ setNickname(e.target.v.. 2022. 12. 15.
[REACT] newsapi newsapi 에서 제공하는 API를 통해 최신 뉴스를 불러 온 후 출력하는 예제 사전에 newsapi에서 제공하는 API키를 발급받아야한다. 1. 발급 https://newsapi.org/account Login - News API newsapi.org 2. 발급받은 api를 axios를 사용하여 불러오기 import { useState } from "react"; import axios from "axios"; const App=()=>{ const[data, setData] = useState(null); const onClick=()=>{ axios .get('https://newsapi.org/v2/top-headlines?country=kr&apiKey=e52ce7509c584062931c0b.. 2022. 12. 14.
[REACT] axios axios axios는 현재 가장 많이 사용하는 자바스크립트 HTTP 클라이언트 이 라이브러리의 특징은 HTTP 요청을 Promise기반으로 처리한다는 것 1. axios 설치 해당 프로젝트에 axios 설치 yarn add axios 2. JSON.stringify : 자바 스크립트 객체를 JSON 텍스트 형식으로 변환하는 함수. JSON.parse : JSON 형식의 텍스트를 자바 스크립트 형식으로 변환하는 함수. import { useState } from "react"; import axios from "axios"; const App=()=>{ const[data, setData] = useState(null); const onClick=()=>{ axios .get('https://jsonpl.. 2022. 12. 14.
728x90
반응형

티스토리툴바