react

React : props 중첩되어있을 때 편한 "Context API" (사용법)

App 안에 있는 state를 App -> Detail -> Tab으로 2번 props 전송하려면 조금 귀찮다. 그리고 2번이 아니라 10번 중첩되면 난감해진다. 그럴 때 Context API를 쓰면 편하다. Context API 우선 단점부터 성능이슈(state 변경시 쓸데없는 컴포넌트까지 재렌더링됨)와 컴포넌트 재활용이 어려운 점 때문에 실무에서는 자주 쓰진 못한다고 한다. 그래서 이것보다 redux같은 외부 라이브러리를 더 많이 사용한다. 사용법 전송 보내는 컴포넌트 import { createContext, useState, useEffect } from "react"; export let Context1 = createContext() function App() { let [pracContext..

React : 탭 내용 fade되도록 만들기 (+class에 변수 넣기)

풀이 useEffect를 사용하여 tab 값이 변경될 때마다 fade 값을 업데이트하고, 컴포넌트가 언마운트될 때 fade를 초기화하도록 넣었다. function TabContent({tab}){ let [fade, setFade] = useState('') useEffect(()=>{ setTimeout(()=>{ setFade('end') }, 100) return ()=>{ setFade('') } }, [tab]) return ( {/* */} { [내용0, 내용1, 내용2][tab] } ) } 알게 된 점 cleanup function을 사용해 end를 뗐다가 부착할 수 있도록 하였다. setTimeout을 이용하여 automatic batching 기능을 무효할 수 있도록 하였다. class에..

React 정리 (1) : useEffect, clean up (조건 별 실행순서), automatic batching

useEffect와 cleanup함수의 조건 별 실행순서 의존성 배열 값이 있을 때 useEffect(()=>{ //함수 A return ()=>{ //함수 B } }, [변수나state]) Mount(초기 마운트) 시나리오: 컴포넌트가 처음으로 마운트되면 함수 A가 실행 Update(업데이트) 시나리오: 컴포넌트가 업데이트되고 의존성 배열에 포함된 변수나 state가 변경되면, 먼저 함수 B가 실행 후 함수 A가 실행 Unmount(마운트 해제) 시나리오: 컴포넌트가 마운트 해제되면 함수 B가 실행 의존성 배열 값이 비었을 때 useEffect(()=>{ //함수 A return ()=>{ //함수 B } }, []) Mount(초기 마운트) 시나리오: 컴포넌트가 처음으로 마운트되면 함수 A가 실행 U..

React : 탭 만들기 (if else, array로 만들기) + props 귀찮을 때 팁

풀이 function Detail(props){ let [tab, setTab] = useState(0); return ( {setTab(0)}}>버튼0 {setTab(1)}}>버튼1 {setTab(2)}}>버튼2 ) } function TabContent(props){ if (props.tab === 0) { return 내용0 } else if (props.tab === 1) { return 내용1 } else if (props.tab === 2) { return 내용2 } } 더 센스있게 풀기 function TabContent({tab}){ return [내용0, 내용1, 내용2][tab] } 알게 된 점 JSX는 JavaScript의 확장 문법이지만, switch 문은 JavaScript의 제어..

React : 더보기 버튼을 누를 때마다 다른 get주소 데이터 불러오기 (+로딩중)

조건 더보기 버튼을 1번과 2번 누를 때 각각 다른 get 주소 상품 데이터를 불러오고, 3번 누르면 더이상 상품이 없다고 표시한다. 풀이 '3번 이상 더보기 버튼을 눌렀을 시 더이상 상품 없음 알림'과 '더보기 버튼 클릭 횟수'를 state로 작성했다. 버튼 클릭 시 클릭 횟수를 1 증가시키는 콜백함수(handleClick)를 작성해 버튼 이벤트핸들러 안에 넣었다. 더보기 버튼 클릭 시 실행될 콜백함수(moreProduct)를 작성했다. - ajax로 상품데이터를 불러오기 전 loading을 실행시켰다. (setLoading(true);) - 클릭 횟수에 따른 url을 변수로 만든 후, if문으로 처리하였다. (3번 이상 클릭 시 '상품 없음 알림' true, '로딩' false, ajax 실행을 중단..

React : ajax 상품 불러오기 전 로딩중 만들기

조건 더보기 버튼을 눌렀을 때 ajax로 상품을 불러오는 중에 로딩중 박스를 띄우고, 상품을 불러온 후에는 안보이게 만들기 풀이 get 전에 로딩중을 불러오고, then 마지막에 풀어주었다. function Main(props){ let [alert, setAlert] = useState(false); let moreProduct = function(){ setAlert(true); axios.get('https://codingapple1.github.io/shop/data2.json') .then((response)=>{ let newProduct = response.data; let copyShoes = [...props.shoes, ...newProduct]; props.setShoes(copySh..