전체 글
-
React Hooks 란Programming/React 2021. 5. 2. 20:25
React Hooks React Hooks은 리액트의 새로운 기능으로 React 16.8버전에 새로 추가된 기능으로 state, component에 대한 것들을 바꿔놓았다. 예를 들면 function component에서 state을 가질 수 있게 된 것 만일 앱을 react hook을 사용하여 만든다면 class component, render 등을 안해도 된다는 뜻이다. 모든 것은 하나의 function이 되는 것 함수형 프로그래밍이 가능해지는 것 React Hokks를 사용 했을 때와 안했을 때의 차이를 간단한 예제로 살펴보도록 하겠습니다. class component import React, { Component } from 'react'; class App extends Component { s..
-
비동기처리, Promise, async/await 이해Programming/JavaScript 2021. 5. 2. 20:22
동기(synchronous) vs 비동기(asynchronous) 동기와 비동기를 나누는 큰 차이점은 실행 순서입니다. 동기는 요청을 보낸 후 해당하는 응답을 받아야만 다음으로 넘어갈 수 있는 실행방식이고 반대로 비동기는 요청을 보낸 후에 응답과 관계없이 다음 동작을 실행할 수 있는 방식입니다. 간단하게 동기와 비동기방식을 생활에 적용한 예를 들어보도록 하겠습니다. 동기적 방식 병원 진료를 볼때에 창구에 접수를 하기 위해서 번호표를 뽑습니다. 저의 번호표는 3번으로 저의 앞에는 1번 2번 번호표를 가진 분이 존재합니다. 1번 손님 접수요청 -> 창구에서 응답 -> 접수완료 -> 2번 손님 접수요청 -> 창구에서 응답 -> 접수완료 -> 3번 손님 접수요청 .... 위의 예시와 같이 동기적 방식은 순서가 ..
-
React useEffect 사용 title 변경하기Programming/React 2021. 4. 25. 23:55
실습은 codesandbox를 이용했습니다. app.js import React, { useState, useEffect } from "react"; import "./styles.css"; export default function App() { return ( Home Content Setup ); } 예시로 각각의 button 을 클릭했을 시 그 페이지로 이동했다고 가정하고 웹 title을 변경하도록 하겠습니다. const useTitle = () => { const [title, setTitle] = useState(null); const updateTitle = () => { const htmlTitle = document.querySelector("title"); htmlTitle.innerH..
-
React FadeIn 함수 만들기 (useRef, useEffect)Programming/React 2021. 4. 25. 11:09
실습은 codesandbox를 이용했고, 노마드코더님의 인강을 참조하고 공부 및 복습 목적으로 작성했습니다. 실습을 시작하기에 앞서 css 트랜지션을 사용하도록 하겠습니다. transition-duration : 트랜지션이 일어나는 지속 시간을 명시하는 속성입니다. transition-delay : 속성이 변하는 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다. export default function App() { return ( hello! fadeIn Training ); } 시작은 화면에 h1과 p태그에 fadeIn 효과를 주도록 하겠습니다. 먼저 useFadeIn 함수를 만들고 인자값으로는 duration 과 delay 값을 받도록 하겠습니다. const useFadeIn ..