Studying Coding Studying Coding

1. Feature - useReducer const [state, dispatch] = useReducer(reducer, initialState); //const [, ] = useReducer(, , ) //state 는 우리가 앞으로 컴포넌트에서 사용 할 수 있는 상태 //dispatch 는 액션을 발생시키는 함수 2. Method content.js => useContext const url = "https://course-api.com/react-useReducer-cart-project"; cosnt AppContext = React.reactContext(); const initialState={ loading:false, cart:cartItems, total:0, amount:0 } c..

1. Feature - useContext - useRef 2. Solution useContext const AppContext = React.CreateContext() const AppProvider = ({children}) =>{ const [isSidebarOpen , setIssidebarOpen] = useState(false); const [isSubmenuOpen, setIsSubmenuOpen] =useState(false); const [page, setPage] = useState({page:'', links:[]}) const [location, setLocation] =useState({}) const openSidebar = ()=>{ setIssidebarOpen(true)..

Everything I learned from YouTube below: I write because I want to organize and leave my knowledge. There is no purpose for economic profit. https://www.youtube.com/watch?v=a_7Z7C_JCyo&t=518s 1. Feature - useContent 2. Solution - Create UseContent in the content.js const AppContext = React.createContext(); const AppProvider =({children}) =>{ const [isSidebarOpen, setIsSidebarOpen] = useState(fal..

Everything I learned from YouTube below: I write because I want to organize and leave my knowledge. There is no purpose for economic profit. https://www.youtube.com/watch?v=a_7Z7C_JCyo&t=518s 1. Feature - UseRef -Toggle Button 2. Solution const Nav = ()=>{ const [showLinks, setShowLinks] = useState(false); const linksContainer = useRef(null); const links = useRef(null); useEffect(()=>{ const lin..

1. Feature - According to the user's input, the number of paragraphs is changed. 2. Method const App = ()=>{ const [count, setCount] = useState(0) const [paragraps, setParagraps] = useState([]) const handleSubmit = (e) =>{ e.preventDefault() let amount = parInt(count) if(count 9){ amount = 9 } setParagraps(data.slice(0, amount)) } return ( setCount(e.target.value) }..

1. Feature - The screen changes every 5 seconds. - When the 'next', 'pre' buttons click, the screen changes. 2. Method const App = ()=>{ const [people, setPeople] =useState(data); const [index, setIndex] = useState(0); useEffect(()=>{ const PeopleNum = people.length -1; if(index PeopleNum){ setIndex(0) } }, [index, people]) useEffect(() => { let slider = se..

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