본문 바로가기

FRONTEND

(6)
React Topics 1. Components and Props Controlled Components Controlled components are React components whose form elements (such as input fields) are controlled by React state. This means that the component's state holds the current value of the form element, and any changes to the value are handled by updating the state. Here's an example: import React, { useState } from 'react'; function ControlledComponent..
[6. React.js] Performance Optimization: UseMemo vs UseCallBack useCallback and useMemo are both React Hooks that help optimize the performance of a React application by memoizing values. They both accept a function as an argument and return a memoized version of the function. Here is a simplified explanation of the difference between the two: useCallback useCallback is a hook that returns a memoized callback. A callback is a function that is passed as an ar..
[5. React.js] UseContext vs Redux https://www.geeksforgeeks.org/whats-the-difference-between-usecontext-and-redux/
[4. React.js] Multiple Dependency Array in fetchData() In React, when you need to fetch data from multiple dependencies (such as multiple APIs or endpoints), you can make use of Promise.all() to handle multiple asynchronous requests. Promise.all() allows you to wait for multiple promises to resolve and then gather the results. Here's an example of how you can fetch data from multiple dependencies in React using Promise.all(): import React, { useEffe..
[3. React.js] Link to new Page vs Pass to Component [Props] In React when you want to design a page wherein user clicks on product details on the main product list page should I link to new page then pass props to the product detail component or pass to product detail component first then link the product detail page? show me code snippets with explanation when designing a page where the user clicks on a product in the main product list page and wants to..
[1. React.js] React.js File Structure (Modular) src/ ├── components/ │ ├── Button/ │ │ ├── Button.js │ │ ├── Button.css │ ├── Title/ │ │ ├── Title.js │ │ ├── Title.css │ ├── Container/ │ │ ├── Container.js │ │ ├── Container.css ├── pages/ │ ├── HomePage/ │ │ ├── HomePage.js │ │ ├── HomePage.css │ ├── AboutPage/ │ │ ├── AboutPage.js │ │ ├── AboutPage.css ├── App.js ├── index.js Breakdown of the file structure: The components directory contains..