Studying Coding Studying Coding

1. Feature - Fetch Api - When a user clicks a button, the info changes. 2. Solution // App.js const App = ()=>{ const [jobs, setJobs] = useState([]); const [value, setValue] = useState(0); const [loading, setLoding] =useState(true) const fetchData = async () =>{ const res = await fetch(url) const data = await res.json() setLoding(false) setJobs(data) } useEffect(()=>{ fetchData() },[]) if (loadi..

1. Feature - When the 'plus' button clicks, the user can see the info more. - When the 'minus' button clicks, the info disappears. 2. Solution // App.js const App = ()=>{ const [questions, setQuestions] = useState(data) retrun( ... {questions.map((question)=>{ return ( ) })} ) } // Question.js const Question = ({title, info}) =>{ const [showInfo, setShowInfo] = useState(false); return ( ... setS..

1. Feature - Preve btn - Next btn - Random btn - When the index number becomes smaller than '0', bigger than 'data.length - 1'.the other number must be specified. 2. Solution const Review = () =>{ const [index, setIndex] = useState(0) // data's order number const { name, job, image, text } = people[index]; // according to the index , the info changes const checkNum = (num)=>{ if(num > people.ind..

const ref = useRef(value) Example const App =()=>{ const inputRef = useRef() useEffect(()=>{ console.log(inputRef) }) return ( ... ) } console.log => {current : undefined} // 초기값을 설정해주지 않았음 const App =()=>{ const inputRef = useRef() useEffect(()=>{ inputRef.current.focus() // inpput 창이 계속 focus된다. },[]) return ( ... // ref 는 document.querySelector같은 역할 // input인 element를 감지한다. ) }

해당강의를 보고 정리한 글입니다. https://www.youtube.com/watch?v=VxqZrL4FLz8 const ref = useRef(value) 함수형 component에서 useRef를 호출시에 ref object를 반환해준다. ref => {current : value} 언제 사용 ? 1. 어떤값을 저장하는 공간 state의 변화 > 렌더링 > 컴포넌트 내부 변수들 초기화 ref의 변화 > no 렌더링 > 변수들의 값이 유지됨 state 의 변화 > 렌더링 > ref의 값이 유지됨 2. DOM 요소에 접근 ex. input 요소에 자동으로 focus를 두고 싶을때 / document.queryselector()같은 역할 Example 1 const countRef = useRef(0) ..

해당글은 아래 강의를 보고 정리한 글입니다. https://www.youtube.com/watch?v=XfUF9qLa3mU What is memoization ? 특정한 값을 여러번 사용할때 이전에 계산한 값을 casing해 둠으로서 해당값이 필요할때 다시 계산 하는것이 아니라 저장해둔 값을 꺼내서 쓰는 것을 말한다. useCallback useMemo 처럼 value를 저장해두는 것이 아닌 callback함수를 저장하는 방식이다. 함수형 컴포넌트를 호출하면 모든 내부의 변수들이 초기화 된다. 내부의 함수를 useCallback으로 감싸줄경우 처음 호출할때만 함수를 초기화하고 그값을 저장하녀 함수형 컴포넌트를 재 호출할때 useCallback함수는 초기화하는것이 아니라 저장한 함수를 불러온다. Synta..

해당영상을 보고 정리한 글입니다. https://www.youtube.com/watch?v=e-CnI8Q5RY4&t=451s Component성능 최적화 를 위해 사용된다. 자주사용하는 값을 처음 계산을 했을때 저장을 해두고 다음 사용해야할때 꺼내서 쓸수 있게 하는 것. 함수를 렌더링 할때 함수안에 모든 값들은 재 렌더링 된다. 함수 안에 함수가 복잡한일을 하는 함수라면 usememo를 통해 이값을 저장하고 재 렌더링을 막는다. 구조 const value = useMemo(() =>{ retrun calculate(); }, [item]) useMemo(콜백함수 , 배열) 배열 이 업데이트 되어질 때만 콜백함수를 호출해서 변경한다. - 꼭 필요할 때만 사용해야 한다. 성능이 악화될수 있다. Example..

Method - useReducer Type : CREAR_CART , REMOVE , GET_TOTALS , LOADING , DISPLAY_ITEMS , TOGGLE_AMOUNT State : { loading : false, cart :cartItems, // one item {id:1 , title:'', price: , img: , amount:1} total:0, amount:0 } 0. useContext & useReducer Setting const AppContext = React.createContext(); const initialState = { loading: false, cart: cartItems, total: 0, amount: 0, }; const AppProvider =..