Studying Coding Studying Coding

Props System Parent Component => [props] => Child Component - Pass data from a parent to a child - Allows a parent to configure each child differently - One-way flow of data. A child can't push props back up. - Like 25% of understanding React Example) Parent Component : function App(){ return } => Props Object : {color : "red"} => Child Component : function Child(props){ return props.color } 29...

Generating a Project npx create-react-app Go Into the Project cd Run npm start What are we running in our terminal? Files in my Project [index.js , App.js , reportWebVitals.js] => Create React App Dev Server - Babel : Tool to true JSX into normal JS code => - Webpack : Tool to merge all project into a single file => - bundle.js Inside the folder - index.js : First file that gets executed when ou..

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