Front-end (97) 썸네일형 리스트형 React - PropTypes란? PropTypes 사용하기 React 공식 문서 기본 사용법 import PropTypes from 'prop-types'; const Greeting = ({ name }) => { return ( Hello, {name} ); } Greeting.propTypes = { name: PropTypes.string }; isRequired .isRequired를 types뒤에 붙여주면 필수 prop으로 인식하고, 값이 없거나 잘못되었을 경우 콘솔 창에서 오류를 확인할 수 있다. Greeting.propTypes = { name: PropTypes.string.isRequired }; 복잡한 배열이나 객체 string이나 number같은 원시자료형의 경우 PropTypes를 위 기본 사용법처럼 그대로 써도.. React - useFetch란? useFetch payload 변수, loading 변수, error변수 useEffect는 componentdidmount처럼 쓰려고 []을 전달해준다. 해당 배열안에는 트레킹할 변수들을 넣어주면. 그 변수가 바뀔때만 update가 된다. 해당 변수가 비어있으니, didmount만 하고 끝~ function useFetch(url) { const [payload, setPayload] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(""); const callUrl = async () => { try { const { data } = await Axios.get(url); s.. React - Stripe Preview : 사이트 방문 : https://stripe-withreact.netlify.app/ 소개 : Hover기능을 활용한 Landing page입니다. stripe.com사이트를 모티브로 제작하였고 반응형기능이 추가되었습니다. 구현기간 : 2021-06-25 ~ 2021-06-25 Skills : React, HTML, CSS, JavaScript(ES6) Code : https://github.com/bellcastle88/ReactStripe React - Sidebar/Model Preview : 사이트 방문 : https://sidebar-modal-withreact.netlify.app/ 소개 : 목록을 볼 수 있는 SIdeBar와 Modal을 볼수있는 APP입니다. useContext를 활용하여 여러 component에서 사용할 수 있는 Provider생성하여 만들어졌습니다. 구현기간 : 2021-06-24 ~ 2021-06-24 Skills : React, HTML, CSS, JavaScript(ES6) Code : https://github.com/bellcastle88/ReactSidebar-Model React - useReducer란? useReducer useState처럼 상태를 업데이트할 수 있습니다. 차이점으로는 useState는 다음 상태를 직접 지정하지만, useReducer는 액션이라는 객체를 기반으로 상태를 바꾸어줍니다. useReducer 선언하기 import React, { useReducer } from "react"; const [number, dispatch] = useReducer(reducer, 0); number는 현재 상태값, dispatch는 액션을 발생시키며 reducer에는 함수를, 0에는 초기값을 나타냅니다. useReducer 사용하기 useReducer(function, dependencies); function에는 실행할 함수를, dependencies에는 의존할 값을 나타냅니다. functio.. useRef 란 ? useRef 란 리액트 Hooks 중의 하나로 useState나 useEffect 만큼 자주 사용되는 훅은 아니지만, 보다 심도 있는 react 코딩을 위해서는 알아두는 것이 좋은 hooks 입니다. useRef의 주 기능은 기존 바닐라 자바스크립트에서 특정 DOM을 사용하던 것처럼 특정 엘리먼트의 속성을 활용하는 것입니다. function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input element inputEl.current.focus(); }; return ( Focus the input ); } 위의 코드.. React - Navbar Preview : 사이트 방문 : https://navbar-with-react.netlify.app/ 소개 : 반응형 ReactNavbar입니다. 화면이 작아지면 오른쪽에 메뉴바가 생기고 클릭시 아래 목록이 나타납니다. useRef를 사용하여 Navbar목록 추가시 자동으로 메뉴창의 크기가 변경되도록 하였습니다. 구현기간 : 2021-06-23 ~ 2021-06-24 Skills : React, HTML, CSS, JavaScript(ES6) Code : https://github.com/bellcastle88/ReactNavbar React - Grocery-bud Preview : 사이트 방문 : https://grocery-bud-withreact.netlify.app/ 소개 : 구매 할 식재료를 저장할 수 있는 APP입니다. CRUD기능을 포함하고 있고 로컬스토리지에 목록을 저장할 수 있습니다. 구현기간 : 2021-06-22 ~ 2021-06-23 Skills : React, HTML, CSS, JavaScript(ES6) Code : https://github.com/bellcastle88/ReactGrocery-bud 이전 1 2 3 4 5 6 7 ··· 13 다음
