코딩하는 이채야채

*이화랑님 블로그와, 리액트공식문서를 보고 옮겨적은 내용입니다. https://leehwarang.github.io/2020/05/02/useMemo&useCallback.html useMemo, useCallback을 하기전에 알아야하는 상식? 1. 함수형 컴포넌트는 그냥 함수다. 함수형컴포넌트는 단지 jsx를 반환하는 함수이다. 2. 컴포넌트가 렌더링된다? 누군가 그 함수(컴포넌트)를 호출하였기에 실행된것이다. 함수가 실행될때마다 내부에 선언되어있는 표현식도(변수, 또다른 함수) 매번 다시 선언되어 사용된다. 3. 컴포넌트는 자신의 state가 변경되거나, 부모에게서 받은 Props가 변경되었을때마다 리렌더링된다. (하위 컴포넌트에서 최적화를 하지 않으면, 리렌더링된다.) useMemo '메모리제이션..

이전 프로젝트에서 하드 코딩식으로 구현했었는데, 이번 과제에서는 좀더 효율적으로 구현하여 리뷰를 남긴다. 두가지 방법이있다. 1. 네비게이션바를 이용하여 네비게이션바와 endpoint부분이 일치하는 경우 (아래처럼 result누르면 localhost:8080/result) 이경우는 useLocation을 이용하는 방법이다. import { useLocation, useNavigate } from "react-router-dom"; //import를 시킨다. const Navbar = () => { const navigate = useNavigate(); const { pathname } = useLocation(); // useLocation안의 pathname을 사용한다. const Titles = [..

상태끌어올리기에 대해서 공부했으니 실제 코드를 보면서 자세히 공부해보자. 페어와 함께 했던것을 다시보면 이해를 못했던것이 반이상이기에 혼자서 꼭 다시풀어보는 시간이 필요하다. (2~3일 후 까먹을쯤ㅋㅋ) 처음 받았던 Main.js를 분석해보자 import Head from 'next/head' import { useEffect, useState } from 'react' import { getFlight } from '../api/FlightDataApi' import FlightList from './component/FlightList' import LoadingIndicator from './component/LoadingIndicator' import Search from './component/..

오늘은 리덕스에 대해서 본격적으로 배워봤다. node => express처럼 오히려 구현하기 쉬웠을거라고 생각했는데 리덕스가 어려운 개념이더라 그렇다고 대충 넘어간다면?진짜 분명 부메랑을 쳐맞게될것이야.. 어려울수록 천천히 기본기를 다져보자 Redux를 쓰는 이유 1. props가 귀찮을때 사용한다. 2. state변경 관리할 떄 사용한다. 상태에 변화가 필요하면? 액션!!!이 필요 Action? : type과 필요한 데이터(액션)을 담은 객체 type은 필수다! { type : "ADD_TODO" // 예시를 살펴보니 타입 : 대문자로 써준다. data : { id : 0, text : "봄바 꼬몽 씻기고 리덕스공부" } } Action Creator : 액션함수 export function addTo..

하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다 내려줄때 변경하는 함수!!!를 내려주는것에 주목하자 코드를 분석하며 공부해보자! Action Item: 예제 분석하기 https://codesandbox.io/s/simple-lifting-state-up-hooks-ljrdy?from-embed simple-lifting-state-up-hooks - CodeSandbox simple-lifting-state-up-hooks by gotoweb using react, react-dom, react-scripts codesandbox.io import React, { u..

Redux를 쓰는 이유 1. props가 귀찮을때 사용한다. 2. state변경 관리할 떄 사용한다. 리액트 스타일 웹개발 : 컴포넌트 단위로 쪼개서 개발해준다. 앞서 배웟듯이 component는 html 덩어리. 쪼갠것 함수인데 html을 뱉는 함수 state ) //꺼내온거 = 100 return ( 님의 처참한 몸무게 : {꺼내온거} //꺼내온거 = 100 ) } export default App props없이 state 직접 꺼내다쓸수있고 state관리하기용이하다 어떻게 보면 API를 만든다고 생각할수도 있다. 컴포넌트들은 수정요청을한다. 버그가 생겼을때 ? 누구 문제야!! 접니다 store.js state수정 방법 Reducer import {Provider} from 'react-redux';..

useRef Dom을 선택하는 용도로 사용 컴포넌트 안에서 조회 및 수정할 수 있는 변수 관리 오늘은 usRef의 첫번째 특징 Dom선택용도에 대해 공부해보려한다. 렛츠고! 이전에 돔 시간에서 자바스크립트의 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택했다. 리액트에서도 가끔 돔을 직접 선택해야하는 상황이 있다고한다 이럴때 사용하는게 useRef Hook함수 useRef로 DOM 노드, 엘리먼트, 그리고 리액트 컴포넌트 주소값을 참조한다 주소값은 컴포넌트가 re-render 되더라도 바뀌지 않는다. 조금 쉬운 코드를 만들어서 이해해보자 import logo from './logo.svg'; import {useRef, useref} fr..

노카드코더 보면서 리액트와 익숙해지자 좌절감으로 배움을 늦추지 마라!! import logo from './logo.svg'; import {useState, useEffect} from "react" import './App.css'; function App() { const [loading,setLoading] = useState(true) const [coins, setCoins] = useState([]) const [dollors,setDollors] = useState('') const [inverted,setInverted] = useState(true) const onChange = (event)=>{ setDollors(event.target.value) } const onClick = ..