Programming/React
-
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..
-
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 ..
-
React 할 일 목록 만들기 ( TodoList ) 추가,수정,삭제,검색Programming/React 2020. 11. 22. 23:52
실습은 npx react-creat-app [projectname] 으로 실습환경 구축 기능은 추가, 수정, 삭제, 검색을 만들도록 하겠습니다. 프로젝트 구조 실습코드 app.js import React, { Component } from 'react'; import ToDoForm from './component/ToDoForm'; import ToDoList from './component/ToDoList'; import './App.css'; class App extends Component { id = 4; state = { toDoList: [ { id: 1, text: '러닝 뛰기', }, { id: 2, text: '공부하기', }, { id: 3, text: '독서하기', }, ], sea..