본문 바로가기

분류 전체보기

 (231)
React - Review 사이트 방문 : https://reviewwithreact.netlify.app 개발목표 : Review를 확인할 수 있는 APP입니다. 다음/이전 리뷰를 확인할 수 있고 랜덤 버튼을 사용하여 무작위 리뷰를 볼 수 있습니다. 구현기간 : 2021-06-18 ~ 2021-06-19 Skills : React, HTML, CSS, JavaScript(ES6) 배포 : Netlify Code : https://github.com/bellcastle88/ReactReview
React - Tours 사이트 방문 : https://tourwithreact.netlify.app 개발목표 : 여행 API를 활용하여 목록을 보여주는 사이트 입니다. Read More를 이용해서 모든 내용을 읽을 수 있고 가격도 확인할 수 있습니다. 관심없는 목록은 Not Interested를 클릭하여 삭제할 수 있습니다. 모든 목록삭제시 refresh버튼을 클릭하여 모든 목록을 다시 불러올 수 있습니다. 구현기간 : 2021-06-18 ~ 2021-06-19 Skills : React, HTML, CSS, JavaScript(ES6) 배포 : Netlify Code : https://github.com/bellcastle88/ReactTour
React - removeEventListener useEffect(() => { window.addEventListener('resize', checkSize); return () => { window.removeEventListener('resize', checkSize) }; }) addEventListener만 사용하면 state가 바뀔 때마다 함수가 재생성 된다 이 문제를 막기위해 removeEventListener 사용한다. removeEventListener를 사용하면 더 이상 함수가 재생성 되지 않고 한번만 생성된다.
React - useEffect : github user profile 만들기 import React, { useState, useEffect } from 'react'; const url = 'https://api.github.com/users'; const UseEffectFetchData = () => { const [users, setUsers] = useState([]); // url주소 가져오기 const getUsers = async () => { const response = await fetch(url); const users = await response.json(); setUsers(users); }; // [] = 사용하지 않으면 데이터가 무한으로 reload된다. useEffect(() => { getUsers(); }, []); return ( github..
useEffect 란? react의 컴포넌트 내에서 데이터를 가져오거나 구독하고, DOM을 조작하는 작업을 side effects 또는 effects라고 한다. 이는 다른 컴포넌트에 영향을 줄 수 도 있고 렌더링 과정에서는 구현 불가능한 작업이기 때문이다. useEffect는 이러한 side effects를 수행할 수 있도록 해준다. 클래스 컴포넌트의 componentDidMount나 componentDidUpdate, componentWillUnmount와 같이 lifecycle을 다루는 목적으로 제공되지만 이를 하나의 API로 통합하였다는 것이 차이점이다. 클래스형 컴포넌트의 life cycle react의 원래 lifecycle은 위의 그림과 같다. react 컴포넌트 side effect에는 일반적으로 정리가 필요한 것..
React Birthday-Reminder 사이트 방문 : https://birthdaywithme.netlify.app/ 개발목표 : 생일 목록을 보여주는 React Birthday-Reminder입니다. 아래 Clear All을 클릭하여 목록을 삭제 할 수 있습니다. useState를 활용하여 List목록 components을 표시하고 Data를 가져오는 공부를 하였습니다. 구현기간 : 2021-06-16 ~ 2021-06-17 Skills : React, HTML, CSS, JavaScript(ES6) 배포 : Netlify Code : https://github.com/bellcastle88/ReactBirthday
React - useState : Ragular Counter 만들기 - useState function를 호출할때는 onClick={ () => setValue} 에로우function을 꼭 사용해야 한다 ( 클릭했을때만 실행되도록 하기 위해서 ) import React, { useState } from 'react'; const UseStateCounter = () => { const [value, setValue] = useState(0); const reset = () => { setValue(0); } return ( ragular counter {value} setValue (value -1)}>decrease reset setValue (value + 1)}>increase ) }; export default UseStateCounter;
React - useState 이해하기

티스토리툴바