Studying Coding Studying Coding

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..

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 =..

Where did I learn? https://www.youtube.com/watch?v=a_7Z7C_JCyo&t=328s Step 1. Context.js Make 'createContext', 'Provider' in here const AppContext = React.createContext(); const AppProvider = ({children}) =>{ const [isSidebarOpen, setIsSidebarOpen] = useState(false); const [isSubmenuOpen, setIsSubmenuOpen] = useState(false); const [page, setPage] = useState({ page: "", links: [] }); const [locat..

Where did I learn? https://www.youtube.com/watch?v=a_7Z7C_JCyo&t=328s Order 1. Make 'createContext' 2. Make 'AppProvider', - build the - get one parm 'children', it will be the children components 3. Set inside the index.js > 's all the children components can use value 4. Option : Make 'useGlobalContext' and return useContext(AppContext) 5. Set 'const {using props} = useGlobalContext ' or 'useC..

Where did I learn? https://www.youtube.com/watch?v=a_7Z7C_JCyo&t=328s useRef 의 정보는 re-render을 일으키지 않기에 불필요한 메모리 사용을 줄인다. 특정 DOM에 접근하고 싶다면 queryselector이나 getElementId를 활용., react에서 이러한 것들을 가능하게 해주는 것이 useRef. const refContainer = useRef(initialValue); Method 1. min-width:800px 까지는 'toggle btn ' 없이 links들이 다 보여짐 (display: grid) 2. width:800px 이하로 작아지면 'toggle btn'만들어 links들을 숨김 3. 'toggle btn' cl..

Where did I learn? https://www.youtube.com/watch?v=a_7Z7C_JCyo&t=328s - What do we need? 1. setLocal 2. getlocal 3. return 4. (list , alert) components 5.submit 6. edit 7. remove 8. clear 1. setLocal funxtion App(){ const [list, setList] = useState(getLocalStorage()); useEffect(()=>{ localStorage.setItem('list', JSON.stringify(list)); }, [list); } list 들을 string형식으로 local에 저장한다. 여기서 key는 'list' ..

Where did I learn? https://www.youtube.com/watch?v=a_7Z7C_JCyo&t=328s - what should I do 1. make a form 2. Change the number of paragraphs according to the input number - Method 1. make a form return ( // submit 하면 어떤 변화가 일어날지 // paragraph수를 input 에 맞게 변화시켜야한다. Paragrapph : setCount(e.target.value)} // input 의 value를 넘겨서 setcount를 변화 > Submit 2. Change the number of paragraphs according to the i..

Where did I learn? https://www.youtube.com/watch?v=a_7Z7C_JCyo&t=328s settting 1. 5초 마다 오른쪽으로 화면 자동 이동 2. 왼 오 버튼누르면 화면 이동 method 1. data와(people의 정보가 들어있는) , index 번호 세팅 function App(){ const [people, setPeople] = useState(data) // data는 info가 들어있는 js파일 const [index, setIndex] = useState(0); // index순서대로 화면의 정보가 달라짐 } 2. usestate를 이용해서 index변경 최대, 최소 부분 설정 + setInterval 이용해서 index번호 변경 useEffect..