Front-end/React (34) 썸네일형 리스트형 Hide, Show and Toggle in ReactJs https://www.youtube.com/watch?v=UGSN6o29fPo Hide, Show and Toggle in ReactJs 리액트 리덕스 (Redux) 튜토리얼 https://youtu.be/wSbjROmXTaY React Life Cycle 정리 React Life Cycle 정리 리액트 라이프 사이클이란? 리액트의 각 컴포넌트는 라이프사이클을 가진다. 리액트를 사용해 화면에 뷰가 그려지는 과정은 단순히 보았을때 컴포넌트를 작성한다. 컴포넌트를 ReactDOM.render()를 이용해 그려낸다. const App = () => { return ( Hello World ); }; ReactDOM.render(, document.querySelector("#root")); App이라는 컴포넌트가 DOM에 그려지고 없어지기 까지 과정(Life Cycle)이 있고 리액트에선 이 과정 중 하고싶은 일을 정의 하게 해 줄 수 있다. 어떻게? LifeCycle Methods를 이용해서 Source: https://github.com/wojtekmaj/reac.. React - React-Router란? 리액트 라우터 설치 우선 기본 리액트 앱을 만들었다고 가정하겠다(CRA 이용). 해당 폴더에 아래와 같이 입력해 라우터를 설치하자. npm install react-router-dom 리액트 라우터 기초 BrowserRouter 우선 BrowserRouter를 import 시킨다. 그 옆에 필요한 도구들을 계속 import 할 예정이다. BrowserRouter은 SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어준다. 그리고 App 컴포넌트를 BrowserRouter 컴포넌트로 감싸준다. App.js 기본 셋팅 import React from 'react'; import ReactDOM from 'react-dom'; import {BrowserRouter} from 'rea.. 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 - 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 ); } 위의 코드.. 이전 1 2 3 4 5 다음
